当前位置：文江博客话题详情

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

发布于 2024-09-07 12:52:04 字数 214 浏览 6 评论 0原文

仅仅因为使用了 video 标签，整个页面就必须是 HTML5 吗？

我不这么认为...你觉得怎么样？

我知道视频标签（）不是严格的 HTML5（部分原因是严格的还不存在），也没有使用或需要 HTML5 来实现视频标签 - 该标签可以发挥作用在 HTML4 /常规旧 HTML 和 phtml 文档中......我错了吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温暖的光 2024-09-14 12:52:04

根据 W3C 规范，是的，标签仅在 HTML5 中可用。然而，就像 HTML 的其他内容一样，我确信大多数浏览器都会允许您使用该标签，而不管文档类型如何。

回复收藏 0 原文

゛时过境迁 2024-09-14 12:52:04

下面是嵌入在 XHTML 1.0 Strict Doctype 中的标记的示例，

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

回复收藏 0 原文

陈甜 2024-09-14 12:52:04

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

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

回复收藏 0 原文

最美的太阳 2024-09-14 12:52:04

您实际上并不需要 HTML5 DOCTYPE。
该代码仍然有效。

如果视频没有它就无法播放，您可以将其放入。
它可能只取决于网络浏览器。

回复收藏 0 原文

财迷小姐 2024-09-14 12:52:04

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

我在这里发布了一个 jQuery 插件： https://github.com/charlycoste/xhtml-video

并且这里有一个演示： http://demo.ccoste.fr/video

实际上，这比使用 HTML5 标签，但至少......它有效！

该解决方案依赖于 javascript 和 canvas，但如果您使用

我所做的实际上很简单：

我在内存中创建一个新的视频元素（不是标签），但我不将它添加到 DOM 文档中：< /p>
```
var video = document.createElement('video');
```
我在内存中创建了一个新的 canvas 元素，但我没有将其添加到 DOM 文档中：
```
var canvas = document.createElement('canvas');
```

< p>我创建了一个新的 img 元素，并将其添加到 DOM。

// varparent = ... ;
// 变量宽度 = ...;
// 变量高度 = ...;
var img = document.createElement('img');

img.setAttribute('宽度', 宽度);
img.setAttribute('高度', 高度);

父级.appendChild(img);

当视频播放时（video.play()），我让它在画布中绘制每一帧（这是不可见的，因为没有添加到 DOM - 这使得 DOM 保持有效） xhtml 1.0 文档）
```
canvas.getContext("2d").drawImage(video, 0, 0, 宽度, 高度);
```
最后，我使用 canvas 元素的 toDataURL() 方法来获取框架的 base64 编码图像并将其放入到 img 元素的 src 属性。
```
img.setAttribute('src', canvas.toDataURL());
```

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

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

I worked on this problem and I found a way to play a video in an xHtml 1.0 strict document on HTML5 browsers.

I published a jQuery plugin here: https://github.com/charlycoste/xhtml-video

And a demo here: http://demo.ccoste.fr/video

Actually, this is quite less powerfull than using a HTML5 tag, but at least... it works!

The solution relies on javascript and canvas but can be gracefully degraded if you use <object> tag.

What I do is actually simple:

I create a new video element (not a tag) in memory but I don't add it to the DOM document:
```
var video = document.createElement('video');
```
I create a new canvas element in memory but I don't add it to the DOM document:
```
var canvas = document.createElement('canvas');
```

I create a new img element and I add it to the DOM.

// var parent = ... ;
// var width = ...;
// var height = ...;
var img = document.createElement('img');

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

When video is playing (video.play()), I make it draw each frame in the canvas (which is not visible, because not added to the DOM - which makes the DOM stay valid xhtml 1.0 document)
```
canvas.getContext("2d").drawImage(video, 0, 0, width, height);
```
Finally I use the toDataURL() method of the canvas element to get a base64 encoded image for the frame and put it to the src attribute of the img element.
```
img.setAttribute('src', canvas.toDataURL());
```

By doing this, you make javascript objects play a video out of the DOM and push each frame in an img DOM element. So you can play the video by using HTML5 capabilities of the browser, but with no need of a HTML5 document.

Performance aspect: as it results in a very high consuming process, the playback may flicker... To avoid this, you can decrease rendering quality by using jpeg compression this way : canvas.toDataURL('image/jpeg', quality) where quality is a value between 0 and 1.

回复收藏 0 原文

~没有更多了~