HTML5 Video DOM 入门体验

2025-02-11 技术教程

HTML5的一个新特性就是内置对多媒体的支持，<video> 元素很好用，也支持了不错的API接口，下面用了一个案例来说明怎么对<video> 元素的控制。

<!DOCTYPE><html><head><title></title><scriptsrc="js/jquery-1.7.1.min.js"type="text/javascript"></script><scripttype="text/javascript">$( function(){ $(":button").click( function(){ varh; switch($(":button").index($(this))){ case0: if($("video")[0].paused){ $("video")[0].play(); $(this).val("暂停"); } else{ $("video")[0].pause(); $(this).val("播放"); } break; case1: 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; case2: 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( "playingwaitingendedplaypause", function(e){ varvObj=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){ casee.target.error.MEDIA_ERR_ABORTED: $("ol>li:eq(3)").html("媒体资源获取异常"); break; casee.target.error.MEDIA_ERR_NETWORK: $("ol>li:eq(3)").html("网络错误"); break; casee.target.error.MEDIA_ERR_DECODE: $("ol>li:eq(3)").html("媒体解码错误"); break; casee.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( "suspendabortprogress", function(e){ varvObj=document.getElementById("video1"); $("ol>li:eq(1)").html(vObj.duration+":"+vObj.startTime+":"+vObj.currentTime); console.log(e); } ); $("#video1").on( "progresserrorabort", function(e){ switch(e.target.readyState){ case0: $("ol>li:eq(3)").html("当前播放位置无有效媒介资源"); break; case1: $("ol>li:eq(3)").html("加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放"); break; case2: $("ol>li:eq(3)").html("已获取到当前播放数据，但没有足够的数据进行播放"); break; case3: $("ol>li:eq(3)").html("已获取到后续播放数据，可以进行播放"); break; default: case4: $("ol>li:eq(3)").html("可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端"); break; } console.log(e); } ); } ); </script></head><body><videoid="video1"autobuffer><sourcesrc="video-test.mp4"type="video/mp4"/>对不起你的浏览器不支持HTML5的新特性，要不你下载一个 <ahref="http://info.msn.com.cn/ie9/">IE9</a>？ </video><inputtype="button"value="播放"disabled/><inputtype="button"value="缩小"disabled/><inputtype="button"value="放大"disabled/><ol><li></li><li></li><li></li><li></li><li></li></ol></body></html>

对 Video的控制重要的方法就是play、paused、stop。重要的事件有：

canplay 通知用户可以播放了，但不一定资源全部下载好

canplaythrough 资源都下载完毕了

error 出错时候

事件参数中有一个target对象，他有一个readyState值，可以得到不同的状态信息。具体的值，可以通过开发者工具获得，或看相关文档。