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

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

есть ли другой способ? Или я должен придерживаться HTML5 и огромного баннера, говорящего людям обновить свой браузер?

7
embed html5 video video-streaming

6 ответов

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

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

8

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>

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

6

Я только что наткнулся Кортадо. Это Java-апплет, который играет OGG. Я действительно должен поблагодарить Дэвид Dorward Не для этого, так как проверка статуса 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.

(источник)

2

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

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

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

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

1

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

0

я работал над этой проблемой, поскольку меня очень интересует 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 элемент и я добавить к дому.

    // 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 для кадра и поместить его в на 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.

0