Как установить видеоплеер через html5

Время от времени на сайтах мне требуется размещать видеоматериал. Конечно, это можно сделать если использовать какие-нибудь js скрипты или библиотеки. Но вполне можно обойтись сервисом Youtube или используя html5 теги.

Рассмотрим загрузку видео на сайт через html5

Уже достаточно давно появились теги, которые позволяют без всяких скриптов, на чистом html загружать видео на вашем сайте с различными параметрами. Кроссбраузерность данных тегов достаточно хорошая (старые IE не в счет), поэтому все современные браузеры их хорошо обрабатывают.

Чаще всего я гружу видео в формате .mp4 или .avi, поэтому для подключения его на сайте использую тег: <video></video>. В нем нужно указать источник на файл и параметры плеера. Рассмотрим пример подключения: <video><source src=“/video/myfile.mp4” /></video>

Здесь вы видите теги video – для его подключения и source – в нем прописывается ссылка на видео. Тегов source может быть несколько, в зависимости от того, сколько форматов одного и того же видео вы имеете. Это необходимо для кроссбраузерности с древними браузерами. Но если честно, то оставлял запись только для подключения mp4 или avi и все везде работало.

Кроссбраузерный вариант подключения видео через html5 (если у вас есть несколько вариантов одного и того же видео в разных форматах).

Кстати заметьте, в этом варианте появились атрибуты:

width и height – для задания высоты и ширины плеера.
controls – позволяет вывести кнопки в плеере для воспроизведения, паузы, перемотки.
preload – если поставить этот атрибут, то видео будет сразу скачиваться, если пользователь откроет страницу с видео. Если установить preload=”none”, то автозагрузки не будет.
autoplay – воспроизводить ли видео сразу после открытия страницы

Как загружать видео на сайт через Youtube.

432423-300x172-2 Достаточно использовать специальный код, которые предлагает этот сервис. Если у вас свое видео, то предварительно загрузите его в аккаунт ютуба. Чтобы поставить на свой сайт любое видео с него, то просто откройте страничку с нужным видео, под низом нажмите Поделиться – HTML код – скопируйте содержимое и установите на свой сайт в любом нужном месте.