where can read information , see examples of loading chunks html5 video?
scenario:
1. user starts play large video.
2. 10-20 seconds of video should downloaded.
3. if user watches first 10 seconds next 10 seconds should downloaded. thus, there no load if user looks first 9 seconds of video.
if use scenario reduce server load (in cases).
example:
try watch video on youtube. work this. try load half video (~3 mins) , start watch beginning. other part of video not downloaded until reach special point (~ 50 seconds before downloads point, in case).
can't find controls of buffering in html5 video. can't find controls of buffering in popular html5 based video players videojs, jplayer.
know how it?
i can't find controls of buffering in html5 video.
the .buffered property of htmlmediaelement interface, , timeranges object can that, don’t give direct control on buffering, can give control on user experience @ least. simple case uses them, here’s sample code:
<!doctype html> <html> <head> <title>javascript progress monitor</title> <script type="text/javascript"> function getpercentprog() { var myvideo = document.getelementsbytagname('video')[0]; var endbuf = myvideo.buffered.end(0); var sofar = parseint(((endbuf / myvideo.duration) * 100)); document.getelementbyid("loadstatus").innerhtml = sofar + '%'; } function myautoplay() { var myvideo = document.getelementsbytagname('video')[0]; myvideo.play(); } function addmylisteners(){ var myvideo = document.getelementsbytagname('video')[0]; myvideo.addeventlistener('progress', getpercentprog, false); myvideo.addeventlistener('canplaythrough', myautoplay, false); } </script> </head> <body onload="addmylisteners()"> <div> <video controls src="http://homepage.mac.com/qt4web/sunrisemeditations/mymovie.m4v"> </video> <p id="loadstatus">movie loading...</p> </div> </body> </html> that code detailed controlling media javascript guide on @ safari developer site. there’s media buffering, seeking, , time ranges how-to on @ mdn.
if want more direct control on buffering, need work on server side , use mediasource , sourcebuffer interfaces.
appending .webm video chunks using media source api demo; code snippet:
var ms = new mediasource(); var video = document.queryselector('video'); video.src = window.url.createobjecturl(ms); ms.addeventlistener('sourceopen', function(e) { ... var sourcebuffer = ms.addsourcebuffer('video/webm; codecs="vorbis,vp8"'); sourcebuffer.appendbuffer(onevideowebmchunk); .... }, false); 
Comments
Post a Comment