JWPlayer - Play After 75% Bufferred

Tips and tricks developing for the web ...
User avatar
magicrat
Site Admin
Posts: 15
Joined: Sun Dec 14, 2014 12:33 pm
Location: Manassas, VA
Contact:

JWPlayer - Play After 75% Bufferred

Postby magicrat » Tue Dec 16, 2014 12:52 pm

If you use the awesome JWPLayer to host videos on your site, you may have noticed that smooth playback is effected by both your hosting provider's ability to keep up with serving out your high quality large files, as well as the network connection to the client machine.

Both can result in choppy playback.

So ... I wrote some script that allows you to specify how much of the file the client machine must buffer BEFORE the file starts playing (and after the user presses play). It works great!

I'm currently using 75% buffer before playing.

The only limitation is that you can only have one player on a page.

You can see it in action here: http://www.magicratproductions.com/vide ... ample.html

Here's the full commented code for the example above.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Magic Rat Productions - Theater Example By Pat Flanders</title> <!--************************************************************* --> <!-- START: This is the css code that allows you to position the box on the screen over the player telling the user how much of the video has been downloaded --> <style type="text/css"> #black_status_box{ position:absolute; visibility:hidden; background-color:#000000; z-index:999; padding:8px 8px 0px 8px; /* top right bottom left */ width:200px; height:120px; top: 120px;; left: 44.4%; text-align:center; vertical-align: middle; font-size: 13px; font-style: normal; line-height: 20px; font-weight: normal; font-variant: normal; text-transform: none; color: #00ff00; text-decoration: none; border: 1px solid #00ff00; /* top right bottom left */ -webkit-border-radius: 8px 8px 8px 8px; -moz-border-radius: 8px 8px 8px 8px; -khtml-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; } #status{ position:relative; background-color:transparent; width:200px; height:5px; top: 15px; left:0px; text-align:center; vertical-align: middle; font-size: 20px; font-style: normal; line-height: 25px; font-weight: normal; font-variant: normal; text-transform: none; color: #00ff00; text-decoration: none; } </style> <!-- END: The css code that allows you to position the box on the screen over the player telling the user how much of the video has been downloaded --> <!--************************************************************* --> <!--************************************************************* --> <!-- START: This is the code that defines the amount to buffer --> <script type="text/javascript" src="../jwplayer/jwplayer.js"></script> <!-- Add the player to the page --> <script type="text/javascript"> var buffered_enough = 0; </script> <script type="text/javascript"> function Buffered50(){ var buffer_percent = jwplayer('container').getBuffer(); var state_of_player = jwplayer('container').getState(); if (buffered_enough == 1){ return; } if(buffered_enough == 0 && state_of_player == 'PLAYING'){ jwplayer('container').pause(true); } myVar = setInterval(function(){ var buffer_percent2 = jwplayer('container').getBuffer(); if (buffered_enough == 0){ document.getElementById('black_status_box').style.visibility = "visible"; document.getElementById('status').innerHTML=Math.round(buffer_percent2) + '%'; } // Set the number 75 below to the percent you want to buffer before playing - remember to do it in the html, too. if (buffered_enough == 0 && buffer_percent2 > 75){ document.getElementById('status').innerHTML=''; document.getElementById('black_status_box').style.visibility = "hidden"; buffered_enough = '1'; jwplayer('container').play(); clearInterval(myVar); return; } },1000); } </script> <!-- END: The code that adds the player to the page and defines the amount to buffer --> <!--************************************************************* --> </head> <body> <center> <!-- ************************************************************************************************ --> <!-- *** Paste video script BELOW here. *** --> <!-- ************************************************************************************************ --> <div id="container"></div> <script type="text/javascript"> jwplayer("container").setup({ flashplayer: "../jwplayer/player.swf", file:'current.mp4', <!-- Name of the video file. --> autostart: false, image: "../images/poster.jpg", <!-- This is the optional poster file (the picture of the rat head in the background when the player loads) --> bufferlength: 0, volume: 50, height: 400, width: 550, skin: "../jwplayer/mediaplayer.zip" }); </script> <script type="text/javascript"> if (buffered_enough == 0){ jwplayer('container').onPlay(function(){ Buffered50(); }); } </script> <p></p> <center> <div id="black_status_box"> The video will begin playing when it has buffered 75%. <!-- Be sure to change the number here to match what you put in the head. --> <div id="status"></div> </div> </center> <!-- ************************************************************************************************ --> <!-- *** Paste video script ABOVE here. *** --> <!-- ************************************************************************************************ --> </center> </body> </html>
-- Rat

Image

Return to “Web Development”

Who is online

Users browsing this forum: No registered users and 1 guest

cron

© 2008 MAGIC RAT PRODUCTIONS
SEE ME ON FACEBOOK
Facebook