Вставить видео на веб-страницу (HTML)

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

Одним из примеров является Video for Everyone от Camen Design, который соответствует HTML5 и использует условные комментарии для IE и тег вложенного объекта для старых браузеров. Это должно быть совместимым со стандартами, обратно совместимым и перспективным.

HTML 5 не является стандартным. Это черновик. Вероятно, однажды это станет стандартом. Вероятно, он изменится в первую очередь.

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

Если вы скажете людям обновить свой браузер, это не сильно поможет. Насколько мне известно, единственным браузером с поддержкой видео в стабильной версии является Firefox. Chrome не поддерживает его, кроме как в версии для разработчиков. Я не думаю, что Opera выпустила стабильную сборку с поддержкой. Microsoft, конечно, еще не добавила его в Internet Explorer. Сафари, насчет которого я не уверен.

Если вы действительно хотите избежать Flash, вы можете использовать объект HTML 4.01.

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

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

Я только что наткнулся на Кортадо. Это Java-апплет, который воспроизводит OGG. На самом деле я должен поблагодарить Дэвида Дорварда за это, так как проверка статуса HTML5 натолкнула меня на это. Firefox предлагает использовать что-то вроде:

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>  

Java доступна НАМНОГО БОЛЬШЕ платформ, чем flash, и в данном случае это просто откат к HTML5.

(источник)

Я знаю, что это немного поздно, но вы смотрели на VLC?

Его можно встроить в веб-сайт, он работает на Windows, Mac OS и Linux, является бесплатным, с открытым исходным кодом, поддерживает множество форматов видео/аудио...

Недостатком является то, что у него нет приятного графического интерфейса с функциями воспроизведения/паузы/установки громкости/..., вам придется создавать их самостоятельно.

Вы можете ознакомиться с этой статьей: http://www.videolan.org/doc/play-howto/en/ch04.html#id310965

Как вы думаете, почему многие крупные веб-сайты используют Flash для воспроизведения видео? Вероятно, не из-за его недоступности... Конечно, есть альтернативы встраиванию видеоконтента в веб-страницу, но если доступность является проблемой, лучше всего использовать Flash на данный момент.

Я работал над этой проблемой, так как меня очень интересует xHtml+RDFa, и я нашел способ воспроизводить видео в строгом документе xHtml 1.0 в браузерах HTML5, не блокируя браузеры не HTML5.

Я опубликовал плагин jQuery здесь: https://github.com/charlycoste/xhtml-video

И демо здесь: http://demo.ccoste.fr/video

На самом деле, это гораздо менее эффективно, чем использование тега HTML5, но, по крайней мере... оно работает!

Решение основано на javascript и холсте, но может быть изящно деградировано с помощью тегов <object> (это то, что делает мой плагин jQuery).

То, что я делаю, на самом деле просто:

1. Я создаю в памяти новый элемент видео (не тег), но не добавляю его в документ DOM:

   var video = document.createElement('video');
   

2. Я создаю новый canvas элемент в памяти, но не добавляю его в документ DOM:

   var canvas = document.createElement('canvas');
   

3. Я создаю новый img элемент и добавляю его в DOM.

   // var parent = ... ;
   // var width = ...;
   // var height = ...;
   var img = document.createElement('img');
   
   img.setAttribute('width', width);
   img.setAttribute('height', height);
   
   parent.appendChild(img);
   

4. Когда воспроизводится видео (video.play()), я заставляю его рисовать каждый кадр на холсте (который не виден, потому что не добавлен в DOM, что делает DOM действительным документом xhtml 1.0)

   canvas.getContext("2d").drawImage(video, 0, 0, width, height);
   

5. Наконец, я использую метод toDataURL() элемента canvas, чтобы получить изображение в кодировке base64 для кадра и поместить его в атрибут src элемента img.

   img.setAttribute('src', canvas.toDataURL());
   

Делая это, вы заставляете объекты javascript воспроизводить видео из DOM и помещать каждый кадр в элемент img DOM. Таким образом, вы можете воспроизводить видео, используя возможности HTML5 браузера, но без документа HTML5.

И если в браузере нет возможностей HTML5 или если он не может обрабатывать используемый кодек, он вернется к собственному поведению <object> (в общем... браузер будет искать плагин, такой как VLC, или что-то подобное... )

И если нет возможности воспроизвести видео (нет плагина для него), будет использоваться альтернативный контент, указанный внутри тега <object>.

Аспект производительности: поскольку это приводит к очень интенсивному процессу, воспроизведение может мерцать... Чтобы избежать этого, вы можете уменьшить качество рендеринга, используя сжатие jpeg следующим образом: canvas.toDataURL('image/jpeg', quality), где quality — значение от 0 до 1.