Jquery 视频叠加问题

我想创建一个

视频

覆盖图。它在Chrome中工作得很好，但在Safari中存在一些问题。当我将

控件

添加到

视频

标记并想暂停视频时，Safari返回以下错误：

未处理的承诺拒绝：[对象发生错误]

如果我删除

控件

属性，它会工作，但我需要

控件

，不想添加自定义

控件

jQuery（'.video\u home\u 1'）。单击（函数（）{
if（jQuery（this）.children（“视频”）.get（0）.暂停）{
jQuery（this）.children（“video”）.get（0.play（）；
jQuery（this.find（“.playpause”）.fadeOut（）；
jQuery（this.find（“.home\u video\u overlay”）.fadeOut（）；
}否则{
jQuery（this）.children（“视频”）.get（0.pause（）；
jQuery（this.find（“.playpause”）.fadeIn（）；
jQuery（this.find（“.home\u video\u overlay”）.fadeIn（）；
jQuery（this）.children（“.home\u video\u overlay”）.css（'background'，'transparent'）；
}
});
.video\u home\u 1{
显示：表格；
宽度：自动；
位置：相对位置；
宽度：自动；
高度：425px；
}
.video\u home\u 1.播放暂停{
背景：url(https://www.squaresigns.com/wp-content/uploads/2017/11/play.png)58%50%不重复；
背景重复：无重复；
宽度：100px；
高度：100px；
位置：绝对位置；
左：0%；
右：0%；
背景尺寸：64px 64px；
最高：0%；
底部：0%；
z指数：100；
保证金：自动；
边界半径：50%；
背景色：rgba（0,0,0,3）；
}
.video\u home\u 1.home\u video\u叠加{
位置：绝对位置；
z指数：2；
排名：0；
左：0；
宽度：100%；
高度：425px；
背景重复：无重复；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
背景尺寸：封面；
光标：指针；
}
.video\u home\u 1视频{
高度：425px；
宽度：自动；
右侧填充：4px；
}
也许放弃jquery，做一个纯javascript实现

或者在javascript中使用更流畅的独立逻辑。适用于哪种浏览器类型

：）

希望你能理解我会通过mozilla查看视频api
也许放弃jquery，做一个纯javascript实现

或者在javascript中使用更流畅的独立逻辑。适用于哪种浏览器类型

：）

希望你能理解我会通过mozilla查看视频api
您可能需要设置
controls=“true”
，如中所示

您可能需要设置
controls=“true”
如中所示

用这个js代码解决了这个问题

jQuery('.video_home_1').attr("played","no");
    jQuery('.video_home_1').click(function () {
        if(jQuery(this).attr('played')=="no"){
            jQuery(this).attr("played","yes");
            jQuery(this).children("video").get(0).play();
            jQuery(this).find(".playpause").fadeOut();
            jQuery(this).find(".home_video_overlay").fadeOut();
            jQuery(this).children("video").css("z-index","99");
        }else{
            jQuery(this).attr("played","no");
            jQuery(this).children("video").get(0).pause();
            jQuery(this).find(".playpause").fadeIn();
            jQuery(this).find(".home_video_overlay").fadeIn();
            jQuery(this).children(".home_video_overlay").css('background', 'transparent');
            jQuery(this).children("video").css("z-index","1");
        }
}   );

用这个js代码解决了这个问题

jQuery('.video_home_1').attr("played","no");
    jQuery('.video_home_1').click(function () {
        if(jQuery(this).attr('played')=="no"){
            jQuery(this).attr("played","yes");
            jQuery(this).children("video").get(0).play();
            jQuery(this).find(".playpause").fadeOut();
            jQuery(this).find(".home_video_overlay").fadeOut();
            jQuery(this).children("video").css("z-index","99");
        }else{
            jQuery(this).attr("played","no");
            jQuery(this).children("video").get(0).pause();
            jQuery(this).find(".playpause").fadeIn();
            jQuery(this).find(".home_video_overlay").fadeIn();
            jQuery(this).children(".home_video_overlay").css('background', 'transparent');
            jQuery(this).children("video").css("z-index","1");
        }
}   );

var video=document.getElementsByTagName（“视频”）；var playButton=document.getElementsByClassName（“video_home_1”）；播放按钮[0]。addEventListener（“单击”，函数（）{if（视频[0]。暂停==true）{//播放视频[0]。播放（）；}否则{//暂停视频[0]。暂停（）；}）；谢谢你的回答。但是使用纯javascript和相同的结果进行了测试。文档的零索引是什么。getElementsByTagName（“视频”）；：Dvar video=document.getElementsByTagName（“视频”）；var playButton=document.getElementsByClassName（“video_home_1”）；播放按钮[0]。addEventListener（“单击”，函数（）{if（视频[0]。暂停==true）{//播放视频[0]。播放（）；}否则{//暂停视频[0]。暂停（）；}）；谢谢你的回答。但是使用纯javascript和相同的结果进行了测试。文档的零索引是什么。getElementsByTagName（“视频”）；：DWe不需要向控件添加true，如果控件存在，则表示它为true，并且必须显示控件按钮。这并不能解决问题。我们不需要在控件中添加true，如果控件存在，则表示它为true，并且必须显示控件按钮。这并不能解决问题。