CODEWITHSUNDEEP
ipadvideovideo.js
smrkem
smrkem

Reputation: 173

Videojs cannot play after pause and fade out on ipad

I have a page with a videojs player.

  <div id='modal-bg'>
    <div id="video-exit"></div>
    <div class="video-box-wr">
      <video id="model_vid" class="video-js vjs-default-skin" controls poster="myposter.png" data-setup='{}'>
        <source src="video.mp4" type='video/mp4'>
      </video>
    </div>
  </div>

The div with id "modal-bg" has it's display set to none in css. When the user clicks a button, the div fades in and the video starts playing.

if($('#model_vid').length>0){
        _V_("model_vid").ready(function() {
            var video_player = this;

            $("#view-video-button").click(function(){
                    $("#modal-bg").fadeIn(function(){
                        // video_player.play();                 
                    }); 
                    video_player.play();
            });

            $("#video-exit").click(function(){
                video_player.currentTime(0);
                video_player.pause();
                $("#modal-bg").fadeOut();       
            });
        }); 
    }

Works fine on desktop (Chrome, Firefox, Safaru and IE9) but not on the iPad (iOS 6.1.2).

Firstly, video_player.play() doesn't work inside the callback after fading in. With it outside the callback like in the above code it does start playing properly.

Second - when you exit the video it stops and fades out properly - but when you press play a second time the video fades in but won't play. The controls are visible but don't work and the screen is black. Exiting out still works and the player fades out properly.

A similar issue was reported here but with no solution.

Upvotes: 1

Views: 1079

Answers (1)

cnotethegr8
cnotethegr8

Reputation: 7510

I had a similar issue. I fixed the problem by adjusting the opacity. When you call display: none; / display: block; theres some reseting going on with some of the browsers. I think i also had this problem with firefox. Also another option would be setting the height to 0%, to give the appearance its gone. Hope that points you in the right direction.

Upvotes: 2

Related Questions