用JS实现视频播放器

最新推荐文章于 2024-03-23 09:44:37 发布

易安sparkle

最新推荐文章于 2024-03-23 09:44:37 发布

阅读量5.1w

点赞数 28

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43675447/article/details/90695733

版权

js 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

知识点：

1.HTML5 Audio/Video 属性：

duration：返回当前音频/视频的长度（以秒计）
currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
muted：设置或返回音频/视频是否静音
volume：设置或返回音频/视频的音量

2.HTML5 Audio/Video 事件：

play：音频/视频已开始或不再暂停
pause：音频/视频已暂停
playing：音频/视频在已因缓冲而暂停或停止后已就绪
timeupdate：目前的播放位置已更改

事件：

1.播放按钮的点击事件（click）：
若按钮当前文本为“播放”，则视频开始播放，且将文本内容改为“暂停”；反之，则视频暂停，且将文本内容改为“播放”；清除计时器

2.视频开始回放时执行（playing）：
获取当前video的总时间，将该总时间设置给总进度条的max属性中

3.视频播放位置发生变化时开始执行（timeupdata）：
将当前视频的播放位置赋值给进度条的值

4.播放进度条事件（鼠标下落）：
（1）将视频暂停
（2）鼠标移动事件：根据进度条的value按照百分比的换算，在总时间里换算当前的时间，将其值赋给video的播放位置（currentTime）
（3）鼠标抬起事件：将视频开始播放

5.快进的点击事件：
将第一个按钮的文本值改为“播放”；将视频暂停；通过计时器实现video播放的快进

6.快退的点击事件：
将第一个按钮的文本值改为“播放”；将视频暂停；通过计时器实现video播放的快退；快退到头时，需将视频自动播放

7.静音的点击事件：
使用muted属性

8.音量进度条事件（鼠标下落）：
根据进度条的value按照百分比的换算，根据volume属性换算当前的音量，将其值赋给video的音量（volume）

9.全屏的点击事件：
使用RequestFullScreen，并进行兼容性代码写法

代码块：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <title></title>
    <style>
        #video {
            width: 700px;
            height: 450px;
            margin: 0 auto;
            border: 1px solid silver;
        }
        #mp4par {
            position: relative;
            width: 700px;
            height: 450px;
            background-color: black;
            float: left;
            overflow: hidden;
        }
        #mp4 {
            position: relative;
            width: 700px;
            height: 450px;
        }
        #controls {
            position: absolute;
            width: 700px;
            height: 75px;
            bottom: -75px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.31);
            text-align: center;
            transition: all 0.3s ease-in;
        }
        #mp4par:hover #controls{
            bottom: 0;
        }
        #btntime {
            width: 700px;
            outline: none;
        }
        #btnsound {
            position: relative;
            top: 5px;
        }
        button {
            position: relative;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            outline: none;
            border-style: none;
            background: radial-gradient(#ffae9f, #ff2f39);
            margin: 0 17px;
            color: #474747;
        }
        .iconfont {
            font-size: 24px;
            color: #474747;
        }
    </style>
</head>
<body>
<div id="video">
    <div id="mp4par">
        <video id="mp4" src="./Mp4/徐佳莹%20-%20湫兮如风.mp4"></video>
        <div id="controls">
            <input type="range" id="btntime" value="0" max="100"><br>
            <button id="btnstart" style="top: -4px">播放</button>
            <button id="btngo"><i class="iconfont">&#xe687;</i></button>
            <button id="btnback"><i class="iconfont">&#xe7f3;</i></button>
            <button id="btnmute"><i class="iconfont">&#xe615;</i></button>
            <input type="range" id="btnsound" value="0" max="100">
            <button id="btnbig"><i class="iconfont">&#xe632;</i></button>
            <button><i class="iconfont">&#xe638;</i></button>
        </div>
    </div>
</div>
<script>
    var video = document.getElementById("mp4");
    var btnstart = document.getElementById("btnstart");
    var btntime = document.getElementById("btntime");
    var btngo = document.getElementById("btngo");
    var btnback = document.getElementById("btnback");
    var btnmute=document.getElementById("btnmute");
    var btnsound=document.getElementById("btnsound");
    var btnbig=document.getElementById("btnbig");
    var time;
    //视频开始回放时执行
    video.onplaying = function () {
        //获取当前video的总时间
        var allTime = this.duration;
        btntime.setAttribute("max", allTime);
    };
    //视频播放位置发生变化时开始执行
    video.ontimeupdate = function () {
        btntime.value = this.currentTime;
    };
    //播放进度条的事件
    btntime.addEventListener("mousedown", function () {
        video.pause();
        this.onmousemove = function () {
            video.currentTime = this.value;
        };
        this.onmouseup = function () {
            video.play();
            this.onmousemove = null;
            this.onmouseup = null;
        }
    });
    //快进的点击事件
    btngo.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime += 5;
        }, 1000);
    });
    //快退的点击事件
    btnback.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime -= 2;
            if (video.currentTime <= 0) {
                video.play();
                clearInterval(time);
            }
        }, 1000);
    });
    //静音的点击事件
    btnmute.addEventListener("click",function(){
        video.muted=!video.muted;
    });
    //音量进度条的事件
    btnsound.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.volume=this.value/100;
        }
        this.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
    //全屏的点击事件
    btnbig.addEventListener("click",function(){
        if (video.webkitRequestFullScreen) {
            video.webkitRequestFullScreen();
        }
        else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        }
        else if (video.msRequestFullScreen) {
            video.msRequestFullScreen();
        }
        else if (video.RequestFullScreen) {
            video.RequestFullScreen();
        }
    });
    //播放的点击事件
    btnstart.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            video.play();
            this.innerHTML = "暂停";
            clearInterval(time);
        }
        else {
            video.pause();
            this.innerHTML = "播放";
        }
    })
</script>
</body>
</html>

易安sparkle

关注

28
点赞
踩
98

收藏

觉得还不错? 一键收藏
0
评论
用JS实现视频播放器

知识点：1.HTML5 Audio/Video 属性：duration：返回当前音频/视频的长度（以秒计）currentTime：设置或返回音频/视频中的当前播放位置（以秒计）2.HTML5 Audio/Video 事件：play：音频/视频已开始或不再暂停pause：音频/视频已暂停playing：音频/视频在已因缓冲而暂停或停止后已就绪timeupdate：目前的播放位置...
复制链接

扫一扫