Byte-Range Requests slow load

762 views
Skip to first unread message

Samuel East

unread,
Dec 28, 2013, 9:53:56 AM12/28/13
to jpl...@googlegroups.com

Hi All

I am streaming media from amazon s3 with jplayer i am making sure that the videos are encoded to the correct format .mp4s using web optimized  H.264 compression.

I have added all my header information below from the player are these values correct is my player excepting byte range requests?

  1. Request URL:
  2. Request Method:
    GET
  3. Status Code:
    206 Partial Content
  4. Request Headersview source
    1. Accept:
      */*
    2. Accept-Encoding:
      identity;q=1, *;q=0
    3. Accept-Language:
      en-US,en;q=0.8
    4. Cache-Control:
      no-cache
    5. Connection:
      keep-alive
    6. Host:
    7. Pragma:
      no-cache
    8. Range:
      bytes=0-
    9. Referer:
    10. User-Agent:
      Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
  5. Query String Parametersview sourceview URL encoded
    1. Expires:
      1388244177
    2. Signature:
      =keyhere
  6. Response Headersview source
    1. Accept-Ranges:
      bytes
    2. Content-Disposition:
      attachment
    3. Content-Length:
      1084857639
    4. Content-Range:
      bytes 0-1084857638/1084857639
    5. Content-Type:
      application/octet-stream
    6. Date:
      Sat, 28 Dec 2013 14:28:20 GMT
    7. ETag:
      "ecdcacf67f2b28cec1f35c482661c16f"
    8. Last-Modified:
      Sat, 21 Dec 2013 16:33:21 GMT
    9. Server:
      AmazonS3

Here is my jplayer code
var fallback = "flash,html";
   var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('safari')!=-1 || ua.indexOf('chrome')  > -1){ 
  var fallback = "html,flash";
}
   
   $("#jquery_jplayer_1").jPlayer({
       ready: function () {
           $(this).jPlayer("setMedia", {
               poster: "https:/bucket.s3.amazonaws.com/Meeting3.jpg"
           }).jPlayer("load");
       },
       play: function() { // To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
$('.jp-title-wrap').fadeOut();
$('.jp-loading').fadeOut();
},
pause: function() { 
$('.jp-title-wrap').fadeIn();
},
canplay: function() { 
$('.jp-loading').fadeOut();
},
loadeddata: function() { 
$('.jp-loading').fadeOut();
},
playing: function() { 
$('.jp-loading').fadeOut();
},
stop: function() { 
$('.jp-title-wrap').fadeIn();
},
solution: fallback,
smoothPlayBar: true,
   keyEnabled: true,
       swfPath: "/src/js",
       supplied: "m4v",
       wmode:"opaque",
       preload: "metadata",
       size: {
           width: "100%",
           height: "100%",
           cssClass: "jp-video-360p"
       }
   });

I have the flash fallback set like that because i have been having issues with multiple browsers seems to be the only way i can get it to work.

also if the browser does support html does this mean i can do progressive streaming? in chrome i can drag the slider drop and play.

but if the solution fallsback to flash in internet explorer 7,8,9 and firefox this means people viewing the video player will only be able to skip to the parts that have been downloaded, they have no way to drag to the middle of a 1 hour long video they have to wait for it to buffer before being able to drag?

Love jplayer just a bit confused with the above if someone could help with some info that would be amazing

Thanks


Mark Panaghiston

unread,
Dec 30, 2013, 8:28:06 AM12/30/13
to jpl...@googlegroups.com
It looks like your server supports Range requests. These 2 response headers are the indicators.
  1. Accept-Ranges:
    bytes
  2. Content-Range:
    bytes 0-1084857638/1084857639
As for your other problems...

A) The MIME type
You need to correct the content-type to a real value. That value is saying "Hello - I am a ZIP file". It should say "I'm a video with MP4 data." That is why browsers other than Chrome hate your url and will not play it. ie., IE9+, Firefox 25+ (win), and erm... I think Safari and Chrome should be fine though. Opera would use the Flash either way. And Firefox on OSX will use the Flash for the next 1/2 year or so.

See this doc for more info:
http://jplayer.org/latest/developer-guide/#jPlayer-server-response

B) Flash does not range request.
The flash you get on Youtube does not use range requests, it uses lighttp servers, where you send the start point and the media loads from there. It is like a range request, but different... You request a different URL with a ?t=42 (or whatever the syntax is) on the end and you get from the 42 second.

The best way to solve the problem is to use 2 formats. Then all recent browsers will either play the MP4 or the WebM file. IE8 and below will continue to use the Flash, but that is a small minority of people... It depends on your target audience of course.

Samuel East

unread,
Jan 7, 2014, 4:10:48 AM1/7/14
to jpl...@googlegroups.com
Brilliant thanks for the in depth response Mark


--
You received this message because you are subscribed to a topic in the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jplayer/b9z4wC9Jclo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jplayer+u...@googlegroups.com.
To post to this group, send email to jpl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jplayer.
For more options, visit https://groups.google.com/groups/opt_out.



--
Samuel East - Web and Mobile Application Developer

--

170  Newport Rd  / Cardiff / CF24 1DL
Reply all
Reply to author
Forward
0 new messages