知识点
相关文章
更多最近更新
更多HTML5 Video元素【HTML5教程 - 第三篇】
2019-03-17 17:57|来源: 未知
现代互联网中，我们大量的使用视频，在HTML5定义中提供了一个统一的方式来展示视频内容。
浏览器支持
首先我们看看你的浏览器是否支持HTML5 video。请使用下面这个在线检测链接。
Internet Explorer 9, Firefox, Opera, Chrome, 和Safari都支持。 IE8及其更早的浏览器不支持。
互联网视频
现在互联网视频大都使用Flash来实现。但是不同的浏览器可能使用不同的插件。
HTML5定义了一个统一元素来指定视频和音频的插入和显示，如下：
<video width="320" height="240" controls="controls" id="gbin1"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
以上的控制属性可以添加视频相关的控制，例如，播放，暂停和音量。
当然，如果必要我们也需要添加高度和宽度。如果高和宽设定后，页面加载后针对这个视频的区域的大小会预留出来。如果没有相关高和宽的属性，浏览器则不能正确预留显示视频区域。效果就是页面加载过程中，页面布局可能变化。
你应该在<video>和</video>元素内容间加入文字内容，这样可以保证如果浏览器不支持video标签。页面能够显示正确的文字。
video标签允许加入多个<source>元素。这些元素可以链接到不同的视频文件。当然，浏览器会使用第一个识别出的格式。
视频和音频格式和浏览器支持
目前，<video>标签支持3类文件格式 ：MP4， webM和Ogg，如下：
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Apple Safari 5 | 支持 | 不支持 | 不支持 |
| Firefox 4.0 | 不支持 | 支持 | 支持 |
| Google Chrome 6 | 支持 | 支持 | 支持 |
| Internet Explorer 9 | 支持 | 不支持 | 不支持 |
| Opera 10.6 | 不支持 | 支持 | 支持 |
HTML5视频标签
| Tag | Description |
|---|---|
| <source> | 为video或者movie定义多个媒体源 |
| <track> | 定义播放器中的媒体元素的文字曲目信息 |
| <video> | 定义一个视频或者电影 |
本文链接：HTML5教程 - 第三篇：HTML5 Video元素，转自：http://www.gbin1.com/tutorials/html5-tutorial/html5-video/
相关问答
更多-
HTML5游戏很火么？到底说明是HTML5游戏啊？[2023-10-26]
只用HTML5和JS,CSS写的游戏（2048，围住神经猫，flappy bird），之前火过一段时间，现在还好，有发展前景，但是只适合轻中度游戏，不能做大型重度游戏 -
Android上的HTML5 [2022-05-21]
我刚刚做了一些实验，从我可以告诉你需要三件事情： 调用视频时不能使用type属性。 您必须手动调用video.play（） 视频必须编码为一些相当严格的参数; 通过“Web Optimized”按钮检查Handbrake上的iPhone设置是否正常。 看看这个页面上的演示： http : //broken-links.com/tests/video/ 在所有支持视频功能的桌面浏览器中，iPhone和Android都可以使用AFAIK。 这是标记：HTML5视频不会循环(HTML5 video will not loop)[2022-07-31]
啊，我刚刚陷入了这个确切的问题。 事实证明，如果视频文件由理解部分内容请求的服务器提供，则Chrome上的HTML5视频格式最佳做法(HTML5 Video Format Best Practices)[2024-01-04]
MP4，（详细h.264压缩和MP4容器）拥有一家私人公司MPEG LA持有的许可/权利。 这就是为什么有些浏览器想要避免依赖它。 虽然浏览器不太可能放弃现有支持，但许可证问题阻止开发人员认为浏览器对MP4 / h.264的支持将永远持续下去。 谷歌已经宣布将在2011年取消 Chromium项目的h.264支持 ，但Chrome仍然支持它。 Google的VP8和VP9（以及WEBM容器）拥有免费且开放的许可。 但由于竞争，并非所有其他浏览器都愿意支持VP8-9 / WEBM。 这可能会及时改变/改善。 ...尝试这样的事情： var videos = document.querySelectorAll('video'); function playAll() { [].forEach.call(videos, function(video) { video.play() }); } function pauseAll() { [].forEach.call(videos, function(video) { video.pause() }); } // this kee ...我使用了https://developer.mozilla.org/en-US/docs/DOM/Media_events中的示例 我改编它做我想要的： var v = document.getElementsByTagName("video")[0]; v.addEventListener("ended", function() { alert('Video has been viewed!'); }, true); I used the example from https://devel ...不， 它没有 。 至少，还没有。 但考虑到我们让浏览器制造商甚至对标准格式达成一致的麻烦，我只能想象得到它们全部支持标准DRM（甚至完全支持它）是多么困难！ No, it doesn't. At least, not yet. But given the trouble we're having getting browser manufacturers to even agree on a standard format I can only imagine how hard it would be to ...Android HTML5视频问题(Android HTML5 video issue)[2022-03-31]
这是海报的问题。 我认为如果海报没有在代码中设置。 webview会为视频标签设置一个默认值。 所以我将poster的值设置为'null'。 没关系。 It is the poster's issue. I think if the poster is not set in code. The webview would set a default one for the video tag. So I set the value of poster as 'null'. It is ok.HTML5，那是什么呢？(HTML5, what's that all about then?)[2022-05-22]
那里有很多问题但是： HTML5在现今的大多数现代浏览器中都得到了很好的支持，并且通常可以安全地使用它。 脚本以提高兼容性？ 你的意思是Javascript可以检测浏览器的年龄，并根据答案显示HTML 4.01或5？ 好吧也许又一次，它已经到了不再需要它的时候了。 是的： w3schools很酷。 所有这些都说明了HTML 5仍在开发中，而不是完成交易。 一些领域仍在实施中，但速度很快，这不是开始用HTML 5开发页面的问题。 这个网站 - html5医生是一个非常有用的资源，你可以浏览，寻找实现的地方和方 ...使用querySelectorAll获取DOM中的所有video元素（ querySelector仅返回第一个 ），然后在集合上迭代（ 使用循环 ）并将源分配给所有相关元素。 // Reference to video element. var videos = document.querySelectorAll('video'); var errorCallback = function(e) { // User rejected camera request. Handle appropr ...