Я работал над этой проблемой и нашел способ воспроизвести видео в строгом документе xHtml 1.0 в браузерах HTML5.
Я опубликовал здесь плагин jQuery: https://github.com/charlycoste/xhtml-video
Идемонстрация здесь: http://demo.ccoste.fr/video
На самом деле, это гораздо менее эффективно, чем использование тега HTML5, но по крайней мере ... это работает!
Решение основано на javascript и canvas, но можетбыть изящно униженным, если вы используете тег <object>
.
То, что я делаю, на самом деле просто:
Я создаю новое видео элемент (нетег) в памяти, но я не добавляю его в документ 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.
Аспект производительности: поскольку это приводит к очень интенсивному процессу потребления, воспроизведение может мерцать ...Чтобы избежать этого, вы можете снизить качество рендеринга, используя сжатие jpeg следующим образом: canvas.toDataURL('image/jpeg', quality)
, где quality
- это значение от 0 до 1.