Angbike个人博客 > JavaScript/JQuery > 自定义H5 video控制栏模块

自定义H5 video控制栏模块

HTML代码:

<!DOCTYPE HTML>
<html>
<head>
<title>自定义H5 video控制条</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Angbike"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>
<body>
    
    <video style="width: 500px; " src="http://www.runoob.com/try/demo_source/movie.mp4" id="videoObj"></video>
    <!--控制栏-->
    <div id="controlBox" class="control-box">
        <div>
            <div id="playBtn" class="video-play"></div>
        </div>
        <div id="videoTime" class="video-time">00:00</div>
        <div id="videoProgress" class="video-progress">
            <span id="videoBar" class="video-bar"></span>
        </div>
        <div id="videoSound" class="video-soundon"></div>
        <div id="videoFull" class="video-full"></div>
    </div>
    
</body>
</html>

CSS代码:

.control-box{height: 40px; width: 100%; background-color: #000000; display: flex; justify-content: center; align-items: center; text-align: center}
.control-box .video-play{border-top: 10px solid transparent; border-left: 20px solid #FFFFFF; border-bottom: 10px solid transparent}
.control-box .video-pause{width: 6px; height: 18px; border-left: 4px solid #FFFFFF; border-right: 4px solid #FFFFFF; width: 10px}
.control-box .video-time{color: #FFFFFF; width: 10%; font-size: 14px; height: 18px}
.control-box .video-progress{width: 55%; height: 8px; background: #fff; position: relative}
.control-box .video-bar{height: 100%; background: #444444; display: inline-block; position: absolute; left: 0; width: 0px;}
.control-box .video-soundon{width: 10px; height: 8px; border-right: 13px solid #FFFFFF; border-top: 6px solid rgba(255,255,255,0); border-bottom: 6px solid rgba(255,255,255,0)}
.control-box .video-soundoff{border-right: 13px solid #717171;}
.control-box .video-full{width: 15px; height: 15px; border: 3px solid #FFFFFF; margin-left: 13px}
.control-box .video-play:hover,
.control-box .video-pause:hover,
.control-box .video-soundon:hover,
.control-box .video-soundoff:hover,
.control-box .video-full{cursor: pointer}
@media only screen and (min-width: 280px) and (max-width: 640px){.control-box .video-time{width: 16%;}}

JS代码:

(function(window, $){
    
    var $controlBox     // 外层盒子
    ,$video            // 视频对象
    ,$play            // 播放按钮
    ,$time            // 播放时间
    ,$progress        // 进度条
    ,$bar            // 进度条效果
    ,$sound            // 声音
    ,$full            // 全屏
    ,playStatus = false;        // 播放状态
    
    videoControl = {
        
        // 初始化
        init: function(){
            
            $controlBox = $("#controlBox");
            $video = $("#videoObj");
            $play = $("#playBtn");
            $time = $("#videoTime");
            $progress = $("#videoProgress");
            $bar = $("#videoBar");
            $sound = $("#videoSound");
            $full = $("#videoFull");
            $video[0].control = false;
            var vw = $("#videoObj").width();
            $("#controlBox").css("width", vw);
            
        },
        // 视频播放
        videoPlay: function(){
            // 判断播放状态
            if($video[0].paused){
                $play.removeClass("video-play").addClass("video-pause");
                $video[0].play();
                playStatus = true;
            } else {
                $play.removeClass("video-pause").addClass("video-play");
                $video[0].pause();
                playStatus = false;
            }
        },
        // 监听视频播放位置改变 用于计算播放时间
        videoTimeUpdata: function(){
            // 视频当前播放的位置
            var currentTime = parseInt($video[0].currentTime);
            // 换算
            var videoMinute = parseInt(currentTime / 60);
            if(videoMinute == 0){
                if (currentTime < 10) {
                    currentTime = "0" + currentTime;
                }
                videoMinute = "00:" + currentTime;
            }else{
                var currentTime = currentTime % 60;
                if (currentTime < 10) {
                    currentTime = "0" + currentTime;
                }
                videoMinute = videoMinute + ":" + currentTime;
            }
            // 添加时间到页面
            $time.html(videoMinute);
            // 视频的长度(秒)
            var videoLength = $video[0].duration;
            // 视频播放时间 ÷ 视频总长度
            var scales = $video[0].currentTime / videoLength;
            var left = $progress[0].offsetWidth * scales;
            // 设置进度偏移
            $bar.css("width", left + "px");
        },
        // 全屏
        fullScreen: function(){
            var ele = $video[0];
            if (ele.requestFullscreen){
                ele.requestFullscreen();
            }else if(ele.mozRequestFullScreen){
                ele.mozRequestFullScreen();
            }else if(ele.webkitRequestFullScreen){
                ele.webkitRequestFullScreen();
            }
        },
        // 关闭打开声音
        soundChange: function(){
            if(playStatus){
                if(!($video[0].muted)){
                    $video[0].muted = true;
                    $sound.addClass("video-soundoff");
                }else{
                    $video[0].muted = false;
                    $sound.removeClass("video-soundoff");
                }
            }
        },
        // 监听视频是否播放完成
        videoEnded: function(){
            if($video[0].ended){
                $play.removeClass("video-pause").addClass("video-play");
                $video[0].pause();
                $time.html("00:00");
                $bar.css("width", "0px");
                playStatus = false;
            }
        },
        
    }
    $(function(){
        
        videoControl.init();
        $play.on("click", videoControl.videoPlay);            // 播放
        $video.on("timeupdate", videoControl.videoTimeUpdata);        // 监听播放位置发生改变
        $video.on("ended", videoControl.videoEnded);            // 监听视频播放完成
        $full.on("click", videoControl.fullScreen);            // 全屏
        $sound.on("click", videoControl.soundChange);            // 声音关闭或打开
        
    })
})(window, $)

效果截图:
1.gif

博客评论已关闭