html5 vedio 播放器，禁掉进度条快进快退事件 

<!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>
<script>
    (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))
</script>
</body>
</html>

 

 

// 鼠标在播放条上点击时进行捕获并进行处理
        function videoSeek(e){
            if(video.paused || video.ended){
                play();
                enhanceVideoSeek(e);
            }
            else{
                // 这句代码是控制允不允许点击进度条的； 不开启，就禁掉了点击事件快进快退
                enhanceVideoSeek(e);
            }

        }


主要是上面那个方法的事件控制


posted @ 2019-03-21 18:02  漫步CODE人生  阅读(6467)  评论(0)  编辑  收藏  举报
无