HTML5 video Uncaught TypeError: .play is not a function

html, javascript, jquery, video, zurb-foundation

Solution

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

Problem

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: $('#company-movie').play() - JQuery Object does not have play() method so for sure it will not work $('#company-movie').get(0).play(); - $('#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.

Original source