Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

JWPlayer 6: different sources for modes


Hi

In JWPlayer 5 it is possible to set different file sources for different modes, like:

bc.. jwplayer('FlashDiv').setup({
'file': '/files/360p-H.264-1000Kbps-25fps.mp4',
'controlbar': 'over',
'width': '500',
'height': '314',
'provider': 'http',

modes: [{
type: 'flash',
src: '/scripts/jwplayer/player.swf',
config: {
provider: 'http',
'levels': [{
bitrate: 1081,
file: "/files/360p-H.264-1000Kbps-25fps.mp4",
width: 640
}, {
bitrate: 2065,
file: "/files/480p-H.264-2500Kbps-25fps.mp4",
width: 860
}]
}
}, {
type: 'html5',
config: {
provider: 'video',
'levels': [{
bitrate: 1081,
file: "/ifiles/360p-H.264-1000Kbps-25fps.mp4",
width: 640
}, {
bitrate: 2065,
file: "/ifiles/480p-H.264-2500Kbps-25fps.mp4",
width: 860
}]
}
}]

});



But in JWPlayer 6 the modes configuration block is removed.

Is there any way to set different sources to 'flash' and 'html5' modes in JWPlayer 6?

It is needed because flash version need use 'mod_h264_streaming' module, but html5 doesn't work with it.

28 Community Answers

JeroenW

JW Player Support Agent  
0 rated :

It’s not possible to set different sources in JW6, but if you simply discard the providers and modes block, all works in JW6.

Next, set the global option “startparam” to “starttime” and MP4 pseudo-streaming in Flash is enabled.

JW Player

User  
0 rated :

I use this:
http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Internet-Information-Services-IIS7-Version2
for pseudo-streaming, it requires "startparam" : "start". Do you mean some other pseudostreaming module to work with?
If i try this script code:

bc.. jwplayer('FlashDiv3').setup({
sources: [{
file: '/files/360p-H.264-1000Kbps-25fps.mp4',
height: 360,
width: 640
}, {
file: '/files/480p-H.264-2500Kbps-25fps.mp4',
height: 480,
width: 860
}],


'width': '500',
'height': '314',
startparam: 'start'
});



It works on Flash, but doesn't on iOS. But if i change url to file to /ifiles/*** on which ModH264Streaming module is not used - it works fine on iOS but doesn't on Flash...

JW Player

User  
0 rated :

Sorry, the post from Almazen is also mine...

JeroenW

JW Player Support Agent  
0 rated :

Your setup should work great, on both iOS and Flash. Do you have an example page to look at?

JW Player

User  
0 rated :

But it doesn't =(
This site is in internal network but tomorrow i will create test site for it and post the link here.

JeroenW

JW Player Support Agent  
0 rated :

OK, great. We should have a similar test setup, which does work fine :(.

JW Player

User  
0 rated :

Here is the example site: http://jwtest.dev.alp.ru/

Two players on page, they have only one difference:
first one opens files from "/files/", second - from "/ifiles/"

ifiles - is virtual directory to files, so files are same
but there is section in web.config:
bc.. <location path="files">
<system.webServer>
<handlers>
<add name="ModH264Streaming" path="*.mp4" verb="*" modules="ModH264Streaming" resourceType="File" preCondition="bitness32" />
</handlers>
</system.webServer>
</location>

which turns on ModH264Streaming for '/files/'

So, the first video works fine on flash, but doesn't work on html5
Second - works fine on html5 but doesn't work correctly on flash...

JW Player

User  
0 rated :

So, any suggestions?

JeroenW

JW Player Support Agent  
0 rated :

It looks like range-requests are disabled in the version with mod_h264. This header is used by HTML5 browsers to do the in-video seeking. Can you take a look at that?

JW Player

User  
0 rated :

It is module, that mentioned here:
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12534/video-delivery-http-pseudo-streaming
Version - http://h264.code-shop.com/trac/wiki/Mod-H264-Streaming-Internet-Information-Services-IIS7-Version2

The way it works on JWPlayer 5 is described here:
http://www.longtailvideo.com/support/forums/jw-player/servers-and-streaming/28309/http-pseudo-streaming-from-iis#comment-158051

So, yes, possibly that module doesn't work fine with ranges header... But is there any method to bypass module in JWPlayer 6 like it can be done in JWPlayer 5 with setting it up with different sources?

JeroenW

JW Player Support Agent  
0 rated :

It’s currently not possible to bypass the module. It’s also a little strange you are seeing this issue, since we do not while using the same mod. I need to test it a bit more…

JW Player

User  
0 rated :

Any movements? =)

