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