HTML5之video播放器

最新推荐文章于 2023-04-02 15:19:20 发布

We_jia

最新推荐文章于 2023-04-02 15:19:20 发布

阅读量984

点赞数

分类专栏： HTML+CSS 文章标签： video播放器

本文链接：https://blog.csdn.net/We_jia/article/details/87890268

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

效果展示

video播放器案例效果图如下：

说明：本案例并没有写浏览器兼容性，采用的是本地视频，使用火狐浏览器才能正常使用。谷歌浏览器必须用远程视频才行。

思路分析

1.首先添加 playing事件，在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发，使用duration 属性返回当前视频的长度，赋给进度条的最大值。

2.添加timeupdate 事件，在音频/视频（audio/video）的播放位置发生改变时触发，使用currentTime 属性设置或返回音频播放的当前位置，赋给进度条的当前值

3.设置播放暂停事件，play()属性和pause(),在点击播放时要清除计时器

    //设置播放暂停
    start.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            vedio.play();
            this.innerHTML = "暂停";
            clearInterval(time);
        }
        else {
            vedio.pause();
            this.innerHTML = "播放";
        }
    });

4.设置进度条事件,鼠标按下拖动，将当前进度条的value赋给video的currentTime属性，鼠标松开，清空事件，视频播放

5.设置快进，倒退事件，使用计时器进行倒退快进，

注意：点击该该事件时首先要清空计时器，避免出现先点击快进后点击倒退，进度条出现bug的情况，

在进行倒退的的时候要判断是否回到视频起点，若回到就要调用视频播放方法

    btnback.addEventListener("click", function () {
        clearInterval(time);
        vedio.pause();
        start.innerHTML = "播放";
        time = setInterval(function () {
            vedio.currentTime -= 5;
            if (vedio.currentTime <= 0) {
                vedio.play();  //视频回到原点，重新开始播放
                clearInterval(time);
            }
        }, 1000);
    });

6.设置音量事件，volume 属性设置或返回视频的当前音量，从 0.0 (静音) 到 1.0 (最大声)，获取到的时间值除以100。

    btnsound.addEventListener("mousedown", function () {
        this.onmousemove = function () {
            //volume 属性设置或返回视频的当前音量，从 0.0 (静音) 到 1.0 (最大声)。
            vedio.volume = this.value / 100;   //0-1之间
        };
        this.onmouseup = function () {
            this.onmousemove = null;
            this.onmouseup = null;
        }
    });

7.设置静音事件，muted属性设置或返回音频是否应该被静音（关闭声音）。该属性指定了音频是静音的

   btns.addEventListener("click", function () {
        //mutedmuted 属性设置或返回音频是否应该被静音（关闭声音）。该属性指定了音频是静音的。
        vedio.muted = !vedio.muted
    });

8.设置全屏考虑兼容性

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #video {
            width: 700px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid silver;
        }

        #mp4par {
            position: relative;
            width: 700px;
            height: 500px;
            background-color: black;
            float: left;
            overflow: hidden;
        }

        #mp4 {
            position: relative;
            width: 700px;
            height: 500px;
            margin: 0 auto;
        }

       

        #controls {
            position: absolute;
            width: 700px;
            height: 63px；
            bottom: -63px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.6);
            transition: all 0.3s ease-in;

        }

         #mp4par:hover #controls {
             bottom: 0;
        }

        #btntime {
            width: 700px;
        }

        #btnsound {
            position: relative;
            top: 0;
        }

        .block {
            margin-top: -10px;
    margin-left: 70px;
        }

        button {
            width: 45px;
            height: 45px;
            font-size: 12px;
            border-radius: 50%;
            outline: none;
            border-style: none;
            background: radial-gradient(#a3fff7, #2e9dff);
            color: #ff26f6;
            margin-left: 10px;
        }

        #btntime {
            outline: none;
        }
    </style>
