HTML5VideoDOM入门体验-创新互联

HTML5的一个新特性就是内置对多媒体的支持，

    
    
    
        $( 
        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); 
            } 
            ); 
        } 
        ); 
    
    
    
    对不起你的浏览器不支持HTML5的新特性，要不你下载一个 
    IE9？
  
    
    
    
    
        
        
        
        
        
    

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

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

canplaythrough 资源都下载完毕了

error 出错时候

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。