仅仅因为使用了视频标签,整个页面就必须是HTML5吗?
我认为不是这样的...你怎么看?
我的理解是,视频标签(<video>
)并不是严格的HTML5(部分原因是严格的HTML5还不存在),也不需要使用或实现HTML5来使用视频标签——该标签可以在HTML4 /常规旧HTML和phtml文档中正常工作...我错了吗?
<video>
标签仅在HTML5中可用。然而,就像HTML的其他所有内容一样,我相信大多数浏览器都会让您在DOCTYPE无关的情况下使用该标签。这是一个嵌入在XHTML 1.0 Strict Doctype中的<video>
标签的示例。
http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11895/single-mp4-video
我解决了这个问题,并找到了一种在HTML5浏览器上的xHtml 1.0 strict文档中播放视频的方法。
我在这里发布了一个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);
最后,我使用canvas
元素的toDataURL()
方法获取帧的base64编码图像,并将其放置在img
元素的src
属性中。
img.setAttribute('src', canvas.toDataURL());
img
DOM元素中。因此,您可以使用浏览器的HTML5功能播放视频,但无需HTML5文档。canvas.toDataURL('image/jpeg', quality)
其中quality
是0到1之间的值。你其实不需要HTML5 DOCTYPE。代码仍然可以工作。
如果视频没有它无法工作,你可以加上它。这可能只取决于Web浏览器。