Video标签事件与属性
事件与属性
属性 描述
audioTracks 返回可用的音轨列表（MultipleTrackList对象）
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器（MediaController对象）
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间，单位秒
defaultMuted 缺省是否静音
defaultPlaybackRate 播控的缺省倍速
duration 返回媒体的播放总时长，单位秒
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)
muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
seeking 返回用户是否做了跳转操作
src 当前音视频源的URL
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)
volume 音量值
事件 描述
abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress 当获取到媒体数据时产生该事件
ratechange 当播放倍数改变时产生该事件
seeked 当用户完成跳转时产生该事件
seeking 当用户正执行跳转时操作的时候产生该事件
stalled 当试图获取媒体数据，但数据还不可用时产生该事件
suspend 当获取不到数据时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
volumechange 当前音量发生改变时产生该事件
waiting 当视频因缓冲下一帧而停止时产生该事件
转：https://blog.csdn.net/Take_Dream_as_Horse/article/details/53422397
video的暂停、播放事件，并切换清晰度
（1）暂停的时候显示广告图片（图片有跳转链接）
（2）切换清晰度后，视频按切换前播放时间继续自动播放（或者暂停播放）
注:最好在没个video标签外定义一个div盒子，这样便于定位广告图片的位置或者自定义的操作按钮的位置
同时说明一下 video常用属性：controls:是否显示控制按钮 autoplay：是否加载完成自动播放
html
<span style="color:#ff0000;"> </span><div class="video"> <video id="media" controls="controls" width="600" height="400"> <source src="video/video.mp4" type="video/mp4" /> 您的浏览器版本太低,请及时更新 </video> <a href="http://www.baidu.com" target="_blank" class="skip"></a> <!-- 切换清晰度 --> <a class="toggle-btn">切换至240p</a> </div>
js
$('.skip').hide(); var myVideo=document.getElementById("media"); myVideo.addEventListener('play',function(){ $('.skip').hide(); }); myVideo.addEventListener('pause',function(){ $('.skip').show(); }) ////切换清晰度 function toggleVideo(e){ //当前播放时间 var curTime=e.currentTime; $("#media").attr("src","video/exo.mp4").attr("autoplay","true"); e.currentTime=curTime } $('.toggle-btn').click(function(){ toggleVideo(myVideo); })
注：这里有几点需要注意：
（1）myvideo是原生DOM对象，所以绑定事件为addEventListener()方法
（2）play为播放事件、pause为暂停事件
（3）curTime为切换清晰度时视频已经播放的时间
demo地址：https://github.com/chuanzaizai/h5-video-demo
低版本浏览器不支持的需另外处理
<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="mediaplayer" width="700" height="350">
<embed>
<param name="SRC" value="Lavigne.mp4">
</embed>
</object>
<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>
自己写的一个限制视频播放次数
<head>
<meta charset="utf-8" />
<title>视频播放次数</title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Js/Common.js"></script>
<style type="text/css">
.video {
width: 100%;
height: 100%;
position:absolute;
margin:5px auto;
}
</style>
</head>
<body>
<div class="video">
<video id="videoyoudai" controls="controls" class="video">
<!--<source src="" type="video/mp4" />-->
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
<script type="text/javascript">
//var webapiUrl = "http://地址:8081/api/";
//function GetQueryString(name) {
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
// var r = window.location.search.substr(1).match(reg);
// if (r != null) return unescape(r[2]); return null;
//}
$(function () {
var contractCode = GetQueryString("contractCode");
if (contractCode == null || contractCode=="") {
alert("合同编号不能为空;");
}
var data = { contractCode: contractCode };
$.ajax({
type: "get",
url: webapiUrl + "/controller/action",
data: data,
success: function (data) {
if (data.ErrCode == 0) {
var contractInfo = data.Data;
if (null == contractInfo) {
alert("视频不存在;");
return;
}
var num = contractInfo.PlayNum + 1;
if (num > 3) {
alert("最多只能播放3次;");
return;
}
else {
alert("可以播放3次，第" + num + "次播放;");
$("#videoyoudai").prop("src", contractInfo.VideoUrl);
}
var yvideo = document.getElementById("videoyoudai");
yvideo.addEventListener("play", function () { PlayNum(num) });
console.log(contractInfo.VideoUrl);
}
else {
alert(data.ResultMsg);
}
},
error: function (json) {
var data = eval(json);
if (data != "") {
alert(data.ResultMsg);
}
else {
alert("服务器错误");
}
}
})
function PlayNum(num) {
var sessionStore = window.sessionStorage.getItem(contractCode);
if (sessionStore == null) {
window.sessionStorage.setItem(contractCode, contractCode);
var data = { type: "youdai", Name: "优贷", Code: contractCode, playNum: num };
$.ajax({
type: "post",
url: webapiUrl + "/LoanVideoPlay/AddOrUpdateLoanVideoPlay",
data: data,
success: function (data) {
if (data.ErrCode == 0) {
}
else {
alert(data.ResultMsg);
}
},
error: function (json) {
var data = eval(json);
if (data != "") {
alert(data.ResultMsg);
}
else {
alert("服务器错误");
}
}
})
}
}
});
</script>
