Video overlay issue

Question

I'd like to create a video overlay. It works great in Chrome with https://stackoverflow.com/a/30310041/8254123, but has some issues in Safari. When I add controls to the video tag and want to pause the video, Safari returns this error:

Unhandled Promise Rejection: [object DOMError]

If I remove the controls attribute it works, but I need controls and don't want to add custom 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>

score 0 · Answer 1 · answered Nov 13 '17 at 19:50

0

Maybe ditch jquery and do a pure javascript implementation?

Or have seperate logic that has a more fluid use in javascript. for which browser type.

:)

Hope you figure it out I'd look at the video api through mozilla https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

answered Nov 13 '17 at 19:50

Evil Dr. PorkChop

364
2
9

var video = document.getElementsByTagName("video"); var playButton = document.getElementsByClassName("video_home_1"); playButton[0].addEventListener("click", function() { if (video[0].paused == true) { // Play the video video[0].play(); } else { // Pause the video video[0].pause(); } }); Thanks for answer. But have done with pure javascript and same result. – Arman Danielyan Nov 13 '17 at 20:19
what is zero index of document.getElementsByTagName("video"); :D – Evil Dr. PorkChop Nov 14 '17 at 19:53

score 0 · Answer 2 · answered Nov 13 '17 at 20:11

You may need to set controls="true" as in 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>

We don't need to add true to controls, if controls exist it's mean it true and must show control buttons. And it not solve the problem. — Arman Danielyan, Nov 13 '17 at 20:37

score 0 · Accepted Answer · answered Nov 14 '17 at 15:52

Resolved it with this js code

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

Video overlay issue

3 Answers3