js- 视频播放器

Posted 2020-08-16 黑土白云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js- 视频播放器相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>自制视频播放器</title>
    <style>
        *{margin: 0; padding: 0}
        #div1{width: 300px; height: 20px; background: #666; overflow: hidden;position: relative;top:10px}
        #div2{width: 30px; height: 20px;background: red; position: absolute; left: 0; top: 0;}
        #div3{width: 300px; height: 10px; background: #666; overflow: hidden;position: relative;top:20px}
        #div4{width: 30px; height: 10px;background: green; position: absolute; left: 90px; top: 0;}
    </style>
</head>
<body>
<video  id="v1">
    <source src="a.mp4"/>
</video><br>
<input type="button" value="播放"/>
<input type="button" value="00:00:00"/>
<input type="button" value="00:00:00"/>
<input type="button" value="静音"/>
<input type="button" value="全屏"/>
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3">
    <div id="div4"></div>
</div>
<script>
    window.onload = function(){
        var oVideo = document.getElementById(‘v1‘);
        var aInput = document.getElementsByTagName(‘input‘);
        var oDiv1 = document.getElementById(‘div1‘);
        var oDiv2 = document.getElementById(‘div2‘);//进度滑块
        var oDiv3 = document.getElementById(‘div3‘);
        var oDiv4 = document.getElementById(‘div4‘);//音量滑块
        var timer = null;

        //功能1.播放暂停
        aInput[0].onclick = function(){
            if(oVideo.paused){
                oVideo.play();
                this.value = ‘暂停‘;
                nowTime();
                timer = setInterval(nowTime, 1000);
            }else if(oVideo.played){
                oVideo.pause();
                this.value = ‘播放‘;
                clearInterval(timer);
            }
        }

        //功能2.获取视频总时间,默认是秒
        aInput[2].value = changeTime(oVideo.duration);
        oVideo.ondurationchange = function(){
            aInput[2].value = changeTime(oVideo.duration);
        }

        //功能3 静音
        aInput[3].onclick = function(){
            if(oVideo.muted ){ //如果是静音状态,点击按钮变成不静音! 音量在0-1之间, 0静音,1最大
                oVideo.volume = 0.3;
                this.value = ‘静音‘;
                oVideo.muted = false;
            }else { //如果当前非静音状态,点击按钮变成静音,音量变成0
                oVideo.volume = 0;
                this.value = ‘取消静音‘;
                oVideo.muted = true;
            }
        };

        //功能4 全屏  方法1.视频的宽高==可视区的宽高! 方法2: 自带的全屏的方法 mozRequestFullScreen()
        aInput[4].onclick = function(){
           //oVideo.mozRequestFullScreen();
            var w = document.body.clientWidth || document.documentElement.clientWidth;
            var h = document.body.clientHeight || document.documentElement.clientHeight;
            oVideo.width = w;
            oVideo.height = h;
        };

        //功能5 播放时间进度条
        oDiv2.onmousedown = function(ev){
            var ev = ev || window.event;
            disX = ev.clientX - oDiv2.offsetLeft;//鼠标坐标到控件的左边的距离
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                var L = ev.clientX - disX;//控件到html的左边的距离
                if(L < 0){
                    L = 0;
                }else if( L > oDiv1.offsetWidth - oDiv2.offsetWidth){
                    L = oDiv1.offsetWidth - oDiv2.offsetWidth;
                }
                oDiv2.style.left = L + ‘px‘;
                var scale = L / (oDiv1.offsetWidth - oDiv2.offsetWidth);
                oVideo.currentTime = scale * oVideo.duration;
                nowTime();
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
            return false;
        };

        //功能6 音量进度条控制
        oDiv4.onmousedown = function(ev){
            var ev = ev || window.event;
            disX = ev.clientX - oDiv4.offsetLeft;//鼠标坐标到控件的左边的距离
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                var L = ev.clientX - disX;//控件到html的左边的距离
                if(L < 0){
                    L = 0;
                }else if( L > oDiv3.offsetWidth - oDiv4.offsetWidth){
                    L = oDiv3.offsetWidth - oDiv4.offsetWidth;
                }
                oDiv4.style.left = L + ‘px‘;
                var scale = L / (oDiv3.offsetWidth - oDiv4.offsetWidth);
                oVideo.volume = scale;
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        };

        //当视频播放的时候,显示当前的播放的时间,每隔一秒更新下,当暂停的时候清除定时器
        function nowTime(){
            aInput[1].value = changeTime(oVideo.currentTime);
            var scale = oVideo.currentTime / oVideo.duration;
            oDiv2.style.left = scale * 270 +‘px‘; //视频播放时进度条要向前跑 270 = oDiv1.style.width - oDiv2.style.width
        }
        
　　　　 //获取视频总时长 00:00:00
        function changeTime(iNum){
            iNum = parseInt(iNum);
            var iH = toZero(Math.floor(iNum / 3600)); //时
            var iM = toZero(Math.floor(iNum % 3600 / 60)); //分
            var iS = toZero(Math.floor(iNum % 60)); //秒
            return iH + ":" + iM + ":" + iS;
        }
        function toZero(num){
            return num <= 9 ? ‘0‘+ num : ‘‘+ num ;
        }
    };
</script>

</body>
</html>
以上是关于js- 视频播放器的主要内容，如果未能解决你的问题，请参考以下文章
使用 ffmpeg 生成单个 MPEG-Dash 片段
当替换片段视频仍在android中播放背景时
B 站 HTML5 播放器内核 Flv.js
Android主流视频播放及缓存实现原理调研
在 HTML5 Video 中，如何播放长视频中的小片段？
视频没有在片段 ViewPager 中暂停