视频叠加问题答案

【问题标题】：Video overlay issue视频叠加问题
【发布时间】：2017-11-13 19:33:56
【问题描述】：

我想创建一个video 叠加层。它在带有https://stackoverflow.com/a/30310041/8254123 的 Chrome 中运行良好，但在 Safari 中存在一些问题。当我将controls 添加到video 标签并想暂停视频时，Safari 会返回此错误：

未处理的承诺拒绝：[object DOMError]

如果我删除 controls 属性，它可以工作，但我需要 controls 并且不想添加自定义 controls。

jQuery('.video_home_1').click(function() {
  if (jQuery(this).children("video").get(0).paused) {
    jQuery(this).children("video").get(0).play();
    jQuery(this).find(".playpause").fadeOut();
    jQuery(this).find(".home_video_overlay").fadeOut();
  } else {
    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');
  }
});

.video_home_1 {
  display: table;
  width: auto;
  position: relative;
  width: auto;
  height: 425px;
}

.video_home_1 .playpause {
  background: url(https://www.squaresigns.com/wp-content/uploads/2017/11/play.png) 58% 50% no-repeat;
  background-repeat: no-repeat;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0%;
  right: 0%;
  background-size: 64px 64px;
  top: 0%;
  bottom: 0%;
  z-index: 100;
  margin: auto;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .3);
}

.video_home_1 .home_video_overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 425px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  cursor: pointer;
}

.video_home_1 video {
  height: 425px;
  width: auto;
  padding-right: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="video_home_1">
  <video controls>
    <source type="video/mp4" src="https://www.squaresigns.com/wp-content/uploads/2017/11/SquareSigns.mp4">
    <source type="video/webm" src="https://www.squaresigns.com/wp-content/uploads/2017/11/SquareSigns.webm">
  </video>
  <div class="home_video_overlay" style="background-image: url('https://www.squaresigns.com/wp-content/uploads/2017/11/cover.png');">
    <div class="playpause"></div>
  </div>
</div>

【问题讨论】：

标签： jquery html css video safari

【解决方案1】：

也许抛弃 jquery 并做一个纯 javascript 实现？

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

希望你弄清楚我会通过 mozilla 看视频 api https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

【讨论】：

var video = document.getElementsByTagName("video"); var playButton = document.getElementsByClassName("video_home_1"); playButton[0].addEventListener("click", function() { if (video[0].paused == true) { // 播放视频 video[0].play(); } else { // 暂停视频视频[0].pause(); } });感谢您的回答。但是已经完成了纯 javascript 和相同的结果。
document.getElementsByTagName("video"); 的零索引是什么:D

【解决方案2】：

您可能需要将controls="true" 设置为this answer.

<div class="video_home_1">
  <video controls="true">
    <source type="video/mp4" src="https://www.squaresigns.com/wp-content/uploads/2017/11/SquareSigns.mp4">
    <source type="video/webm" src="https://www.squaresigns.com/wp-content/uploads/2017/11/SquareSigns.webm">
  </video>
  <div class="home_video_overlay" style="background-image: url('https://www.squaresigns.com/wp-content/uploads/2017/11/cover.png');">
    <div class="playpause"></div>
  </div>
</div>

【讨论】：

我们不需要为控件添加true，如果控件存在则意味着它是真实的并且必须显示控件按钮。并不能解决问题。

【解决方案3】：

用这个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");
        }
}   );

【讨论】：