CODEWITHSUNDEEP
javascriptjquery
NewBoy
NewBoy

Reputation: 1144

jQuery video overlay button

I have made attempts to create an overlay play button for my HTML 5 video. I have created an example on Jfiddle - click here-This works fine. I have tried to integrate my fiddle onto my site however i am receiving the error message Cannot read property 'paused' of undefined. Believe this has something to do with the structure of my code. Below is a snippet of how my code is set up. 

 $('.video').click(function () {
if($(this).children(".video").get(0).paused){
  $(this).children(".video").get(0).play();
  $(this).children(".playpause").fadeOut();
}else{
   $(this).children(".video").get(0).pause();
  $(this).children(".playpause").fadeIn();
}

});

HTML 

    <div class="col-md-12 video">
            <video muted loop controls poster="/assets/casestudies/marketingandcomms/ukcoffeeweek/coffee-video-poster.gif">
                    <source src="/assets/videos/coffee-video.mp4" type="video/mp4">
            </video>
            <div class="playpause"></div>

Can anyone point me in the right direction ?

Upvotes: 0

Views: 626

Answers (2)

Karthikeyan Sekar
Karthikeyan Sekar

Reputation: 333

DEMO URL: JSBIN-DEMO

JQUERY

  $('.video').on('click',function () {
       $player=$(this).find("video")[0];
    if($player.paused){
      $player.play();
      $(this).find('.playpause').fadeOut();
    }
    else{
      $player.pause();
      $(this).find('.playpause').fadeIn();

    }
     });

HTML

 <div class="col-md-12 video">
    <video muted loop controls poster="">
    <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    </video>
    <div class="playpause">PLAY</div>
      <div>

Upvotes: 0

Rami.Q
Rami.Q

Reputation: 2476

you use two different html structures with wrong JQuery Selectors.

try the Following html and Jquery Codes:

DEMO: https://jsfiddle.net/9ewogtwL/150/

<div class="wrapper">
    <video class="video">
        <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
    </video>
    <div class="playpause"></div>
</div>

with this JQuery Code:

$('.wrapper').click(function () {    
    var videoEl = $(this).find("video").get(0);
    if( videoEl.paused ){
        videoEl.play();
        $(this).find(".playpause").fadeOut();
    }else{
        videoEl.pause();
        $(this).find(".playpause").fadeIn();
    }
});

Upvotes: 1

Related Questions