重写HTML5 video播放器

╰+哭是因爲堅強的太久メ 2022-03-17 08:35 433阅读 0赞

>  自从H5进宫以来，flash一直被冷落以至于要停止维护。可见，H5还是有很大的优势的，在播放器上，H5自带的播放器已经很强大了，今天将要重写H5播放器（虽然好丑）

放在前面的总结：谷歌浏览器表现的差强人意，本地视频上无法实现进度条的操作，火狐可以，至少我没有找到解决办法，远程视频没有问题，有好多video属性之前听都没听说过，只能神农尝百草，还是比较头疼的，代码不算很多，毕竟是经常在用的东西，所以思想也不是很复杂，但小bug不断。

实现效果：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

代码如下，注释已写：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>video</title>
        <style>
            #video{
                width: 700px;
                height: 500px;
                margin: 0 auto;
                border: 1px solid red;
            }
            #mp4player{
                position: relative;
                width: 500px;
                height: 500px;
                background-color: black;
                float: left;
                overflow: hidden;
            }
            #mp4{
                position: relative;
                width: 500px;
                height: 500px;
            }
            #mp4list{
                width: 200px;
                height: 500px;
                float: left;
                border: 1px solid silver;
                box-sizing: border-box;
                background-color: black;
            }
            #content{
                position: absolute;
                width: 500px;
                height: 90px;
                bottom: -90px;
                z-index: 10;
                background-color: rebeccapurple;
                transition: all 0.3s ease-in;
            }
            #mp4player:hover #content{
                bottom: 0;
            }
            #btntime{
                width: 500px;
    
            }
            #btnsound{
                position: relative;
                top: 5px;
            }
        </style>
    </head>
    
    <body>
        <div id="video">
            <div id="mp4player">
                <video src=".././../../前端上课/0219/MP4/high.mp4" id="mp4"></video>
                <div id="content">
                    <input type="range" id="btntime" value="0" max="100" /><br />
                    <button id="start">播放</button>
                    <button id="btngo">快进</button>
                    <button id="btnback">快退</button>
                    <button id="nosound">静音</button>
                    <input type="range" id="btnsound" value="0" max="100" />
                    <button id="all_screen">全屏</button>
                </div>
            </div>
            <div id="mp4list"></div>
        </div>
        <script>//获取dom元素
            var start = document.getElementById('start');
            var video = document.getElementById('mp4');
            var btntime = document.getElementById('btntime');
            var btngo = document.getElementById('btngo');
            var btnback = document.getElementById('btnback');
            var nosound = document.getElementById('nosound');
            var btnsound = document.getElementById('btnsound');
            var all_screen = document.getElementById('all_screen');
            var time;
            video.onplaying = function () {
            //视频开始回放的时候开始执行
            //总时间
            var allTime = this.duration;
            btntime.setAttribute("max", allTime);//赋值给max
        }
        // 视频播放位置发生变化时执行
            video.ontimeupdate = function () {
                btntime.value = this.currentTime;
            }
            // 
            // video.onprogress = function (e) {
    
            // }js好像无法直接实现下载事件
            // 进度条事件（点击时首先暂停播放，点击后移动时进度条改变，视频时间改变）
            btntime.addEventListener('mousedown', function () {
                video.pause();
                this.onmousemove = function () {
                    video.currentTime = this.value;
                }
                this.onmouseup = function () {
                    video.play();//鼠标抬起时，开始播放，清除事件
                    this.onmousemove = null;
                    this.onmouseup = null;
                }
            });
            // 播放按钮事件
            start.addEventListener('click', function () {
                if (this.innerHTML == '播放') {
                    video.play();
                    this.innerHTML = '暂停';
                } else {
                    video.pause();
                    this.innerHTML = '播放';
                }
            });
            // 快进
            btngo.addEventListener('click', function () {
                start.innerHTML = '播放';
                video.pause();
                time = setInterval(function () {
                    video.currentTime += 5;
                }, 1000)
            });
            // 快退
            btnback.addEventListener('click', function () {
                start.innerHTML = '播放';
                video.pause();
                time = setInterval(function () {
                    video.currentTime -= 5;
                    if (video.currentTime <= 0) {//如果已经退到开头，开始播放
                        video.play();
                        clearInterval(time)
                    }
                }, 1000)
            });
            // 静音
            nosound.addEventListener('click', function () {
                video.muted = !video.muted;
            });
            // 全屏
            all_screen.addEventListener('click', function () {
                // 兼容性写法
                if (video.webkitRequestFullScreen) {
                    video.webkitRequestFullScreen();
                }
                if (video.mozkitRequestFullScreen) {
                    video.mozRequestFullScreen();
                }
                if (video.mskitRequestFullScreen) {
                    video.mozRequestFullScreen();
                }
                if (video.kitRequestFullScreen) {
                    video.RequestFullScreen();
                }
            });
            // 音量调节
            btnsound.addEventListener('mousedown', function () {
                this.onmousemove = function () {
                    video.volume = this.value / 100;
                }
                this.onmouseup = function () {
                    this.onmousemove = null;
                    this.onmouseup = null;
                }
            });
        </script>
    </body>
    
    </html>

后面的总结：这只是一个学习的案例，离真正的播放器还差的很远，比如：广告，视频的单击暂停显示广告，双击全屏（成双成对），加载条，分辨率切换，网速显示，弹幕，下载，播放列表等等

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: /images/20220317/031c76841b2d4b9f9a7ca9932465f321.png