Вставить видео на сайт

Вставить видео на сайт

22.01.2019

За годы, прошедшие с момента первой публикации статьи, технологии слишком сильно изменились. Пожалуйста, не следуйте приведенному ниже руководству как руководству по встраиванию видео на сайт. Статья имеет скорее музейную ценность..

Я помню, как много лет назад, когда я начал писать HTML, грустно смотрел на тег img и злился на то, почему не было ни одного тега видео. Спустя годы желанный видеотег появился, но его использование радикально отличается от того, что я ожидал..

  1. в некоторых браузерах это есть, в других нет
  2. некоторые используют некоторые кодеки
  3. другой второй, третий — третий, четвертый — пятый…

вот уже я запутался

Если вы ищете способ легко разместить видео на своем сайте, который подойдет всем, то я могу предложить вам следующее решение..

На самом деле он не покрывает 100% всех устройств, которые может посещать ваш сайт, но вот что он включает:

Flash Video Player для всех настольных компьютеров (реально — ни один компьютер без Flash) и HTML5.

резервное видео для устройств iOS и Android с версией ниже 2.2 или слабыми процессорами. В таком случае, кого нам не хватает? Тот, кто никогда даже не зайдет на наш сайт.

Прежде чем мы начнем, вы можете увидеть простую демонстрацию окончательного результата здесь: https://magadanski.com/demo/video/

Начнем с простой HTML5-страницы с одним тегом видео:

ширина видео = "640" высота = "360" controls = "controls" src = "https://magadanski.com/wp-content/uploads/2011/09/Nickelback-Gotta-Be-Somebody.mp4" poster = " https://magadanski.com/wp-content/uploads/2011/09/Nickelback-Gotta-Be-Somebody-620×349.jpg ">
/ видео>

Тег HTML5 video используется для Flash Fallback, как мы уже объясняли. Установите размеры видео и, возможно, постер и автовоспроизведение. Я включил элементы управления, но пропускать их кажется бессмысленным.

То, что заслуживает внимания, — это формат видео, которое мы используем. Для меня это файл .MP4 (кодеки h.264). Почему это так важно? Как уже упоминалось — это одна из основных проблем с видео HTML5 — разные браузеры используют разные кодеки. Хотя HTML5 позволяет вам установить несколько источников для одного видеоэлемента HTML5, не у всех есть возможность кодировать свои видеофайлы столько раз, и давайте не будем забывать, что наш хостинг не бесконечен..

Я использую кодеки h.264, потому что Flash Player поддерживает их с версии 9 (если не ошибаюсь — 4-5 лет).

Кроме того, мы сказали, что будем использовать HTML5-видео в качестве резервной копии для iOS и Android, чьи браузеры основаны на Webkit и поддерживают этот кодек..

Читать также:  Отображение текста с параллаксом

Какие браузеры не поддерживают h.264 (и в скольких из них нет Flash Player)?

Firefox и Opera не поддерживают h.264, и когда вышел Chrome 8, Google заявил, что перестанет поддерживать этот кодек в своем браузере, чтобы рекламировать собственный WebM..

Доля рынка Opera слишком мала, чтобы я мог ее принять во внимание, и я не знаю людей, которые используют Firefox и не имеют Flash Player..

Остается Chrome, который в настоящее время (версия 14) по-прежнему поддерживает h.264, и, поскольку версия 7 имеет встроенный Flash Player, поэтому нас не интересуют какие-либо видеокодеки HTML5, потому что он вообще туда не попадет..

Однако в будущем мы можем перейти на WebM, поскольку Adobe объявила, что Flash Player 11 добавит поддержку этого формата, Chrome поддерживает его, Firefox и Opera — тоже..

Однако остаются Internet Explorer и Safari, использующие h.264. Это только вопрос времени, когда Google добавит поддержку WebM в Android, но сделает ли Apple то же самое для iOS?.

И в этом случае мы все равно теряем те, из-за которых даже удосужились вставить резервный HTML5 — iOS.

Давайте двигаться дальше.

Для более приятного вида добавляем немного CSS.

