JS—— 控制＜video＞标签播放/暂停

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

小刘忙着搞前端

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

阅读量5.2k

点赞数 2

文章标签： javascript 前端

原文链接：https://blog.csdn.net/weixin_45050636/article/details/90206913

版权

一、video参数

<!-- autoplay:自动播放 -->
    <!-- poster：占位图片，默认视频第一帧图像 -->
    <!-- controls：控制条 -->
    <!-- loop：循环播放
    preload：预加载,和autoplay相冲。二选一
    meted：静音
    height|width：高宽设置（只设置一个值就好，设置两个达不到想要的效果，除非刚  	好与视频等比例。

二、 js可以直接操作的几个方法

    // load ：加载
    // play : 播放
    // paus ：暂停
    // webkitRequestFullScreen：全屏
    //视频播放的当前进度
    console.log(videL.currentTime);
    //视频的总时长（单位是秒，需要在视频加载完成以后调用，否则返回NaN）
    console.log(videL.duration);
    //视频的播放状态 （返回布尔值，true代表未播放，false代表正在播放；
    console.log(videL.paused);

三、常用的几个事件

//oncanplay : 当用户可以开始播放时触发
        videL.oncanplay = function () {
            alert(' 客官，可以开始播放了');
        }
        //ontimeupdate：报告当前播放的进度。（注意，需要写开始以及终止条件，否则会一直弹出）
        videL.ontimeupdate = function () {
            alert(' 客官，你现在播放进度为xxx秒');
        }
        //onended：当视频播放完毕时弹出
        videL.onended = function () {
            alert('客官，你已经看完了');
        }

四、 控制开始或暂停

<body>  
    <video src="./74ed42e4ebde8d704f25c2ff543f17cd.mp4" autoplay controls height="200px" id="videL"></video>
    <button id="button">暂停/开始</button>
    <script>
        var videL = document.getElementById('videL');
        var button = document.getElementById('button');
        button.onclick = function () {
            if (videL.paused) {
                videL.play();
            } else {
                videL.pause();
            }
        }
    </script>
</body>