m3u8 support

[rixvet]

m3u8 support for iPad and iPhone is a pretty useful feature for streaming live video with native support. Also listed here: https://groups.google.com/d/topic/jplayer/1b0SZQf2Oh0/discussion

This could be done as simple as adding the format to the list as it basically an container format of distribution of m4v (which is recognized by the iPad/quicktime).

DRAFT: http://tools.ietf.org/html/draft-pantos-http-live-streaming-10

Tested on iPad3

[happyworm]

Thanks Rick.

I've been looking into this myself too and plan to merge this in... There will be one change though since jPlayer needs to distinguish between audio and video in some manner through the format.

I expect they would be: m3u8a, m3u8v

Cheers

[digitaljohn]

Was this ever resolved?

Thanks...

[happyworm]

Looking into this atm... Planing to merge this with the dev branch initially. I also have a few other types to add along with the m3u8 HLS support.

I'll need to try and pull together some decent source URLs. I think i have some for an audio player, but wil have to look around for video ones... Raising this, since maybe you guys have some suitable ones I can use in a demo.

For now I'll simply add in the extra types, based on this PR and on my own development a few months back that never got as far as the code.

[happyworm]

Okay... This is my first time trying to merge a PR with a branch that is not master. I thought I got options for the branch to merge it with, but maybe I am confusing the options you get for creating the PR.

Anyway. I can do it through the command line instead.

[happyworm]

My own record:

# Step 1 make a branch
git checkout -b rickvanderzwet-master dev

# Step 2 get changes
git pull https://github.com/rickvanderzwet/jPlayer.git master

# Step 3 Review
git diff dev

# Step 4 merge
git checkout dev
git merge rickvanderzwet-master
git push

#Step 5 cleanup
git branch -d rickvanderzwet-master

[happyworm]

The commit was c393080
Currently in the [dev] branch.
Thanks and closing this PR.

[happyworm]

Release note (it will have links):
[dev] Merged Pull Request: m3u8 support by rickvanderzwet.

Now to tweak the format type names as posted before:
m3u8a, m3u8v

And then to add 1 or many 2 others... The M3U format is ok... But the PLS format has very limited support - basically only iOS and the canPlayType() is blind and ignores the codec info... But that was par for course on iOS6. ie., Adding codec info made the check worse, since "video/mp4" was maybe, while "video/mp4; codec='bullcrap'" gave as probably. So the codec info made the test worse .. And the same seemed to go for all the mime/codecs I tested in iOS6.

[justinsincl]

What's the syntax for using a m3u8a stream?

Modifying demo-08 to test I tried this:

$(document).ready(function(){
    var stream = {
        title: "Test file",
        m3u8a: "http://playertest.longtailvideo.com/adaptive/bipbop/bipbop.m3u8"
    },
    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream);
        },
        pause: function() {
            $(this).jPlayer("clearMedia");
        },
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream).jPlayer("play");
            }
        },
        swfPath: "js",
        supplied: "m3u8a",
        preload: "none",
        wmode: "window",
        keyEnabled: true
    });
});

And am getting the following error:

Uncaught RangeError: Maximum call stack size exceeded

[justinsincl]

To answer my own question :) – this works:

$(document).ready(function(){
    var stream = {
        title: "Test file",
        m4a: "http://abcradiomodhls-vh.akamaihd.net/i/testaudio/mum-2013-02-03.m4a/master.m3u8"
    },
    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream);
        },
        pause: function() {
            $(this).jPlayer("clearMedia");
        },
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream).jPlayer("play");
            }
        },
        swfPath: "js",
        supplied: "m4a",
        solution: "html,flash",
        preload: "none",
        wmode: "window",
        keyEnabled: true
    });
});```

[happyworm]

You got it correct the first time. The HLS format is mainly an Apple standard:

m3u8a: { // AAC / MP4 / Apple HLS
   codec: 'application/vnd.apple.mpegurl; codecs="mp4a.40.2"',
   flashCanPlay: false,
   media: 'audio'
},

If it works the other way, then that is a coincidence... Or rather, that browser did not get the canPlayType() test working correctly.

You did not mention a browser... That does help. I usually assume you mean Chrome if you do not state one. That seems to be the main dev browser these days.

The HLS format works best on Apple devices and browsers and was given as an option since some devs have a specific requirement. It is not recommended that you only give that format, since some browsers will not play it at all.

[justinsincl]

Yes – it seems to be working with both "m3u8a" and "m4a". My previous issues may have been an issue with the stream.

HLS isn't the only format we have, we also have HDS available. But from looking through your documentation jplayer's flash component doesn't support HDS. Is that correct?

[happyworm]

The Flash fallback supports: MP3, M4A (AAC) and M4V (AAC/H.264)

Essential jPlayer Media Formats

Using the supplied option, you can order the formats so that, for example, HLS is used if available otherwise an MP3 stream is used. {supplied:"m3u8a,mp3"} The m3u8 would be used in HTML5 if possible, otherwise the MP£ would play in either html (if possible) or in the flash fallback. This assumes the default solution option of {solution:"html,flash"} is being used. Otherwise, only the MP3 would be used except where flash is not available, such as iOS.

[mangui]

Hi, interested by HLS flash fallback support in JPlayer using https://github.com/mangui/HLSprovider ?

[thepag]

Hello @rickvanderzwet would you please sign our CLA

Cheers!

[thepag]

Thank you Rick!

[sivann]

Hello, does this still work? I'm getting
"Update Required
To play the media you will need to either update your browser to a recent version or update your Flash plugin"
with both apache/firefox and the stream declared as m3u8 or m4a