* {маржа: 0; отступ: 0; } body, html {width: 100%; высота: 100%; } тело {фон: # 000; } видео, объект {позиция: абсолютная; верх: 50%; осталось: 50%; маржа: -180px 0 0 -320px; }

Обратите внимание на видео, селектор объектов. Это связано с тем, что Flash Video Player заменяет тег видео тегом объекта. Сами стили в данном случае не очень важны, но если вы применяете их только по имени тега — не забудьте установить их для обоих упомянутых тегов. Если вы стилизуете по родительскому элементу или идентификатору, у вас не будет проблем.

Поэкспериментируйте и посмотрите, как вам удобнее всего — просто имейте в виду, что по этой причине кто-то может жениться, а затем примите необходимые меры.

Добавить Flash Fallack

Теперь самое интересное. Пока у нас есть поддержка видео HTML5 только для браузеров, которые работают с кодеками h.264 (iOS, Android, Chrome 3+, Safari 4+, Internet Explorer 9+). Чтобы все остальные могли посмотреть наше видео, нам нужно добавить немного JavaScript (с которым мы будем вставлять Flash, естественно).

Читать также:  Хук GIT postmerge для объединения и минимизации JavaScript

тип скрипта = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> / script>
script type = "text / javascript" src = "http://code.jquery.com/jquery-1.6.4.min.js"> / script>

И после добавления этих библиотек вставляем такой код:

jQuery (function ($) {$) (each (function () {if (typeof ($ (this) .attr (‘id’)) == ‘undefined’) {$ (this) .attr (‘id’, ‘video-‘ + new Date (). getTime ());}
var flashvars = {}; flashvars.src = $ (это) .attr (‘src’); flashvars.autoPlay = $ (это) .attr (‘автовоспроизведение’); flashvars.poster = $ (это) .attr (‘плакат’);
var params = {}; params.allowscriptaccess = "всегда"; params.allowfullscreen = "правда"; params.wmode = "прозрачный";
var attributes = {};
swfobject.embedSWF "http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", $ (this) .attr (‘id’), $ (this) .attr (‘width’), $ (this). attr (‘height’), «10.1», «http://cdn.tagul.com/expressInstall.swf», flashvars, params, attributes); }); });

Сам этот скрипт написан для многократного использования, и я даже думаю, что после небольшого дополнительного тестирования я просто запускаю его как готовую библиотеку для добавления на вашу страницу, и все пройдет само..

Вот что делают эти несколько строк JavaScript:

Сначала загружаем swfobject.

Чтобы доказать, насколько это просто, я использовал CDN. Таким образом, в то же время мы уверены, что библиотека загрузится максимально быстро, и мы не занимаемся размещением другого скрипта..

Также загружаем jQuery.

Его использует почти каждый сайт, поэтому нам, возможно, даже не придется это делать. В этом случае я снова добавляю его из CDN (так — с официальной страницы), поэтому мы тоже избавляем вас от головной боли..

Настоящая часть начинается после этого.

Начнем с функции, которая используется в DOMReady. Если кто не знает — это именно то, что достигается, когда у нас есть:

jQuery (функция ($) {});

Внутри мы сканируем все теги видео и выполняем новую внутреннюю функцию для каждого из них в отдельности. Мы делаем это во избежание сбоев при размещении нескольких видеороликов на одной странице..

В следующих строках мы проверяем, есть ли у текущего тега видео атрибут id, который нам понадобится для правильной работы swfobject. Если у тега нет такого атрибута, мы добавляем его, генерируя его по простой схеме «видео- {timestamp}», поскольку {timestamp} — это фактически количество миллисекунд с 01.01.1970..

Мы можем быть уверены, что идентификаторы будут разными, потому что браузер не может быть настолько быстрым, чтобы выполнять следующие операции менее чем за миллисекунду (не то чтобы их так много, просто миллисекунда — это так мало ).

Читать также:  HTML5 & lt; meter & gt; ярлык

В следующих строках мы подготавливаем три объекта с параметрами, которые передаются в качестве аргументов в swfobject — flashvars, params и атрибуты..

flashvars — это переменные, которые нам нужно передать в файл .SWF, который мы вставим. В нашем случае это src, autoPlay и poster..

Обратите внимание, что я использую видеоплеер Strobe Media Playback, и если вы решите использовать другой, вам может потребоваться немного изменить имена этих переменных..

params содержит параметры, которые необходимы в самом теге объекта, чтобы его можно было представить так, как нам нравится. Мы устанавливаем для allowscriptaccess значение always, так как Strobe Media Playback взаимодействует с JS. Для параметра allowfullscreen установлено значение true, чтобы мы могли смотреть видео в полноэкранном режиме, а wmode установлен как прозрачный, чтобы не все элементы html, расположенные за содержимым Flash, выглядели (если у нас есть всплывающее окно JS, мы хотим, чтобы оно было включено Вверх).

Наконец, идет метод swfobject.embedSWF.

Первый аргумент, который мы делаем, — это путь к файлу .SWF, который мы хотим вставить. Как здорово, что я использую CDN 😛 ?

Затем мы устанавливаем id элемента, в место которого мы хотим вставить Flash-контент (другими словами — id видеоэлемента).

Третий аргумент — ширина. Берем из самого тега видео.

То же самое делаем с высотой — четвертый аргумент.

В качестве пятого аргумента мы указываем требуемую нам версию Flash Player. Для воспроизведения стробоскопа требуется Flash Player 10.1..

Некоторые, кому нравится поддерживать действительно старые компьютеры, использовали бы другой проигрыватель и старую версию Flash, но 10.1 вышла около 3 лет назад, так что я думаю, что это хорошо зарекомендовавшая себя версия..

Следующий аргумент — это путь к expressinstall.swf (конечно, я укажу путь к CDN). Этот файл используется, когда версия Flash Player старше версии, указанной в предыдущем аргументе. Посетителям сайта предлагается обновить свой Flash Player..

Последние три аргумента — это объекты flashvars, params и attributes, которые содержат настройки, о которых мы уже говорили..

это!

Перейдите на http://magadanski.com/demo/video/ и посмотрите полный исходный код на странице. В этом нет ничего страшного, и два файла, которые не используют CDN, — это видеофайл и плакат, последний даже не требуется..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?