Вставить видео на веб-страницу (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> 

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

Answer 3

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

Answer 4

Я только что наткнулся на Cortado. Это апплет Java, который играет OGG. Я действительно должен поблагодарить David 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 доступна для гораздо больше платформ, чем вспышки, и в этом случае, если только запасной вариант на HTML5.

(source)

Answer 5

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

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

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

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

Answer 6

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

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

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

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

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

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

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

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