Html5的视频标签API-video
2017-01-09 10:43
387 查看
转载来自http://www.68kejian.com/app/detail.html?id=87&&c=506&&name=使用%20JavaScript%20控制%20HTML5%20视频播放器
一、概述
在HTML 4 及以前，如果您想在网页中嵌入在线观看的视频，一般都需要使用Flash视频流，通过使用 <object> 和 <embed> 标签，就可以通过浏览器播放swf、flv等格式视频文件，但是前提是浏览器必须安装第三方插件：Adobe Flash Player。而现代智能手机和iPad等一般都无法支持Flash，所以无法浏览网页上的视频。而 HTML 5 改变了这一事实，Web开发者只需要使用 <video> 标签就可以轻松加载视频文件，而不需要任何第三方插件。
二、<video>标签的属性
autoplay ， 如果出现该属性，则视频在就绪后马上播放。
controls ， 如果出现该属性，则向用户显示控件，比如播放按钮。
height ， 设置视频播放器的高度。
loop ，如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload ： auto/meta/none | 规定是否预加载视频，可能的值：
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
* src ：要播放的视频的 URL，建议使用绝对地址。
width： 设置视频播放器的宽度。
poster：封面图片
duration：获取视频的时间，单位秒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video id="media" src="什么叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">
这里是注释文字，如果无法支持 HTML 5 浏览器将显示这里的文字。如果支持，就直接显示视频，忽略文字。
</video>
</body>
</html>
通过上面的截图可以看到每个格式的视频，浏览器支持的各不一样，所以为了考虑 到兼容性我们需要使用不同格式的视频，这个时候就可以使用source标签来指定不同的 视频格式：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
我们 知道video不兼容低版本的浏览器，所以为了兼容低版本的浏览器，我们还需要 使用flash的 播放方式：
<video id="media" src="什么叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">
<!-- 兼容 Firefox -->
<source src="movie.ogg" type="video/ogg" />
<!-- 兼容 Safari/Chrome-->
<source src="什么叫跨域.mp4" type="video/mp4" />
<!-- 如果浏览器不支持video标签，则使用flash -->
<embed src=" movie.swf" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true">
</embed>
</video>
三 、获取video对象
Media = document.getElementById("media");
Media方法和属性：
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement.
- Media.error; //null:正常
- Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
1、网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域，TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
2、准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
3、回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
4、视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
5、相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
一、概述
在HTML 4 及以前，如果您想在网页中嵌入在线观看的视频，一般都需要使用Flash视频流，通过使用 <object> 和 <embed> 标签，就可以通过浏览器播放swf、flv等格式视频文件，但是前提是浏览器必须安装第三方插件：Adobe Flash Player。而现代智能手机和iPad等一般都无法支持Flash，所以无法浏览网页上的视频。而 HTML 5 改变了这一事实，Web开发者只需要使用 <video> 标签就可以轻松加载视频文件，而不需要任何第三方插件。
二、<video>标签的属性
autoplay ， 如果出现该属性，则视频在就绪后马上播放。
controls ， 如果出现该属性，则向用户显示控件，比如播放按钮。
height ， 设置视频播放器的高度。
loop ，如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload ： auto/meta/none | 规定是否预加载视频，可能的值：
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
* src ：要播放的视频的 URL，建议使用绝对地址。
width： 设置视频播放器的宽度。
poster：封面图片
duration：获取视频的时间，单位秒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video id="media" src="什么叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">
这里是注释文字，如果无法支持 HTML 5 浏览器将显示这里的文字。如果支持，就直接显示视频，忽略文字。
</video>
</body>
</html>
通过上面的截图可以看到每个格式的视频，浏览器支持的各不一样，所以为了考虑 到兼容性我们需要使用不同格式的视频，这个时候就可以使用source标签来指定不同的 视频格式：
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
我们 知道video不兼容低版本的浏览器，所以为了兼容低版本的浏览器，我们还需要 使用flash的 播放方式：
<video id="media" src="什么叫跨域.mp4" poster="bg1.jpg" controls width="800px" heigt="800px">
<!-- 兼容 Firefox -->
<source src="movie.ogg" type="video/ogg" />
<!-- 兼容 Safari/Chrome-->
<source src="什么叫跨域.mp4" type="video/mp4" />
<!-- 如果浏览器不支持video标签，则使用flash -->
<embed src=" movie.swf" type="application/x-shockwave-flash" width="320" height="240" allowscriptaccess="always" allowfullscreen="true">
</embed>
</video>
三 、获取video对象
Media = document.getElementById("media");
Media方法和属性：
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement.
- Media.error; //null:正常
- Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
1、网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域，TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:
2、准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking
3、回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
4、视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
5、相关事件
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false);
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 验证是否支持html5的Video标签及MP4视频播放
- html5 video标签屏蔽右键视频另存为的js代码
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
- HTML5 audio与video标签实现视频播放，音频播放
- 低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频
- 让所有浏览器支持HTML5 video视频标签
- 搭建服务器之www-向外提供视频服务by html5 video标签
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
- html5的video标签支持的视频格式
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
- HTML5-音频audio和视频video标签
- HTML5添加 video 视频标签后仍然无法播放的解决方法
- HTML5 video 视频标签使用介绍
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- 验证是否支持html5的Video标签及MP4视频播放
- html5 video标签屏蔽右键视频另存为的js
- HTML5添加video视频标签后仍然无法播放的解决方法
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
- 浅谈html5 video标签嵌入视频
- HTML5视频标签video