Trying to set up jPlayer with an HTML5 video, and also a Flash fallback for the same video.
The HTML5 video playback is lightning fast (only about 1 second "buffer" time)!
The issue I'm having though is with the Flash fallback. That same exact video that begins playback in 1 second with the HTML5 version, takes 50+ seconds to begin playback with the Flash version (and I'm on a 1.5 Mbps DSL connection). And during all this time, there is no "progress" bar at all... just a black screen.
It's almost as if it's trying to download the entire video before it begins playback. I have tested this in Firefox, Chrome, IE9, IE8, and IE7. Same thing in all browsers. And the Flash player is up to date in all browsers. Also, I always clear my browser's cache between each test, so that I can be sure each test is accurate.
Any ideas what might cause this?
I have tried a lot of different video encoders... Sony Vegas, Handbrake, Miro, Super, Freemake, Any Video Converter, yet I get more/less the same result with each one (instant playback when using HTML5 video, but a VERY long buffer time when using the Flash fallback).
So then I thought maybe there's a MIME issue with my server, so I added the following code to my .htaccess file in the root directory...
# AddType TYPE/SUBTYPE EXTENSION
AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/webm webma
AddType audio/wav wav
AddType video/mp4 mp4
AddType video/mp4 m4v
AddType video/ogg ogv
AddType video/webm webm
AddType video/webm webmv
But that didn't make any difference.
Then as a test, I downloaded the "Big Buck Bunny" videos (m4v, ogv, webm) from the jPlayer server, and uploaded them to my server, and to my surprise, even the Flash version played back instantly! (within 1 second). Very strange.
So then for another test, I re-encoded the Big Buck Bunny videos to mp4/m4v using every encoder I have (Sony Vegas, Handbrake, Miro, Super, Freemake, Any Video Converter), uploaded all of those files to my server, then tested the Flash fallback with each of those files individually. And with every single one, it took a long time for Flash playback to begin (even the ones that I encoded to super small file sizes). Yet all of the HTML5 versions still played back instantly.
I am truly stuck as to what's causing the Flash fallback to take so long to begin playback. Over the past few days, I have tried every possible test I could think of to pinpoint the problem, but still cannot figure it out.
Any ideas?
If it helps, below is one of the pages that I am using to test this. On that particular page, I am using the exact same HTML code from one of the jPlayer demos, and I set the default solution to "flash". Only thing different is that I have re-encoded the m4v file, in order to demonstrate the Flash delay (which is about 30 seconds on my end, for this particular video)...
http://thebestinfo.org/jplayer/flash.html
And like I mentioned above, no matter what encoder I use, or how small I compress the file, there's always a huge delay when using the Flash fallback.
I would be so grateful for any help in figuring this out! Thanks in advance!!
According to the jPlayer dev guide's server response section, the behavior you're describing may be caused either by a server's failure to accept byte range requests or a lack of media length metadata in the file header.
Byte-Range Requests
Your server must enable Range requests. This is easy to check for by seeing if your server's response includes the Accept-Ranges in its header. Most HTML5 browsers enable seeking to new file positions during a download, so the server must allow the new Range to be requested.
Failure to accept byte Range requests will cause problems on some HTML5 browsers. Often the duration cannot be read from the file as some formats require that the start and end of the file is read to know its duration. Chrome tends to be the browser that has most problems if the Range request is not enabled on the server, but all browsers will have some issue even if it is only that you have to wait for all the media to load before jumping close to the end.
This problem is known to affect Jetty 6 servers with their default configuration.
A PHP function has been written by the jPlayer community that can serve media files with support for Range requests. See this jPlayer Support Group Post on the topic.
Related
I use ffmpeg to deliver my av streams(video:h264 ,baseline3.1; audio:aac,8000,stereo) to nginx,then I used iphone's chrome or safari to access this stream, and failed. But I tested it on android's chrome or pc's chome safari, they all worked.
Is there any specifical requirement on iphone?
Thanks in advance!
One of the reason you appear to be having this issue could be your server is not set up to support byte-range requests, which is necessary for media files to be able to be played back on iOS devices.
For more information, please see the Configuring Your Server section in Apple’s documentation.
You may try something like below on your site's Nginx config.
# byte-range requests
location ~ \.(mp4|m4a|m4v|mov)$ {
add_header content_disposition filename=$request_uri;
add_header accept_ranges bytes;
}
Working in IIS7.0(7.5.7600.16385) on Windows Server 2008 R2
Trying to get a video of the type .MP4 to play on a webpage.
IF the URL is specified using the actual server path, the video will play:
\\myproductionserver\wwwroot\Video\Activevideos\videotestpage.html
This is true for our production and development servers.
However if i use the actual URL:
http://example.com/Video/ActiveVideos/videotestpage.html
...it will not play
Per various information sources, I have added .MP4 as video/mp4 to my IIS MIME Types (via GUI).
Nothing works.
Thoughts on getting this to work?
==================
UPDATE:
I went to HTML5TEST.com and it says under the video section that MPEG 4 is not supported. following some suggestions from this post for IE 9 HTML5 - mp4 video does not play in IE9
I replaced my video tag with the one that shows "Your browser does not support the video tag."
When I ran my page, Your browser does not support the video tag. came up.
So...what is that telling me? Especially since if I execute the url using the actual server paths, it works?
Got it to work by putting the following in the page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /
You can add this code in the webconfig:
<remove fileExtension=".mp4v" />
<mimeMap fileExtension=".mp4v" mimeType="video/mp4v" />
After restart App pool and open you website or web app
I'm using IIS to serve mp4 videos. I get a 404 on mac/safari. It works in chrome and firefox on the same macs. The MIME is video/mp4 .
I've ran tests locally to rule out the video encoding, and the videojs. I've taken the request path directly as well, skipping the html and js, with the same results. Safari will not load the direct url to the video either.
I'm not sure where to look next?
It turns out Safari does range requests for media. IIS itself can handle this, but we are using mvc routing - and we didn't provide any handling for this. The solution is to build an action result that handles range request. We're pulling a solution based on this article
I'm using Firebug and NetExport on Linux to save all web browser communication (mostly HTTP and HTTPS requests and responses). However, in my .har file I see messages like this:
The resource from this URL is not text: http://...
Instead of these messages I want to see the actual, full binary content (not even a single bit transformed or changed or lost). How do I get that?
I have root access on the local machine. A solution using Chrome or Firefox is fine.
Please don't recommend that I download binary files manually, there are too many of them, and I need to time the downloads perfectly, with the correct set of cookies (which may expire by the time I download manually). Please don't recommend non-Linux solutions, I have access only to Linux systems. Please don't recommend Wireshark (or tcpdump), because it can't save decrypted HTTPS traffic if I don't have the private key of the server.
In about:config I've set extensions.firebug.cache.mimeTypes to a space-separated list of MIME types, restarted Firefox, and everything got saved.
application/x-shockwave-flash image/gif image/jpeg image/png application/octet-stream
Please note that some documents are still missing from the .har file, I get this:
Reload the page to get source for: http://...
I have soundmanager2 as player for mp3 sounds.
When I loading .swf file from same server as webapp its playing mp3 files normally
When I load .swf file from another server its not okay
The only change i added is:
soundManager.setup({
url: 'http://s3.amazonaws.com/mybucket/swf/'
})
In firebug>Net bookmark i can see that swf loaded but no mp3 load (when i click play in site)
I added crossdomain.xml but this not helped.
Worked according to this sample: http://www.schillmania.com/projects/soundmanager2/doc/getstarted/
Assume my webapp running locally at: http://local.dev
and swf served in another localapp running under http://local.media
so when i do:
url: 'http://local.media/swf/'
from local.dev app, its not loading nor playing.
Even for amazon it has to have crossdomain.xml :-\ even if i managed ACL well