HTML 5 video - auto start with no control and auto redirection option

Question

1 - I want to auto start my video when user visit my website.

2- No controls required though it is showing currently because when I remove them my video does not display at all.

3- Can I show loading bar or any loading image so when it is in loading span the user would be able to see loading bar which gives idea of video existence.

---

Below is my code

<video class="video" id="myVideo" controls>
  <source src="images/UnlimitedTeamVideo.mp4" type="video/mp4">
  <source src="UnlimitedTeamVideo.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>


<script type="text/javascript">
  $(document).ready(function(){   
   $("#myVideo").bind('ended', function(){
      location.href="homepage.php";   
   }); 
  });
</script>

Answer 1

Try with:

<video class="video" id="myVideo" autoplay>

The autoplay attribute should automatically make the browser play the video if the browser support one of the sources and is able to buffer it.

To show a load/progress bar this answer may help. Basically it uses the buffered object to display what part of the video is loaded.

Answer 2

1 - I want to auto start my video when user visit my website.

Use the autoplay attribute. See here for a list of valid HTML5 video attributes. Note that this will not work in iOS and Android - this is by design.

2- No controls required though it is showing currently because when I remove them my video does not display at all.

You need to specify a width and a height for your HTML5 video tag to get this working as expected

3- Can I show loading bar or any loading image so when it is in loading span the user would be able to see loading bar which gives idea of video existence.

Yes you can. The idea for your case scenario is to display the loading bar when the document is ready and to remove it when the play event has fired. You can have a look at the media element event list here.

All together:

<video class="video" id="myVideo" width="640" height="360" autoplay>
  <source src="images/UnlimitedTeamVideo.mp4" type="video/mp4">
  <source src="UnlimitedTeamVideo.ogg" type="video/ogg">
   Your browser does not support the video tag.
</video>
<div id="loadingSpin">Loading...</div>
<script type="text/javascript">
$(document).ready(function(){  
    $("#loadingSpin").show(); 
    $("#myVideo").bind('play', function(){
        $("#loadingSpin").hide();
     });
    $("#myVideo").bind('ended', function(){
      location.href="homepage.php";   
     }); 
});
</script>

You will need to place and style with CSS the loadingSpin item but I guess you can take it from here :)