CODEWITHSUNDEEP
htmlvideovideo-streaming
Greg Thompson
Greg Thompson

Reputation: 894

HTML5 Video for mobile

I'm having some issues with video for mobile and HTML5. My biggest problem is that the video will play like 2 seconds and stop because not enough of the video has loaded. The video is 1:26s long and 9mb. I was testing on wifi. Is there a way that I can make the video wait til enough has loaded so it can play without issues? or what is my best option to help solve this? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1   /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">

</script>

<style type="text/css">
<!--
body {
    margin: 0px;
    padding: 0px;
    background-color:#000;
}
-->
</style>
</head>

<body>
<!--<div id = "m_loader">
<div id = "loading_hold">
<img src="d_logo.png" width="365" height="500" />
  </div>
</div>-->

<video controls="controls" autoplay="autoplay">
  <source src="reel720_3.mp4" type="video/mp4" />
  <source src="reel720_3.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body>

Upvotes: 0

Views: 270

Answers (1)

JFlo
JFlo

Reputation: 101

You can use the "canplaythrough" event. Though you may want to show some sort of progress/download indicator while this is happening.

    myVideo.addEventListener('canplaythrough', function() {
        myVideo.play();
    });

Upvotes: 1

Related Questions