html5 video won't start when play button is clicked

Question

I've looked everywhere for a similar problem with no luck.

I have an html5 mp4 video that won't play when the play button is clicked. I know the click is sensed because the play button highlights when clicked. The other default controls are responsive, the video just won't play.

I don't think it's communicating with the DOM correctly. The video controls are default html5

The <video> sits in a div with the class .divWrapper this div does have a prevent default to prevent a function called HandleMouseDown from firing, but this should not interfere with the play button. Especially since it has had no effect on the other video controls.

here is the html

<div class="vidWrapper">  

   <video width="430" height="261" preload="metadata" controls>  

      <source src="vids/JB_COMMERCIAL_WEB.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  
      <source src="vids/JB_COMMERCIAL_WEB.ogv" type='video/ogg; codecs="theora, vorbis"'>  
           <object width="640" height="384" type="application/x-shockwave-flash"  
            data="vids/JB_COMMERCIAL_WEB.swf?image=JB_COMMERCIAL_WEBplaceholder.jpg&file=vids/JB_COMMERCIAL_WEB.mp4">  
                <param name="movie" value="JB_COMMERCIAL_WEB.swf?image=JB_COMMERCIAL_WEBplaceholder.jpg&file=vids/JB_COMMERCIAL_WEB.mp4" />
           </object>
   </video>
</div>

Here is the prevent default snippet.

$("#" + section + "Copy").slideDown("normal", function()   
{ dropdownSection = section; document.onclick = HandleMouseDown;  
$(".vidWrapper").click(function(HandleMouseDown) {return false;});});

EDIT: I was able to get the video to play by inserting jquery to force the video to play. Now I have a different problem. The video plays but won't pause.

My question is, how do I modify the code so the video pauses when it's clicked?

Here is the newest code:

$("#" + section + "Copy").slideDown("normal", function() { dropdownSection = section; document.onclick = HandleMouseDown; $(".vidWrapper").click(function(HandleMouseDown) {return false;});   
$(".vidWrapper").click(function() {$('video', this).get(0).play();});  
}); 

Answer 1

you code looks good

1. check if the video is played directly in the browser (click'n'drop into the browser), to figure out if the video file is not broken

   2. can you play another mp4 file? if not, check this post i just wrote and check the server mime types -> Playing a movie/DVD on a website

Answer 2

For any users still stumbling across this question: The problem here is the click event handler on the .vidWrapper element and the fact that it returns false which causes the default click event to be prevented not only on the .vidWrapper element, but also on the video itself.

At the moment, the problem only appears to be present in Firefox.

The problem also occurs when using e.preventDefault instead of return false

Here is another example: https://jsfiddle.net/qpusancf/ (Tested on Firefox 53.0.3)

Removing the return false; statement from the event handler should solve the problem.

Alternatively, if you need to prevent the default event on the parent element, you could check if the event target has the class of your parent element and only prevent the default event only if it is.

Using jQuery:

$(".vidWrapper").click(function(event) {    
    if($(event.target).hasClass('vidWrapper')) {
        event.preventDefault();
        // Additional event handling code ...
    }
});

The OP is correct in saying that the other video controls are uneffected. This behaviour is probably a bug in Firefox, as the play button still works in other browsers even though the default click event on the parent is prevented.