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

Question

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

Есть ли другой путь? Или я должен придерживаться HTML5 и ОГРОМНОГО баннера, говорящего людям обновить их браузер?

Answer 1

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

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

Answer 2

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>

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

Answer 3

Я только что наткнулся на Кортадо. Это 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 доступна для платформ FAR MORE больше, чем flash, и, в данном случае, если это просто запасной вариант HTML5.

( источник)

Answer 4

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

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

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

Вы можете взглянуть на эту статью: http://www.videolan.org/doc/play-howto/en/ch04.html

Answer 5

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

Answer 6

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

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

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

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

Решение опирается на JavaScript и Canvas, но может быть изящно ухудшено с помощью <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.