HTML5 video 标签的部分操作

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
            var video = document.getElementById("video");
            alert("duration："+video.duration+",volume:"+video.volume);
            $("#btnPlay").click(function(){
                video.volume = 0.5;
                video.play();
                var time = setInterval(function(){
                    $("#btnTime").val("剩余时间是："+Math.ceil(video.duration-video.currentTime)+" 秒");
                },1);
                var intval = setInterval(function(){
                    if(video.ended){
                        clearInterval(intval);
                        clearInterval(time);
                        alert("视频播放完毕");  
                    }
                },1);
                
            });
            $("#btnPause").click(function(){
                video.pause();
            });
            $("#btnMute").click(function(){
                video.muted = true;
            });
            $("#btnCurrentTime").click(function(){
                alert("当前播放了："+video.currentTime+" 秒");
            });
            
        });
    </script>
    <style type="text/css">
        video{cursor:pointer;}
    </style>
</head>
<body>
    <video src="Moo-O.mp4" id="video" controls>
    </video>
    <input type="button" value="播放" id="btnPlay" />
    <input type="button" value="暂停" id="btnPause"/>
    <input type="button" value="静音" id="btnMute"/>
    <input type="button" value="播放时间" id="btnCurrentTime" />
    <input type="button" value="剩余时间" id="btnTime" />
</body>
</html>

posted on 2014-01-13 14:49  liangshanbo  阅读(526)  评论(0)    收藏  举报

导航