CODEWITHSUNDEEP
javascriptperformancehtmlvideostreaming
user1478293
user1478293

Reputation: 46

Fast loading stream - HTML/HTML5/Javascript

I have access to some live stream URLs, so I'm making an HTML5 app so I can watch them, and switch the URLs when I want. The only problem I'm having is that the stream is loading very slowly (more than 10-12 seconds before it's playing).. Once they get played they never stops or lags, so the server that's serving do have a good bandwidth. I know that it is possible to load them in like 2 seconds, but the video tag in HTML5 does not do that..

I could load 3 video tags (one for the next stream, one for previous, and one that's already playing , but that's just not too handy, and it can slow down the internet connection with 3 streams that's running at the same time).

Does anyone know how to load a stream pretty quickly, so it doesn't buffer that much before playing (it is not needed to buffer more than it needs, it will not be possible to go fast forward on the stream as it is live)? Maybe start the stream with low quality so it can start playing instantly and then turn up the quality as it gets buffered?

I don't want any flash scripts, I only want HTML/Javascript.

It would be amazing if you could help! Thank you!

Upvotes: 0

Views: 2954

Answers (1)

godofyouall
godofyouall

Reputation: 216

I have created a live/network video stream html5 app myself recently. It uses very basic code. If I have a good source video file on a server with good bandwidth then there is very little load time and the videos usually load within just a few seconds.

Here is the full code - it uses javascript to allow to toggle full screen video and the PHP code is for the form action to return the video URL:

<!DOCTYPE html>
<html>


<script type="text/javascript">
function goFullscreen(id) {
var element = document.getElementById(id);       
if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
  element.webkitRequestFullScreen();
}  
}
</script>
<body>

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
<input type="text" size="100" name="searched" value="<?php echo $_GET['searched']; ?>" /> 
<input type="submit" name="submit" value="Search" />
</form>

<br>
<br>

<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
<source src="<?php echo $_GET['searched']; ?>"/>
Your browser does not support the HTML5 video tag.  Use a better browser!
</video>

<button onclick="goFullscreen('player'); return false">View Fullscreen!</button>

</body>
</html>

Upvotes: 1

Related Questions