如何用js来控制video播放器

最新推荐文章于 2024-04-22 09:09:52 发布

小斯不斯

最新推荐文章于 2024-04-22 09:09:52 发布

阅读量1.9w

点赞数 9

分类专栏：如何用js来控制video播放器文章标签： js video播放器

本文链接：https://blog.csdn.net/qq_42181069/article/details/80455839

版权

如何用js来控制video播放器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在文章开始前，先给大家看下效果图：

在文章开始，给大家先分享一下这个思路：

js来控制视频的播放：

1、所有的方法和属性都是由video这个dom元素来调用，如果换成其他的则不能实现

2、video.paused==true

3、video.play();

4、video.pause();

5、video.duration;video.currentTime();

6、video.ontimeUpdate=function()

7、 video.webkitRequestFullScreen();

代码部分，包含注释：

<!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>Document</title>

    <link rel="stylesheet" href="./css/font-awesome.min.css">

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }

        .box {
            width: 800px;
            margin: 100px auto;
            border: 1px solid #fff;
        }
       
        .control {
            width: 100%;
            height: 50px;
            background: #fff;
            display: flex;
            border-top: 1px solid #fff;
        }


        .control .right,   .control .left{
            flex-basis: 50px;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }

        .control .progress {
            flex: 1;
        }

        .control .current {
            width: 0%;
            height: 50px;
            background-color: gray;
        }
    </style>
</head>
<body>
    <div class="box">
        <video src="./movie/bglb.mp4"></video>
        <div class="control">
            <a class="left icon-play"></a>
            <div class="progress">
                <div class="current"></div>
            </div>
            <a class="right icon-fullscreen"></a>
        </div>
    </div>
</body>
</html>

<script>
    //拿到video的dom元素
    var video = document.querySelector("video");

    //1. 点击暂停播放按钮的操作
    document.querySelector(".left").onclick = function() {
        //判断当前是处于暂停还是播放状态，如果是暂停状态，就播放， 如果是播放状态， 就暂停
        if (video.paused == true) {
            video.play();
            this.classList.add("icon-pause");
            this.classList.remove("icon-play");
        } else {
            video.pause();
            this.classList.remove("icon-pause");
            this.classList.add("icon-play");
        }
    }

    //2. 更新进度条（动态的设置进度条的div的宽度）
    //拿到视频的总时长，再拿到当前的播放的时间，求一个百分比，再把这个百分比设为css的width的值
    //当视频播放， 视频的进度更新时，就会调用
    video.ontimeupdate = function() {
        var percent = video.currentTime / video.duration * 100 + "%";
        console.log(percent);
        document.querySelector(".current").style.width = percent;
    }

    //3. 点击进度条，更新进度
    document.querySelector(".progress").onclick = function(target) {
        //拿到进度条的宽度
        var width = this.offsetWidth;
        //拿到当前点击位置的x坐标
        var x = target.offsetX;

        //比如说我的视频的总时长是60分钟， 当前时间 60 * x/width
        video.currentTime = x / width * video.duration;
    }

    //4. 全屏的功能的实现
    document.querySelector(".right").onclick = function() {
        //进入全屏
        video.webkitRequestFullScreen();
    }
    
</script>

小斯不斯

关注

9
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
如何用js来控制video播放器

在文章开始前，先给大家看下效果图：在文章开始，给大家先分享一下这个思路：js来控制视频的播放：1、所有的方法和属性都是由video这个dom元素来调用，如果换成其他的则不能实现2、video.paused==true3、video.play();4、video.pause();5、video.duration;video.currentTime();6、video.ontimeUpdate=fun...
复制链接

扫一扫