html jquery简易视频播放器

html jquery js 简易视频播放器 直接上代码:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style>  
    #durationbar{  
        width: 500px;  
        height: 20px;  
    }  
    #durationbar progress{  
        width: 100%;  
        height: 100%;  
    }  
    </style>  
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
</head>  
<body>  
    <div>  
        <video id="videoSource" width="500px">  
            <source src="201805251527217134.mp4" type="video/mp4">  
        </video>  
        <div id="durationbar">  
            <progress id="positionBar" value="0" max="100"></progress>  
        </div>  
总时长:<span id='zsc'>00:00:00</span>  当前时长:<span id='dqsc'>00:00:00</span>

    </div>  
    <button id="start">开始</button>  
    <button id="end">停止</button>  
    <!--<button id="pause">暂停</button>-->  
    <button id="speed">2倍速度</button>  
    <script type="text/javascript">  

function test(time_distance){
// 天时分秒换算 
/*var int_day = Math.floor(time_distance/86400000) 
time_distance -= int_day * 86400000; */

var int_hour = Math.floor(time_distance/3600) 
time_distance = time_distance - int_hour * 3600; 

var int_minute = Math.floor(time_distance/60) 
time_distance = time_distance - int_minute * 60; 

var int_second = Math.floor(time_distance) 
// 时分秒为单数时、前面加零 
/*if(int_day < 10){ 
int_day = "0" + int_day; 
} */
if(int_hour < 10){ 
int_hour = "0" + int_hour; 
} 
if(int_minute < 10){ 
int_minute = "0" + int_minute; 
} 
if(int_second < 10){ 
int_second = "0" + int_second; 
} 
return int_hour+':'+int_minute+':'+int_second;
}


        window.onload=function(){  
            var oStart = document.getElementById('start');  
            var oEnd = document.getElementById('end');  
            var oPause = document.getElementById('pause');  
            var oSpeed = document.getElementById('speed');  
            var oVideo = document.getElementById('videoSource');  
            // 开始函数  
            oStart.onclick=function(e){  
                console.log(oVideo.paused);  
                        if(oVideo.paused==true){
                            $('#start').text('暂停');
                            oVideo.play();

                        }else{
                            $('#start').text('播放');
                            oVideo.pause();
                        }
            }  
            // 暂停函数  
            /*oPause.onclick=function(){  
                oVideo.pause();  
            } */ 
            // 停止函数  
            oEnd.onclick=function(){  
                oVideo.pause();  
                oVideo.currentTime=0;  
            }  
            // 加速函数  
            oSpeed.onclick=function(){  
                oVideo.play();oVideo.playbackRate = 1.5;//注意这里速度大于4的时候,就没有声音了,声音得不到同步  
            }  

                        var aa = test(oVideo.duration);
                        $("#zsc").text(aa);

                        //oVideo.currentTime=30;
                        var i = 0;
            // 这个事件是在视频播放中一直执行的事件  
            oVideo.ontimeupdate=function(){  
                var oPositionBar = document.getElementById('positionBar');  
                oPositionBar.value= (oVideo.currentTime/oVideo.duration*100); 

                            console.log('播放时长:'+oVideo.duration);
                            console.log('播放进度:'+oVideo.currentTime);
                            var bb = test(parseInt(oVideo.currentTime));
                            $("#dqsc").text(bb);
                            /*if(parseInt(oVideo.currentTime)==3 && i==0){
                            oVideo.pause(); 
                            i++;
                            alert("观看超市");
                            location.href='http://www.baidu.com';


                            }*/

            }  
        }


    </script>  
</body>  
</html>

html jquery js 简易视频播放器   快试试吧!

喜欢(0)

评论 抢沙发

表情