Статьи

Совет: видео HTML5 с возвратом к Flash

Декабрь 30, 2018

В этом видео-кратком совете мы рассмотрим, как работать с видео HTML 5 в ваших собственных проектах. Поскольку старые браузеры и Internet Explorer не понимают элемент <video>, мы также должны найти способ предоставления файла Flash пользователям, которые используют эти браузеры.

Параметры просмотра

К сожалению, так же, как HTML 5 аудио , Firefox и Safari / Chrome не совсем согласны, когда дело доходит до формата файла для видео. Таким образом, если вы хотите воспользоваться видео HTML 5 в данный момент, вам нужно создать три версии вашего видео.

  • .OGG : Это сделает Firefox счастливым. Вы можете использовать VLC (File -> Streaming / Export Wizard), чтобы легко конвертировать видео в этот формат.
  • .MP4 : Многие инструменты скринкастинга автоматически экспортируют в Mp4; так что вы можете использовать этот файл для Safari и Chrome.
  • .FLV / .SWF : Конечно, не все браузеры поддерживают видео HTML 5. Чтобы компенсировать это, обязательно добавьте резервную версию Flash.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
 
<html lang=»en»>
<head>
    <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
    <title>untitled</title>
</head>
<body>
<video controls width=»500″>
    <!— if Firefox —>
    <source src=»video.ogg» type=»video/ogg» />
    <!— if Safari/Chrome—>
    <source src=»video.mp4″ type=»video/mp4″ />
    <!— If the browser doesn’t understand the <video> element, then reference a Flash file.
    <embed src=»http://blip.tv/play/gcMVgcmBAgA%2Em4v» type=»application/x-shockwave-flash» width=»1024″ height=»798″ allowscriptaccess=»always» allowfullscreen=»true»></embed>
</video>
</body>
</html>

Для элемента <video> доступно несколько атрибутов.

  • Управление: Показать кнопки воспроизведения / остановки?
  • Плакат: значение может быть путем к изображению, которое будет отображать видео до его воспроизведения.
  • Автозапуск: Немедленно воспроизвести видео при загрузке страницы?
  • Ширина: желаемая ширина видео. По умолчанию браузер автоматически определяет размеры поставляемого видео.
  • Высота: желаемая высота видео.
  • Src: путь к видеофайлу. Вместо этого лучше использовать дочерний элемент <source> для этой задачи.

Что нужно и чего не нужно в HTML 5 видео

  1. Создайте три версии своего видео, чтобы сделать Firefox, Safari / Chrome и IE счастливыми. (.ogg, .mp4, .flv / .swf)
  2. НЕ опускайте один из этих форматов. К сожалению, вы не можете легко выбрать показ видео HTML 5 для Firefox, а Flash откатится на Safari. Safari понимает элемент <video> и ожидает найти подходящий формат видео для загрузки. Если один не найден, на нем будет отображаться пустой игрок.
  3. Помните, что полноэкранная поддержка не будет работать в Safari и Chrome. Однако с выпуском Firefox 3.6 вы можете щелкнуть правой кнопкой мыши и просмотреть в полноэкранном режиме.
  4. Помните, что причина, по которой IE загружает файл Flash, заключается в том, что он не понимает, что такое элемент <video>. Однако, если браузер ДОЛЖЕН понимать этот элемент, он ожидает найти подходящий файл для загрузки.

Обратите внимание: если я найду подходящее решение для полноэкранного режима, мы будем использовать этот метод в Nettuts + в ближайшем будущем!

35
Share: