HTML5 Video DOM 入门体验

发布时间：2020-06-06 18:37:40 作者：shyleoking
来源：网络阅读：446
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>
对 Video的控制重要的方法就是play、paused、stop。重要的事件有：
canplay 通知用户可以播放了，但不一定资源全部下载好
canplaythrough 资源都下载完毕了
error 出错时候
事件参数中有一个target对象，他有一个readyState值，可以得到不同的状态信息。具体的值，可以通过开发者工具获得，或看相关文档。
HTML5 Video DOM 入门体验

相关阅读
