html5视频播放自定义视频播放暂停，解决暂停按钮在视频画面中的问题

最新推荐文章于 2023-12-29 16:55:02 发布

阿川阿川

最新推荐文章于 2023-12-29 16:55:02 发布

阅读量5.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： html5视频播放

本文链接：https://blog.youkuaiyun.com/tangkthh/article/details/102597202

JavaScript 专栏收录该内容

53 篇文章

订阅专栏

本文介绍如何使用HTML5和JavaScript自定义视频播放器的控制功能，包括播放、暂停、重播及下一个视频的倒计时播放。解决了暂停按钮在视频画面中的显示隐藏问题，并实现了视频播放结束后的自动倒计时功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html5视频播放自定义视频播放暂停，解决暂停按钮在视频画面中的问题

一、视频播放方法

var myVideo = $("#videoPlayExecute");

function playPause(video, videoPlayBtnId, videoPauseBtnId) {
    if (video.paused) {
        if (videoPlayBtnId) {
            $("#" + videoPlayBtnId).hide();
            // $("#" + videoPauseBtnId).show();
            video.play();
        }
    } else {
        if (videoPlayBtnId) {
            $("#" + videoPauseBtnId).hide();
            $("#" + videoPlayBtnId).show();
            video.pause();
        }
    }
}

二、播放暂停事件

playVideoBtn.on("click", function () {
    playPause(myVideo[0], "playBtn", "pauseBtn");
    return;
});

replayVideoBtn.on("click", function () {
    playPause(myVideo[0], "playBtn", "pauseBtn");
    return;
});

pauseVideoBtn.on("click", function () {
    playPause(myVideo[0], "playBtn", "pauseBtn");
    return;
});

三、暂停按钮的显示隐藏问题；思路：通过点击视频容器，去判断视频处于怎样的状态，然后根据情况显示隐藏按钮

注意：

移动端点击事件问题，使用‘touchstart’；
隐藏使用计时器；

代码如下：

$(".video-wrap").on('touchstart', function () {
    if (!myVideo[0].paused) {
        $("#pauseBtn").show();
        setTimeout(function () {
            $("#pauseBtn").hide();
        }, 3000);
    }
});

四、监听视频播放结束后，显示重播按钮以及下一个视频按钮，下一个视频倒计时播放

注意：

监听视频结束的方法；
倒计时的实现以及清除计时器

代码如下：

myVideo[0].addEventListener("ended", function () {
    playVideoBtn.hide();
    replayVideoBtn.show();
    nextVideoBtn.show();
    $("#countDownNum").html(3);
    var num = 3;

    function countDown() {
        if (num > 0) {
            num--;
            $("#countDownNum").html(num);
        } else {
            $("#countDownNum").html(0);
            playPause(myVideo[0], "playBtn", "pauseBtn");
            replayVideoBtn.hide();
            nextVideoBtn.hide();
            clearInterval(timer);
        }
    }

    var timer = setInterval(function () {
        countDown();
    }, 1000);
});