JeroenW

JW Player Support Agent  
0 rated :

No, nothing new. I can confirm it working for us on various CDNs (Edgecast, Bitgravity, Limelight).

JW Player

User  
0 rated :

Thanks for trying.

If i will find a solution - i'll post it here.

JW Player

User  
0 rated :

GnTYyYT has right. Same problem. in jw5 solved with setting a php script to serve the video instead of the default video path. In the php script i menaged the ranges header myself so i worked fine in iOS. Can't do this in jw6 :( . I am sorry to say this because as developer i undersand how it feels when someone says you that you haven't done a really good job . Jw6 is more practic and more beautiful but jw5 functionality is still the best .

JeroenW

JW Player Support Agent  
0 rated :

A little hack may be bypassing the module by setting its “type” to “flv”. Something like this:

jwplayer("myDiv").setup({
  sources: [{
    file: "http://example.com/mod_h264/video.mp4",
    type: "flv",
  },{
    file: "http://example.com/plain_download/video.mp4"
  }],
  primary: "flash",
  startparam: "start"
});



It's a little hacky, but should do the trick. 

JW Player

User  
0 rated :

Thanks for hint, I'll try it. For now i slightly modified jwplayer.js to replace path of files when html5 is used, but your solution looks better.

JeroenW

JW Player Support Agent  
0 rated :

OK great. Your solution seems good too, but beware of player upgrades…

JW Player

User  
0 rated :

Hello Jeroen

I too would like a way to do modes in JW6.

I tried your example above here with (JW6.2 beta) for mp4:
http://www.globaltimoto.com/games/brazil/capoeira/test/test-modes.php

The various issues are:

1. Though the player defaults to playing the "flv" type file the seeking does not work as expected. It seems to jump to just before the end of the file no matter where I click on the timeline.

2. The quality menu lists the other file that is supposed to be for the HTML5 playback. That's confusing and unusable if you desire multiple qualities via both Flash and HTML5.

In other tests:

3. If the "flv" file is larger than the player canvas the player will prefer to play a smaller width file which might be the non "flv" file.

I used modes in JW5 to serve pseudo stream for Flash, http stream for HTML5/iOS.
http://www.globaltimoto.com/games/brazil/capoeira/video-art-of-disguise/

This allowed me to have seeking and unbroken subtitle/captions for all cases. Which is great.

Is there another way to achieve the same in JW6 ?

JeroenW

JW Player Support Agent  
0 rated :

Why are you loading FLV + MP4? The FLV is 100% redundant. We also support pseudo-streaming for MP4 files in Flash.

JW Player

User  
0 rated :

Sorry for any confusion.

I understood from your example

bc.. jwplayer("myDiv").setup({
sources: [{
file: "http://example.com/mod_h264/video.mp4",
type: "flv",
},{
file: "http://example.com/plain_download/video.mp4"
}],
primary: "flash",
startparam: "start"
});


that

bc.. type: "flv"


should be placed beside the .mp4 to hack in a way to support different locations to the mp4 files.

I'm not loading .flv files.

Just attempting to load the same file through a different URL as in my examples using JW5.

video.domain.com/ = streaming module disabled
domain.com/video/ = streaming module enabled

So if I follow your example:

