MrPug MrPug - 1 month ago 24
Javascript Question

HTML5 video Uncaught TypeError: .play is not a function

I have a problem with video autoplay after buttonc click which opens foundation modal with video to be played. When i click on button to open modal with video, it opens but video do not start playing.

In console i get Uncaught TypeError: .play is not a function error

Opening modal button:

<div data-open="movieModal" id="movieModalOpenMedium">Open</div>


Video modal:

<div class="reveal full" id="movieModal" data-reveal data-reset-on-close="true">

<video id="company-movie" controls>
<source src="/video/movie.mp4" type="video/mp4">
</video>




And script looks like:

$(document).ready(function(){
// var movie = document.getElementById('company-movie');
var movie = $('#company-movie').get(0);
$('#movieModalOpenMedium').click(function(){
movie.play();
})


})

#company-movie element is seen correctly in DOM however i cannot play it in any way.

I have tried with:


  1. $('#company-movie').play() - JQuery Object does not have play() method so for sure it will not work

  2. $('#company-movie').get(0).play();

  3. $('#company-movie')[0].play();



but neither of these ways works.

I was also trying to do this without jQuery this way:

$(document).ready(function(){
var movie = document.getElementById('company-movie');

document.getElementById("movieModalOpenMedium").addEventListener("click", function(){
movie.play();
});


})

but it also does not work.

I would be grateful for any help with it.

Answer

Try $('#company-movie')[0].play(); or $('#company-movie').get(0).play();