CODEWITHSUNDEEP
htmltwitter-bootstrapvideoautoplay
Saeed Najafi
Saeed Najafi

Reputation: 71

HTML video autoplay wont stop

I am using a HTML video TAG to be able to show video on my website, I had enabled the function autoplay, but then the video would play on page reload. So I removed the autoplay function and I have:

<video width="600" height="315" style=" margin-bottom: 20px;" controls >
                      <source src="video/handi.mp4" type="video/mp4">
                    </video> 


 <script>    
        $('body').on('hidden.bs.modal', '.modal', function () {
        $('video').trigger('pause');
        });
    </script>

This works well, but now when U open a modal to watch a video it will play but you have to click on start playing button and when u close the modal it will pause the video when you stopped it, if you open the same modal you can resume the video from when it was stopped. Is there any function like auto play that when you open the modal it opens it and the video is played automatically and also I want to know if there is any reload function that when you u open any modal to watch the video it starts from the beginning not from where you stopped t.

Upvotes: 0

Views: 3340

Answers (2)

Dee
Dee

Reputation: 714

Hi according to w3schools.com if you remove the autoplay, it will stop the auto play. Here's the link to the school and code.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Upvotes: 0

Lal
Lal

Reputation: 14810

With Refernce to the answers in this page,i've tried this for you..

Please try it..

HTML

<div id="simpleModal" class="modal">
   <video id="videoContainer" controls autoplay width="560" height="315">
      <source  src="video/arch_1.mp4" type="video/mp4">
   </video> 
   <a href="" id="closeSimple">Close</a>
</div>

Script

$(document).ready(function(){
    $("#showSimpleModal").click(function() {
        $("div#simpleModal").addClass("show");
        $("#videoContainer")[0].play();
        return false;   
    });

    $("#closeSimple").click(function() {
        $("div#simpleModal").removeClass("show");
        $("#videoContainer")[0].pause();
        return false;                   
    });
});

Upvotes: 0

Related Questions