Question

只是因为使用了视频标签，整个页面必须是HTML5 ??

我不这么认为......你怎么看？

我理解视频标记（<video>）它不是严格的HTML5（部分原因是因为严格尚不存在），也不是使用或需要HTML5来实现视频标记 - 标记可以在HTML4 /中运行常规的旧HTML和phtml文件......我错了吗？

Answer 1

根据W3C规范，是的，<video>标记仅在HTML5中可用。但是，正如关于HTML的所有其他内容一样，我确信大多数浏览器都会允许您使用该标记而不管文档类型。

Answer 2

以下是嵌入在XHTML 1.0 Strict Doctype中的<video>标记的示例，

http://www.longtailvideo.com/support/jw-player/jw-player-for-html5/11895/single-mp4-video

Answer 3

许多浏览器都会播放它，IE9不会没有DOCTYPE。但是，您不必使用HTML5 DOCTYPE - HTML4也可以。

（事实上，我的测试显示除了HTML2 / 3之外它适用于任何DOCTYPE - 这包括svg doctype，数学等等......）

Answer 4

您真的不需要HTML5 DOCTYPE。代码仍然有效。

如果视频在没有它的情况下无效，您可以将其放入。它可能只取决于网络浏览器。

Answer 5

我解决了这个问题，我找到了一种在HTML5浏览器上的xHtml 1.0严格文档中播放视频的方法。

我在这里发布了一个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');
```

我在DOM中创建了一个新的img 元素和我添加。

// 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属性} element。
```
img.setAttribute('src', canvas.toDataURL());
```

通过这样做，您可以使javascript对象从DOM中播放视频，并在img DOM元素中推送每个帧。因此，您可以使用浏览器的HTML5功能播放视频，但不需要HTML5文档。

性能方面：因为它会导致非常高的消耗过程，播放可能会闪烁...为避免这种情况，您可以通过以下方式使用jpeg压缩来降低渲染质量：canvas.toDataURL('image/jpeg', quality)其中quality是介于0和1之间的值。

是视频标签功能所必需的html5 doctype？

5 个答案: