html5 如何自制video标签的播放进度条-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

html5 如何自制video标签的播放进度条

小旋风柴进 2016-03-26 09:35:42 3463

如题,希望还有点击事件,能调到点击的播放的时间

标签z-inde html5video标签 video标签 html5标签 html5进度条
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:15:20
    // 为了不随意的创建全局变量,我们将我们的代码放在一个自己调用自己的匿名函数中,这是一个好的编程习惯
            (function(window, document){
                // 获取要操作的元素
                var video = document.getElementById("video");
                var videoControls = document.getElementById("videoControls");
                var videoContainer = document.getElementById("videoContainer");
                var controls = document.getElementById("video_controls");
                var playBtn = document.getElementById("playBtn");
                var fullScreenBtn = document.getElementById("fullScreenBtn");
                var progressWrap = document.getElementById("progressWrap");
                var playProgress = document.getElementById("playProgress");
                var fullScreenFlag = false;
                var progressFlag;
    
                // 创建我们的操作对象,我们的所有操作都在这个对象上。
                var videoPlayer = {
                    init: function(){
                        var that = this;
                        video.removeAttribute("controls");
                        bindEvent(video, "loadeddata", videoPlayer.initControls);
                        videoPlayer.operateControls();
                    },
                    initControls: function(){
                        videoPlayer.showHideControls();
                    },
                    showHideControls: function(){
                        bindEvent(video, "mouseover", showControls);
                        bindEvent(videoControls, "mouseover", showControls);
                        bindEvent(video, "mouseout", hideControls);
                        bindEvent(videoControls, "mouseout", hideControls);
                    },
                    operateControls: function(){
                        bindEvent(playBtn, "click", play);
                        bindEvent(video, "click", play);
                        bindEvent(fullScreenBtn, "click", fullScreen);
                        bindEvent(progressWrap, "mousedown", videoSeek);
                    }
                }
    
                videoPlayer.init();
    
                // 原生的JavaScript事件绑定函数
                function bindEvent(ele, eventName, func){
                    if(window.addEventListener){
                        ele.addEventListener(eventName, func);
                    }
                    else{
                        ele.attachEvent('on' + eventName, func);
                    }
                }
                // 显示video的控制面板
                function showControls(){
                    videoControls.style.opacity = 1;
                }
                // 隐藏video的控制面板
                function hideControls(){
                    // 为了让控制面板一直出现,我把videoControls.style.opacity的值改为1
                    videoControls.style.opacity = 1;
                }
                // 控制video的播放
                function play(){
                    if ( video.paused || video.ended ){              
                        if ( video.ended ){ 
                            video.currentTime = 0;
                            } 
                        video.play();
                        playBtn.innerHTML = "暂停"; 
                        progressFlag = setInterval(getProgress, 60);
                    } 
                    else{ 
                        video.pause(); 
                        playBtn.innerHTML = "播放";
                        clearInterval(progressFlag);
                    } 
                }
                // 控制video是否全屏,额这一部分没有实现好,以后有空我会接着研究一下
                function fullScreen(){
                    if(fullScreenFlag){
                        videoContainer.webkitCancelFullScreen();
                    }
                    else{
                        videoContainer.webkitRequestFullscreen();
                    }
                }
                // video的播放条
                function getProgress(){
                    var percent = video.currentTime / video.duration;
                    playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                    showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
                }
                // 鼠标在播放条上点击时进行捕获并进行处理
                function videoSeek(e){
                    if(video.paused || video.ended){
                        play();
                        enhanceVideoSeek(e);
                    }
                    else{
                        enhanceVideoSeek(e);
                    }
    
                }
                function enhanceVideoSeek(e){
                    clearInterval(progressFlag);
                    var length = e.pageX - progressWrap.offsetLeft;
                    var percent = length / progressWrap.offsetWidth;
                    playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                    video.currentTime = percent * video.duration;
                    progressFlag = setInterval(getProgress, 60);
                }
    
            }(this, document))

    下面是html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5-Video-Player</title>
        <style type="text/css">
            .videoPlayer{
                border: 1px solid #000;
                width: 600px;
            }
            #video{
                margin-top: 0px;
            }
            #videoControls{
                width: 600px;
                margin-top: 0px;
            }
            .show{
                opacity: 1;
            }
            .hide{
                opacity: 0;
            }
            #progressWrap{
                background-color: black;
                height: 25px;
                cursor: pointer;
            }
            #playProgress{
                background-color: red;
                width: 0px;
                height: 25px;
                border-right: 2px solid blue;
            }
            #showProgress{
                background-color: ;
                font-weight: 600;
                font-size: 20px;
                line-height: 25px;
            }
        </style>
    </head>
    <body>
        <div class="">
            <h1>HTML5_Video_Player</h1>
            <div class="videoPlayer" id="videoContainer">
                <video id="video" 
                width="600" height="360" 
                preload controls
                >
                    <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'>
                    <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'>
                </video>
                <div id="videoControls"> 
                    <div id="progressWrap">  
                        <div id="playProgress">  
                            <span id="showProgress">0</span> 
                        </div>
                    </div>
                    <div>
                        <button id="playBtn" title="Play"> 播放 </button> 
                        <button id="fullScreenBtn" title="FullScreen Toggle">  全屏 </button>
                    </div> 
                </div> 
            </div>
        </div>
    </body>
    </html>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

相似问题
最新问题
推荐课程