bc.. jwplayer("myDiv").setup({
sources: [{
file: "http://domain.com/video/file.mp4",
type: "flv",
},{
file: "http://video.domain.com/file.mp4"
}],
primary: "flash",
startparam: "start"
});


I get the issues 1, 2 and 3 listed in my previous post.

JeroenW

JW Player Support Agent  
0 rated :

Hmm, that’s an interesting combo of issues, indeed not solved with my example. Perhaps then it’s better to detect Flash support (or HTML5) manually and change the config based upon your findings.

Our Flash/HTML5 detection test in our HTML5 report provides some JavaScript snippets for doing so:

http://www.longtailvideo.com/html5/flash/

JW Player

User  
0 rated :

Err, read through that page, but didn't see the snippets you mentioned.

I'm a bit wary of doing the detection myself anyway. It's one of the main reasons I like JW Player, not having to worry about the complexities of detection.

Is the "modes" feature from JW5 completely off the roadmap for JW6 ?

JeroenW

JW Player Support Agent  
0 rated :

The snippets are in the source code of this page.

The “modes” feature is indeed not on the roadmap. Your setup is also too much of an edge case to re-introduce it – the real problem is the streaming module not working nice with HTML5.

JW Player

User  
0 rated :

Yes, time to dump pseudo streaming, and encode webm.

I've now setup the JW6 player with an inline playlist for quality levels in mp4 (sans pseudo) and webm.
http://www.globaltimoto.com/games/brazil/capoeira/test/test-modes.php

Much cleaner and simpler to think about. Death to Flash, long live HTML5.

So now I would like to know if there is a way to set the default quality level for initial playback to the lowest quality ?

Currently my iOS device loads a heavier file and since bitrate switching is not available, nor the option to change quality, there is no way to downgrade the quality for smoother playback in iOS.

JeroenW

JW Player Support Agent  
0 rated :

An option to set a default video quality (and caption track) is coming in 6.3

JW Player

User  
0 rated :

I found a solution to this by tweaking IIS into serving same mp4 with and without the ModH264Streaming based on request header containing 'Range' string.
I published screencast to make it easy to follow: http://www.youtube.com/watch?v=CC4tXSj3fxU
In short, this screencast explains how it is possible to have IIS 8 load same mp4 by using different module to generate the outcome for pseudostreaming, so it would be compatible at the same time between HTML5 and Flash mode. The differentiation is done based on the header sent by the browser, which contains the 'Range: bytes=...' instruction when it's HTML5, while when using flash mode, the URL sends the bytes/starttime needed, so Range is not being used. The reason why IIS doesn't correctly handle the 'Range' call always is because of the ModH264Streaming.dll module which is getting associated with .mp4 and would then return response that only works for Flash, and not for HTML5 partial content (with HTTP response code = 206)
The solution is implementing by creating 2 high level folder for videos, where first contains a videos folder, and second contains videos folder which is symbolic link of the previous videos folder. Then, a mapping handler is placed only on the first higher level videos folder to specify to load Modh264Streaming for .mp4 extension. a url rewrite is done on the parent folder of those 2 higher level videos folder, which rewrites the url from the first higher level videos folder to the second higher level video folder whenever it finds a .mp4 file being server and the 'range: bytes..' string in the http request header. Note that ModH264Streaming is a 32-bit module, so the application pool needs to be set to load 32-bit modules. Additionally, in Windows 2012 (IIS 8), the ModH264Streaming cannot be placed in %windir% directory, so it only needs to be placed to a place where IIS has access (by default c:inetservwwwroot). Also note that under Windows 2008 (IIS 7.5), module mod_rewrite needs to be downloaded, and make sure when it's installed, its order of execution is higher than ModH264Streaming, so it's able to rewrite the URL and avoid loading ModH264Streaming when serving HTML5 to non flash player

Ethan Feldman

JW Player Support Agent  
0 rated :

Thank you for sharing this!

This question has received the maximum number of answers.