Web视频播放 之 【HTML5 Video标签】

简介: 一、说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级。但在浏览器兼容、视频协议支持方面还有一些需要注意的问题。 二、浏览器兼容 html5 Video标签目前IE9+ 及 其他主流浏览器都能够支持。

一、说明

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="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>

五、参考资料

  1. HTML5 Video详细API:https://msdn.microsoft.com/zh-cn/library/hh772500(v=vs.85).aspx
  2. HTML5 Video详细功能DEMO:http://www.w3.org/2010/05/video/mediaevents.html
目录
相关文章
|
1月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
27 0
|
1月前
|
Web App开发 前端开发 安全
CSS背景图和HTML的<img>标签怎么选?
CSS背景图和HTML的<img>标签怎么选?
|
16天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
14 0
|
17天前
|
前端开发 JavaScript 安全
react如何渲染包含html标签元素的字符串
react如何渲染包含html标签元素的字符串
15 0
|
17天前
|
移动开发 开发框架 Java
html一个案例学会所有常用HTML(H5)标签
html一个案例学会所有常用HTML(H5)标签
23 0
|
21天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
23天前
|
移动开发 JavaScript 前端开发
如何处理html5新标签的浏览器兼容问题?
如何处理html5新标签的浏览器兼容问题?
8 0
|
25天前
|
XML JavaScript 数据格式
python - bs4提取XML/HTML中某个标签下的属性
python - bs4提取XML/HTML中某个标签下的属性
20 0
|
25天前
|
移动开发 搜索推荐 前端开发
html标签大全
第一章 自结束标签 像<p> </p> <title> </title> <h1> </h1> 这类标签是需要有结束标签的 而 自结束标签(自己结束自己)是不需要结束标签的 如:<img> <input> 还可以写成 <img /> <input />
|
28天前
|
XML 编解码 安全
HTML标签及说明大全(685个)
HTML标签及说明大全(685个)
11 0

相关产品

  • 云迁移中心