javascript - 使用 jquery 添加类不适用于 html5 视频播放器
问题描述
我有一个简单的视频块,在视频结束时我正在显示某些 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>
JS
$(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 仍然出现,
我究竟做错了什么?
解决方案
我认为问题的发生是因为元素“gif-data”是动态创建的。尝试在父静态元素中找到一个元素。
$('#video-block').find("#gif-data").addClass("hidegif");
那应该行得通。
推荐阅读
- android - 在 Dispatcher.Main 的上下文中执行网络任务
- php - 如何在 Symfony 中正确使用自定义类型?
- firebase - Flutter / Firebase在null上调用了getter'length'
- sql-server - SQL Server varchar(max) 无法正常工作
- wcf - 使用 WcfCoreMtomEncoder 记录响应 XML?
- ios - 在 Swift 中对来自 firestore 的数组进行分组
- python - NameError:名称“firstPart”未定义
- python - Web 抓取脚本在几个循环后崩溃
- angular - 括号中的 NativeScript 事件与否?
- node.js - 具有 REST 身份验证 API 的节点快递网站 - CORS 问题