</head>
<body>
<div id="video">
    <div id="mp4par">
        <video id="mp4"
               src="./MP4/high.mp4"></video>
        <div id="controls">
            <input type="range" id="btntime" value="0" max="100"/><br/> <!--进度条  为比例值-->
            <div class="block">
                <button id="start">播放</button>
                <button id="btngo">快进</button>
                <button id="btnback">快退</button>
                <button id="btns">静音</button>
                <input type="range" id="btnsound" value="0" max="100"/>
                <button id="big">全屏</button>
                <button>下载</button>
            </div>
        </div>
    </div>
    <div id="mp4list"></div>
</div>
<script>
    var start = document.getElementById("start");
    var vedio = document.getElementById("mp4");  //视频
    var btntime = document.getElementById("btntime");
    var btngo = document.getElementById("btngo");
    var btnback = document.getElementById("btnback");
    var btns = document.getElementById("btns");
    var btnsound = document.getElementById("btnsound");
    var big = document.getElementById("big");
    var time;

    //onplaying 事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。
    vedio.onplaying = function () {
        var allTime = this.duration;   //  duration 属性返回当前视频的长度，以秒计
        btntime.setAttribute("max", allTime);  //给进度条设置max属性 赋值总时间

    };
    //timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发
    vedio.ontimeupdate = function () {
        btntime.value = this.currentTime;   // currentTime 属性设置或返回音频播放的当前位置（以秒计）
    };

    //设置进度条事件
    btntime.addEventListener("mousedown", function () {
        vedio.pause();
        this.onmousemove = function () {
            vedio.currentTime = this.value;
        };
        this.onmouseup = function () {
            vedio.play();
            this.onmousemove = null;
            this.onmouseup = null;
        }

    });
    //快进
    btngo.onclick = function () {
        /*  clearInterval(time);*/
        vedio.pause();
        start.innerHTML = "播放";
        time = setInterval(function () {
            vedio.currentTime += 5;
        }, 1000);
    };
    //快退
    btnback.addEventListener("click", function () {
        clearInterval(time);
        vedio.pause();
        start.innerHTML = "播放";
        time = setInterval(function () {
            vedio.currentTime -= 5;
            if (vedio.currentTime <= 0) {
                vedio.play();  //视频回到原点，重新开始播放
                clearInterval(time);
            }
        }, 1000);
    });
    //静音
    btns.addEventListener("click", function () {
        //mutedmuted 属性设置或返回音频是否应该被静音（关闭声音）。该属性指定了音频是静音的。
        vedio.muted = !vedio.muted
    });
    //设置音量按钮
    btnsound.addEventListener("mousedown", function () {
        this.onmousemove = function () {
            //volume 属性设置或返回视频的当前音量，从 0.0 (静音) 到 1.0 (最大声)。
            vedio.volume = this.value / 100;   //0-1之间
        };
        this.onmouseup = function () {
            this.onmousemove = null;
            this.onmouseup = null;
        }
    });

    //设置全屏
    big.addEventListener("click", function () {
        if (video.webkitRequestFullScreen) { //谷歌
            video.webkitRequestFullScreen();
        }
        if (video.mozRequestFullScreen) {//火狐
            video.mozRequestFullScreen();
        }
        if (video.msRequestFullScreen) { //ie
            video.msRequestFullScreen();
        }
        if (video.RequestFullScreen) {  //其他
            video.RequestFullScreen();
        }
    });
    //设置播放暂停
    start.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            vedio.play();
            this.innerHTML = "暂停";
            clearInterval(time);
        }
        else {
            vedio.pause();
            this.innerHTML = "播放";
        }
    });


</script>
</body>
</html>

We_jia

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5之video播放器

效果展示video播放器案例效果图如下：说明：本案例并没有写浏览器兼容性，采用的是本地视频，使用火狐浏览器才能正常使用。谷歌浏览器必须用远程视频才行。思路分析1.首先添加 playing事件，在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发，使用duration 属性返回当前视频的长度，赋给进度条的最大值。2.添加timeupdate 事件，在音...
复制链接

扫一扫