使用 jquery 添加类不适用于 html5 视频播放器答案

【问题标题】：add class not working with html5 video player using jquery使用 jquery 添加类不适用于 html5 视频播放器
【发布时间】：2019-08-05 08:01:06
【问题描述】：

我有一个简单的视频块，在视频结束时我正在显示某些 gif，

问题：

现在，当用户暂停视频时，gif 也会显示，这意味着当视频结束时，gif 现在会显示，当我再次播放视频并暂停视频时，gif 会再次显示

待办事项

我希望当用户暂停视频时 gif 不应该显示，这意味着 gif 应该只在视频结束时显示

这是我的解决方案

HTML

<div canplay id="video-block">
    <div id="video-container">
        <video id="videoplayer" playsinline muted autoplay>
            <source src="videos/good_job.mp4"></source>
        </video>
        <div id="interactive-layers">
        </div>

    </div>

    <div id="pause-play-button">
        <img id="play" src="images/play.png">
        <img id="pause" src="images/pause.png">
    </div>

$(document).ready(function(){
        $("#videoplayer")[0].addEventListener("ended", onVideoEnded);
});


function showGif(gifname) {
        $("#gif-data").remove();
        var gif = $("<div id='gif-data'><audio class='audio' id='gifaudio'  autoplay src='" + gifs[gifname].audio + "'></audio><img class='gif' id='animatedgif' src='" + gifs[gifname].gif + "?rand=" + Math.random() + "'></div>")
        $("#interactive-layers").append(gif);
}


function onVideoEnded(e) {

        showGif("ed22");

}


$("#pause-play-button").on("click", function () {
        clearTheTimeout();
        if ($("#video-block video")[0].paused == true) {
                $("#gif-data").addClass("hidegif");
                $("#video-block video")[0].play();
                $("#pause").css("display", 'block');
                $("#play").css("display", "none");
        } else {
                $("#video-block video")[0].pause();
                $("#audioplayer")[0].pause();
                $("#gif-data").removeClass("hidegif");
                $("#pause").css("display", 'none');
                $("#play").css("display", "block");
        }
});

CSS

.hidegif{
    display: none;
}

不幸的是，当我点击暂停视频按钮时，我的 gifs 仍然显示，

我做错了什么？

【问题讨论】：

@RoryMcCrossan 嗨，所以你的意思是我应该使用暂停事件而不是结束？但我只想在结束时显示，这是我的现场演示meed.audiencevideo.com
啊，抱歉，我以为你想要反过来
好的，我需要怎么做才能解决我的问题？
如果没有看到一个工作示例，我们真的无法提供帮助（您的链接根本没有真正说明问题）。 ended 事件应该可以正常工作。
如果您在暂停视频并等待 4 秒时检查链接，则会显示 gif，但我只想在视频在 4 秒后结束时显示

标签： javascript jquery html video html5-video

【解决方案1】：

我认为问题的发生是因为元素“gif-data”是动态创建的。尝试在父静态元素中查找元素。

    $('#video-block').find("#gif-data").addClass("hidegif");

应该可以的。

【讨论】：

【解决方案2】：

这是几个月前的帖子，但根据我的经验，addEventListener 并非一直都适用于 Jquery，但 .on 事件有效。所以当你在监听结束的事件时，使用.on 并在其中编写 showGif 函数。

【讨论】：