首页 > 代码库 > Web视频播放 之 【HTML5 Video标签】
Web视频播放 之 【HTML5 Video标签】
一、说明
HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级。但在浏览器兼容、视频协议支持方面还有一些需要注意的问题。
二、浏览器兼容
html5 Video标签目前IE9+ 及 其他主流浏览器都能够支持。
对于IE8及以下的IE浏览器,可考虑引入html5扩展支持js来尝试解决,未亲测。
三、视频协议支持
支 持:Ogg、MPEG4、WebM
不支持:rtmp、rtsp(如果进行转码,切成HLS可以播放,但是即使在局域网内也有3秒左右的时延)
注:更详细的视频格式支持希望有知情的朋友告知,多谢!
四、DEMO
更多的属性、方法和事件参考本文参考资料中的API列表;
<!-- 定义一个video标签: autoplay:自动播放; controls:显示视频控件; src:指定视频源; width,height:制定视频的显示尺寸; --><video id="my_video" autoplay controls src=http://www.mamicode.com/"https://media.w3.org/2010/05/sintel/trailer.mp4" width="500" height="500"></video><script type="text/javascript"> //获取视频对象 var myVideo=document.getElementById("my_video"); //播放视频 function play(){ myVideo.play(); } //暂停视频 function pause(){ myVideo.pause(); }</script>
五、参考资料
- HTML5 Video详细API:https://msdn.microsoft.com/zh-cn/library/hh772500(v=vs.85).aspx
- HTML5 Video详细功能DEMO:http://www.w3.org/2010/05/video/mediaevents.html
Web视频播放 之 【HTML5 Video标签】
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。