Question

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

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

如果我删除了controls属性，但我需要controls，并且不想添加自定义controls。

＆＃13;

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');
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

也许ditch jquery并做一个纯粹的javascript实现？

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

：）

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

Answer 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>

Answer 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");
        }
}   );

视频叠加问题

3 个答案: