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

Question

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

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

Answer 1

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

Одним из примеров является Видео для всех от 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

Я только что натолкнулся на Cortado . Это 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 & amp; Linux бесплатен, с открытым исходным кодом, поддерживает множество видео / аудио форматов ...

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

Вы можете посмотреть эту статью: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

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).

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

<Ол>

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

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

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

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

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

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

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

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

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

Наконец, я использую метод toDataURL() элемента src, чтобы получить закодированное в base64 изображение для фрейма и поместить его в атрибут canvas.toDataURL('image/jpeg', quality) элемента quality.

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

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

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

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

Аспект производительности: поскольку это приводит к очень высокопотребляющему процессу, воспроизведение может мерцать ... Чтобы избежать этого, вы можете снизить качество рендеринга, используя сжатие jpeg следующим образом: <=> где <=> - это значение между 0 и 1.