Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 Video DOM 入門體驗

HTML5 Video DOM 入門體驗

日期：2017/3/1 10:26:22 编辑：Linux編程

HTML5的一個新特性就是內置對多媒體的支持，<video> 元素很好用，也支持了不錯的API接口，下面用了一個案例來說明怎麼對<video> 元素的控制。

<!DOCTYPE >
<html>
<head>
<title></title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function() {
$(":button").click(
function() {
var h;
switch ($(":button").index($(this))) {
case 0:
if ($("video")[0].paused) {
$("video")[0].play();
$(this).val("暫停");
}
else {
$("video")[0].pause();
$(this).val("播放");
}
break;
case 1:
h = document.getElementsByTagName("video")[0].height == 0 ?
document.getElementsByTagName("video")[0].videoHeight - 10 :
document.getElementsByTagName("video")[0].height - 10; ;
document.getElementsByTagName("video")[0].height = h;
document.getElementsByTagName("video")[0].videoHeight = h;
break;
case 2:
h = document.getElementsByTagName("video")[0].height == 0 ?
document.getElementsByTagName("video")[0].videoHeight + 10 :
document.getElementsByTagName("video")[0].height + 10; ;
document.getElementsByTagName("video")[0].height = h;
document.getElementsByTagName("video")[0].videoHeight = h;
break;
}
}
);
}
);
$(
function() {
$("#video1").on(
"canplay",
function(e) {
$(":button").removeAttr("disabled");
console.log(e);
}
);
$("#video1").on(
"canplaythrough",
function(e) {
$("ol>li:eq(0)").html("全部加載完畢，你可以斷網看電影了！");
console.log(e);
}
);
$("#video1").bind(
"playing waiting ended play pause",
function(e) {
var vObj = document.getElementById("video1");
$("ol>li:eq(1)").html(vObj.duration + ":" + vObj.startTime + ":" + vObj.currentTime);
console.log(e);
}
);
$("#video1").on(
"stalled",
function(e) {
$("ol>li:eq(2)").html("你的網絡不給力啊，正在等數據呢");
console.log(e);
}
);
$("#video1").on(
"error",
function(e) {
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
$("ol>li:eq(3)").html("媒體資源獲取異常");
break;
case e.target.error.MEDIA_ERR_NETWORK:
$("ol>li:eq(3)").html("網絡錯誤");
break;
case e.target.error.MEDIA_ERR_DECODE:
$("ol>li:eq(3)").html("媒體解碼錯誤");
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
$("ol>li:eq(3)").html("視頻格式被不支持");
break;
default:
$("ol>li:eq(3)").html("這個是神馬錯誤啊");
break;
}
console.log(e);
}
);
$("#video1").on(
"suspend abort progress",
function(e) {
var vObj = document.getElementById("video1");
$("ol>li:eq(1)").html(vObj.duration + ":" + vObj.startTime + ":" + vObj.currentTime);
console.log(e);
}
);
$("#video1").on(
"progress error abort",
function(e) {
switch (e.target.readyState) {
case 0:
$("ol>li:eq(3)").html("當前播放位置無有效媒介資源");
break;
case 1:
$("ol>li:eq(3)").html("加載中，媒介資源確認存在，但當前位置沒有能夠加載到有效媒介數據進行播放");
break;
case 2:
$("ol>li:eq(3)").html("已獲取到當前播放數據，但沒有足夠的數據進行播放");
break;
case 3:
$("ol>li:eq(3)").html("已獲取到後續播放數據，可以進行播放");
break;
default:
case 4:
$("ol>li:eq(3)").html("可以進行播放，且浏覽器確認媒體數據以某一種速度進行加載，可以保證有足夠的後續數據進行播放，而不會使浏覽器的播放進度趕上加載數據的末端");
break;
}
console.log(e);
}
);
}
);
</script>
</head>
<body>
<video id="video1" autobuffer>
<source src="video-test.mp4" type="video/mp4" />
對不起你的浏覽器不支持HTML5的新特性，要不你下載一個
<a href="http://info.msn.com.cn/ie9/">IE9</a>？
</video>
<input type="button" value="播放" disabled />
<input type="button" value="縮小" disabled />
<input type="button" value="放大" disabled />
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>