streamroot / videojs-hlsjs-plugin Goto Github PK

Hello

I have been using your plugin since 2015! What I like a lot for example is the video starts after downloading only 1 segment.

But I noticed for some reasons on android, on some of my live streams, the spinner spins but the videos doesn't start if you don't click the screen. When you tap the screen, videos starts immediately because it was loaded already but it keep spinning and not autoplay.
It does it only on some of my streams, no idea why.
Been using a debugger and there is no js errors at all .

Today I tried the http-streaming plugin for videojs and I m not facing this issue. But they require 2 segments downloads to start the streams

Any ideas? thanks

I included this plugin with VideoJS 6. Help me to understand how I can listen for level switching event. I assume that we have access to these events (https://github.com/video-dev/hls.js/blob/master/docs/API.md#user-content-runtime-events), but how?

Hi,

we have the following issue on Windows XP SP2 / Chrome Version 49.0.2623.112

We have 2 sources hls & mp4 ..
without the m3u8 it works, but when hls source is added the error msg appear.

Any ideas?

I have a case, like I am pushing Two ABR Streams on my Server. The Stream works fine if i keep both the streams pushing, if in case i am not pushing one stream(Specifically lower bitrate), the the player gives me error and it does not auto switch to the another stream(Higher bitrate), is there any way to handle if any one stream is not being pushed then it should autoswitch to next available stream?

We are experiencing MEDIA_ERR_DECODE errors that are caught by the videojs player. It would seem like a sensible thing trying to call hls.recoverMediaError() in that situation, but I haven't been able to figure out how access the hls instance from the context of the videojs player, yet. Do you have any idea how to do that?

It looks like a Hls.Events.ERROR is never raised in our case so it is not possible to handle the error inside the providers _onError function. However, I think it would still be a good idea to implement something like this https://github.com/dailymotion/hls.js/blob/master/API.md#fatal-error-recovery inside this plugin.

Any help on this would be greatly appreciated. Let me know what further information could be useful for you.

Linking to hls.js repo using npm without https url. Example: "hls.js": "^0.5.11"

i'm using videojs-hlsjs-plugin v1.0.13 and i found that if we make player as autoplay, then timeupdate event and progress event are missing

The README says to use Grunt to build.
What I need is a dist build, e.g. dist/vjs-hls.min.js

i am trying to get current resolution which is being played in the player.how can i get that?

Currently when HLS.js freezes it fires several non-fatal "bufferStalled" and "bufferNudgeOnStall" errors before firing a single fatal "bufferStalled" error. All of these errors count as "media" errors, and so _errorCount["media"] is set to 6 or 7 before _handleMediaError() gets called (by the fatal one) - meaning we never attempt _hls.recoverMediaError() or _hls.swapAudioCodec()

Should be a trivial fix of moving the increment/set error count step to within the if (data.fatal) block

How to include this plugin in videojs using Nextjs.

I want to put this plugin before full screan icon, but there is not any option, i want to put this plugin in this code :

children: [
{
name: 'liveDisplay'
},
{
name: 'playToggle'
},
{
name: 'currentTimeDisplay'
},
{
name: 'timeDivider'
},
{
name: 'durationDisplay'
},
{
name: 'remainingTimeDisplay'
},
{
name: 'progressControl'
},
{
name: 'fullscreenToggle'
},
{
name: 'volumeMenuButton',
volumeBar: {
vertical: true
}
}
]

Following error is thrown on loading of the player, quality selection and fullscreen buttons are missing:
[error] > internal error happened while processing hlsManifestLoaded:'Symbol' is undefined

Just want anyone else who has problems getting the player to load completely in IE to know that you should include the polyfills before including vjs-hls.js.

Found the solution here: http://stackoverflow.com/questions/33828840/symbol-is-undefined-in-ie-after-using-babel

Just include following before including vjs-hls.js

Regards,
TV5Dev

Hi,

I'm seeing errors due the error variable not being defined here. Where is it supposed to come from?

https://github.com/streamroot/videojs5-hlsjs-source-handler/blob/master/lib/videojs5-hlsjs-source-handler.js#L70

Cheers,
-Jonathan.

Currently when a fatal error is thrown and cannot be recovered, _hls.destroy() is called, tech.error is set, and the error event is triggered. This basically halts all playback, forces an error display on the player, and makes recovery nearly impossible.

In some cases people may want to implement their own recovery logic - particularly if they have unique insights into the reason for the failure, or a special fallback case. In my case, a stream had two different M3U8 URLs. When one failed to play, the other could be used as a backup (different cameras for the same event). I therefore wishes to intercept the HLS error event and, if fatal, switch to the other camera, seek to the same currentTime(), and continue playback.

It would be nice if the entire _onError method were optional, perhaps with something like:

    var options = {
        html5: {
            hlsjsConfig: {
                ignoreErrors: true
            }
        }
    };

i am using this library for hls streaming but i does not flush the buffer when user picks specific quality any solution to that?

Hi,

I'm playing around using this player, and it's working great on Chrome / Safari.
I am however experiencing playback issues on Edge / Firefox.
Following URL playback works is very stable on Chrome / Safari:
https://asia.tv5monde.com/Test/streamroot/SampleI.html

On Edge 25.10586.0.0, it seems to loop and keep downloading the lower quality playlist (not downloading any segments)

On Windows Firefox 46.0.1 playback works for a while, until I receive the error: "The media playback was aborted due to a corruption problem or because the media used features your browser did not support." and also seems to loop and keep downloading the lower quality playlist (not downloading any segments)

Could it be that there is something wrong with the playlist format / segments?

Thanks for your help.

The same source plays flawless on http://dailymotion.github.io/hls.js/demo/
Probably need to use hls.js v0.6.x

[Log] [log] > attachMedia (vjs-hls.js, line 8819)
[Log] [log] > loadSource:https://embed.life.ru/playlist/3dd8517cb4957deb77f01dbe0b33ec31/index.m3u8 (vjs-hls.js, line 8819)
[Log] [log] > trigger BUFFER_RESET (vjs-hls.js, line 8819)
[Log] [log] > manifest loaded,4 level(s) found, first bitrate:600000 (vjs-hls.js, line 8819)
[Log] [log] > startLoad (vjs-hls.js, line 8819)
[Log] [log] > demuxing in webworker (vjs-hls.js, line 8819)
[Log] [log] > switching to level 0 (vjs-hls.js, line 8819)
[Log] [log] > (re)loading playlist for level 0 (vjs-hls.js, line 8819)
[Log] [log] > level 0 loaded [0,4],duration:20.806444 (vjs-hls.js, line 8819)
[Log] [log] > media source opened (vjs-hls.js, line 8819)
[Log] [log] > startLoad (vjs-hls.js, line 8819)
[Log] [log] > demuxing in webworker (vjs-hls.js, line 8819)
[Error] WebSocket network error: OSStatus Error -9807: Invalid certificate chain 
[Log] [log] > Loading 0 of [0 ,4],level 0, currentTime:-1,bufferEnd:-1.000 (vjs-hls.js, line 8819)
[Log] [log] > Loaded  0 of level 0 (vjs-hls.js, line 8819)
[Log] [log] > Demuxing 0 of [0 ,4],level 0, cc 0 (vjs-hls.js, line 8819)
[Log] [log] > creating sourceBuffer with mimeType:audio/mp4;codecs=mp4a.40.5 (vjs-hls.js, line 8819)
[Log] [log] > creating sourceBuffer with mimeType:video/mp4;codecs=avc1.42c015 (vjs-hls.js, line 8819)
[Log] [log] > track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5] (vjs-hls.js, line 8819)
[Log] [log] > track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.42c015] (vjs-hls.js, line 8819)
[Log] [log] > parsed video,PTS:[0.046,6.046],DTS:[0.046/6.046],nb:150,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > parsed audio,PTS:[0.000,6.060],DTS:[0.000/6.060],nb:261,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > media buffered : [0.04644444444444444,6.046445444444444] (vjs-hls.js, line 8819)
[Log] [log] > switching to level 3 (vjs-hls.js, line 8819)
[Log] [log] > (re)loading playlist for level 3 (vjs-hls.js, line 8819)
[Log] [log] > target start position:-1 (vjs-hls.js, line 8819)
[Log] [log] > target start position not buffered, seek to buffered.start(0) 0.04644444444444444 (vjs-hls.js, line 8819)
[Log] [log] > adjust currentTime from 0 to 0.04644444444444444 (vjs-hls.js, line 8819)
[Log] [log] > level 3 loaded [0,4],duration:20.806444 (vjs-hls.js, line 8819)
[Log] [log] > Updating mediasource duration to 20.806444 (vjs-hls.js, line 8819)
[Log] [log] > Loading 1 of [0 ,4],level 3, currentTime:0.0464444,bufferEnd:6.046 (vjs-hls.js, line 8819)
[Log] [log] > Loaded  1 of level 3 (vjs-hls.js, line 8819)
[Log] [log] > Demuxing 1 of [0 ,4],level 3, cc 0 (vjs-hls.js, line 8819)
[Log] [log] > track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5] (vjs-hls.js, line 8819)
[Log] [log] > track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.42c01f] (vjs-hls.js, line 8819)
[Log] [log] > parsed video,PTS:[6.046,10.846],DTS:[6.046/10.846],nb:120,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > parsed audio,PTS:[6.060,10.867],DTS:[6.060/10.867],nb:207,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > media buffered : [0.04644444444444444,10.846445444444445] (vjs-hls.js, line 8819)
[Log] [log] > Loading 2 of [0 ,4],level 3, currentTime:0.0464444,bufferEnd:10.846 (vjs-hls.js, line 8819)
[Log] [log] > Loaded  2 of level 3 (vjs-hls.js, line 8819)
[Log] [log] > Demuxing 2 of [0 ,4],level 3, cc 0 (vjs-hls.js, line 8819)
[Log] [log] > parsed video,PTS:[10.846,15.646],DTS:[10.846/15.646],nb:120,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > parsed audio,PTS:[10.867,15.650],DTS:[10.867/15.650],nb:206,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > media buffered : [0.04644444444444444,15.646445444444444] (vjs-hls.js, line 8819)
[Log] [log] > Loading 3 of [0 ,4],level 3, currentTime:0.0464444,bufferEnd:15.646 (vjs-hls.js, line 8819)
[Log] [log] > Loaded  3 of level 3 (vjs-hls.js, line 8819)
[Log] [log] > Demuxing 3 of [0 ,4],level 3, cc 0 (vjs-hls.js, line 8819)
[Log] [log] > parsed video,PTS:[15.646,20.446],DTS:[15.646/20.446],nb:120,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > parsed audio,PTS:[15.650,20.457],DTS:[15.650/20.457],nb:207,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > media buffered : [0.04644444444444444,20.446445444444443] (vjs-hls.js, line 8819)
[Log] [log] > Loading 4 of [0 ,4],level 3, currentTime:0.0464444,bufferEnd:20.446 (vjs-hls.js, line 8819)
[Log] [log] > Loaded  4 of level 3 (vjs-hls.js, line 8819)
[Log] [log] > Demuxing 4 of [0 ,4],level 3, cc 0 (vjs-hls.js, line 8819)
[Log] [log] > parsed video,PTS:[20.446,20.846],DTS:[20.446/20.846],nb:10,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > parsed audio,PTS:[20.457,20.852],DTS:[20.457/20.852],nb:17,dropped:0 (vjs-hls.js, line 8819)
[Log] [log] > media buffered : [0.04644444444444444,20.846445444444445] (vjs-hls.js, line 8819)
[Log] [log] > all media data available, signal endOfStream() to MediaSource and stop loading fragment (vjs-hls.js, line 8819)
[Log] [log] > media source ended (vjs-hls.js, line 8819)
[Log] [log] > playback seems stuck @0.0464444 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferStalledError
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2913)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0.0464444 to next buffered @ 0.04644444444444444 + nudge 0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0.0464444 to next buffered @ 0.04644444444444444 + nudge 0.01 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > playback not stuck anymore @0.05644444444444444 (vjs-hls.js, line 8819)
[Log] [log] > playback seems stuck @0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferStalledError
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2913)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0 to next buffered @ 0.04644444444444444 + nudge 0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0.0464444 to next buffered @ 0.04644444444444444 + nudge 0.01 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > playback not stuck anymore @0.05644444444444444 (vjs-hls.js, line 8819)
[Log] [log] > playback seems stuck @0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferStalledError
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2913)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0 to next buffered @ 0.04644444444444444 + nudge 0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0.0464444 to next buffered @ 0.04644444444444444 + nudge 0.01 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    onMediaSeeking (vjs-hls.js:2468)
    onMediaSeeking
[Log] [log] > playback not stuck anymore @0.05644444444444444 (vjs-hls.js, line 8819)
[Log] [log] > playback seems stuck @0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferStalledError
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2913)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0 to next buffered @ 0.04644444444444444 + nudge 0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0.0464444 to next buffered @ 0.04644444444444444 + nudge 0.01 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > playback not stuck anymore @0.05644444444444444 (vjs-hls.js, line 8819)
[Log] [log] > playback seems stuck @0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferStalledError
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2913)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0 to next buffered @ 0.04644444444444444 + nudge 0 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > adjust currentTime from 0.0464444 to next buffered @ 0.04644444444444444 + nudge 0.01 (vjs-hls.js, line 8819)
[Error] HLS.js error: mediaError - fatal: false - bufferSeekOverHole
    _onError (vjs-hls.js:88)
    (анонимная функция) (vjs-hls.js:45)
    emit (vjs-hls.js:299)
    trigger (vjs-hls.js:6205)
    trigger
    _checkBuffer (vjs-hls.js:2930)
    doTick (vjs-hls.js:2200)
    tick (vjs-hls.js:1923)
    tick
[Log] [log] > playback not stuck anymore @0.05644444444444444 (vjs-hls.js, line 8819)

Is it worth wrapping attachVideojsStreamrootProvider(window, window.videojs); in a test for if the browser can handle HLS natively?

if (!document.createElement('video').canPlayType('application/vnd.apple.mpegURL')) {
    attachVideojsStreamrootProvider(window, window.videojs);
}

I've noticed that Safari really struggles with HLS.js and so its probably worth letting it use its native support of HLS.

Pull request: #7

It appears that 608 captions that come in through HLS aren't being presented back to the video.js. These are supported from HLS.js.

When attempting to build a distribution that includes videojs5-hlsjs-source-handler with Webpack, Babel and Uglify, the following exception occurs:

ERROR in video-c9d821f60adba8a625ac.js from UglifyJs
Unexpected token: name (QualityMenuItem) [./~/videojs-quality-picker/lib/quality-menu-item.js:3,0][video-c9d821f60adba8a625ac.js:36836,6]

There is not any live example , i have spent a lot of hours trying to config your plugins but i did not succeed.

i want to add a quality picker with auto and for example 360 240 p options.

I have same error: https://circleci.com/docs/git-npm-install

VideoJs renewed documetation and opens by default for v6.0.0-RC.2
I think we will see 6 version soon, and also will be good have new hlsjs handler.

is it getting the lowest bitrate source automatically on mobile ?

HLS.js is now on v0.12.4 which includes two hotfixes (including an important fix for Internet Explorer): https://github.com/video-dev/hls.js/releases

Hey. I'm working on my private streaming server and I noticed that I have delay on my player (+20 seconds). I changed config in my nginx but that did help only a little. I noticed that I can set player.playbackRate(2) and that will move player forward and reduce delay to something around 9-10 seconds which is great. But playback is unwatchable with that speed and it's buffering and waiting every few seconds. Is there an option to force player into playing only latest content? Especially if someone pauses for a second or two. Basically an ability to move playback forward on demand/automatically if delay is longer than 20 seconds?

Could you make a release, or add dist scripts to the repo? It would be really helpful for testing purposes.

if autoStartLoad is set to false, according to this document i will have to make an explicit call to start loading ie) hls.startLoad(startPosition=-1) . for this i need the underlying hls instance.

is there any way i can get that instance?

This lib works great for me in all browsers except IE11. In the network log I can see the m3u8 manifest is loaded, and then the first .ts shows up as well but apparently doesn't continue loading. The video.js player shows the controls and hides the poster as if it's ready to start playing the video, but total time is shown as zero and nothing happens.

If I just swap out videojs-hls.js for videojs-contrib-hls it works fine in IE11, but I find hls.js is better overall in other browsers, so I would really like for this lib to work in IE11 as well.

Do you have any idea what the problem might be?

What would the process be to get this functioning if we're using Gulp instead of Grunt?

Thanks

Hi,

hls.js 0.13.2 has been released (https://github.com/video-dev/hls.js/releases/tag/v0.13.2) and includes a bugfix I'm keen to test for my use case.

To update videojs-hlsjs-plugin to use hls.js 0.13.2 rather than 0.12.4, can you please advise if it is simply a case of updating the dependency in package.json and re-running npm install and npm run build?

Or are there likely to be compatibility considerations?

Thanks

Error: Cannot find module 'hls.js' from 'c:\node\grunt\videojs-hls\lib'

I have the following code that I'm processing with Webpack:

import videojs from "video.js/core";
import hlsSourceHandler from "videojs-hlsjs-plugin";

hlsSourceHandler.register(videojs);

When I compile this code using Webpack and attempt to run the output main.js, I get the following error:

TypeError: videojs_hlsjs_plugin__WEBPACK_IMPORTED_MODULE_3___default.a.register is not a function

When I try console.log'ing the plugin:

console.log(hlsSourceHandler):

all I see is an empty object:

Object { }

It seems like the exports may not be correct. I tried looking at the actual distributed file in my node_modules directory to understand, but there was just a single minified javascript file there. It wasn't very easy to make sense of it.

Hi there, curious if you can describe when and why someone would prefer to use this library (I guess in particular hls.js vs the videojs 'native' ones) - would be nice to see that in the readme maybe?

Thanks!

The latest version of hls.js is v0.7.4, videojs5-hlsjs-source-handler uses its v0.5.5.

For various reasons someone may wish to remove quality levels in a VideoJS plugin:

• Limiting access to 1080p to paid subscribers
• Removing a quality level if a TS file 404's to avoid automatically switching back to it in the future
• Selecting only the profiles that are supported on a particular device if you have 540p-main and 540p-baseline
• etc

Currently the following code will lead to errors:

var player = videojs("my_player");
player.qualityLevels().removeQualityLevel(player.qualityLevels()[0]);

When this happens, the _toggleLevel method throws an error because this[i] is undefined. Looking into it a bit, it seems like removing any quality level other than the last one shifts the index of all other levels. So after removing quality level 0, the former "quality level 1" will become the new "quality level 0", the former "quality level 2" will become the new "quality level 1", etc - and "quality level X" (the last one in the list) will be "undefined"

However the _toggleLevel method is bound with a particular quality level's ID. This means that the wrong quality level is accessed after one has been removed

It should be possible to work around this by scanning the list for the appropriate level each time. For instance:

var selectedLevel = null;
for (var i = 0; i < this.length; i++) {
    if (this[i].id === level) {
        selectedLevel = this[i];
        break;
    }
}
if (selectedLevel) {
    if (typeof toggle === "boolean") {
        selectedLevel._enabled = toggle;
        _relayQualityChange(this);
    }
    return selectedLevel._enabled;
}

I just forked this library so I could update to HLS.js v0.12.4 and fix the module issue described in #89

I then tried playing the following M3U8:

https://vcloud.blueframetech.com/file/hls/84284.m3u8

The video did play, but only after buffering about 4 minutes worth of data (which took roughly 15 seconds to load on my bandwidth). While waiting I was staring at a big play button.

At first I thought this was an issue with HLS.js, but then I tried out their demo player:

https://hls-js.netlify.com/demo/

The video began playing almost instantly. I'm not sure what the different is yet, and I'm looking into various configuration options to try and understand.

videojs.Hls.xhr.beforeRequest can be used to parse a http request. Where the handler is not invoked when the plugin is used. Let me know how this can be achieved.

this command did not work .

npm install --save videojs5-hlsjs-source-handler

Previously I was using a fork of the videojs-hlsjs-plugin library in my project so I could update HLS.js and make a few tweaks to the code.

I noticed recently that subtitles weren't working (at all) for me, so I decided to try using the latest version of the plugin to see if maybe it's a bug that was fixed, or an incompatibility between my version of the plugin and my version of HLS.js.

At first I installed like so:

npm install --save videojs-hlsjs-plugin

This gave the warning:

npm WARN deprecated [email protected]: Deprecated in favor of @streamroot/videojs-hlsjs-plugin

So I tried out @streamroot/videojs-hlsjs-plugin:

npm uninstall --save videojs-hlsjs-plugin
npm install --save videojs-hlsjs-plugin

In my initialization code (I'm using Webpack for building, so ES6 imports work just fine) I originally had the following code, which was working with my fork:

import videojs from "video.js";
import hlsPlugin from "videojs-hlsjs-plugin";

hlsPlugin.register(videojs);

I updated videojs-hlsjs-plugin to @streamroot/videojs-hlsjs-plugin and my video failed to load, throwing the error:

TypeError: hlsPlugin.register is not a function

I tried using require instead of import per the README, but got the same error:

import videojs from "video.js";
const hlsPlugin = require("@streamroot/videojs-hlsjs-plugin");

hlsPlugin.register(videojs);

At this point I can't get version 1.0.13 of the plugin to work.

Unrelated to the lack of functioning, but related to my reason for forking: Could the package on NPM be updated to include the full source code of the plugin, instead of just a minified and compiled mess? When including the plugin via a <script> tag, yes, it makes sense to have the whole bundle combined like that. However I can do my own minification after the fact, and if the original source were made available in the package then Webpack could de-duplicate dependencies between my code and yours (for instance, in a few places where I register HLS.js event listeners, I have to import HLS.js to access constants like Hls.Events.MANIFEST_LOADED).

VideoJS provides a _player.addTextTrack() method for devices and browsers which lack native text track support. When this method is utilized, _player.textTracks() will return a list of tracks, but _video.textTracks() will not return anything. This prevents _updateSelectedTextTrack from properly setting the track to "showing", and subtitles never display

In my fork I was able to fix this like so:

        function _updateSelectedTextTrack() {
            var playerTextTracks = _player.textTracks();
            var activeTrack = null;
            for (var j = 0; j < playerTextTracks.length; j++) {
                if (playerTextTracks[j].mode === 'showing') {
                    activeTrack = playerTextTracks[j];
                    break;
                }
            }

            if (activeTrack === null) {
                _hls.subtitleTrack = -1;
                return;
            }

            var hlsjsTracks = _hls.subtitleTracks;
            for (var k = 0; k < hlsjsTracks.length; k++) {
                if (hlsjsTracks[k].name === _getTextTrackLabel(activeTrack)) {
                    _hls.subtitleTrack = k;
                    break;
                }
            }
        }

Furthermore I replaced all instances of _video.textTracks with _player.textTracks() (which negated most of the _updateTextTrackList() method, as it was now comparing a list to itself)

Up until recently I had an error in chrome, and only in chrome with this lib, the hls media wouldn't play and even before the playback was started I'd receive this message:

video.min.js:22 VIDEOJS: ERROR: (CODE:2 MEDIA_ERR_NETWORK) A network error caused the media download to fail part-way. i {code: 2, message: "A network error caused the media download to fail part-way."}

Now I've updated to the revision of Thu Aug 11 12:47:08 2016 and hls media plays.
The media now plays as desired, but I am receiving these (harmless?) errors instead:

HLS.js error: mediaError - fatal: false - bufferStalledError
And sometimes (rarely) a bufferSeek error, yet the video continues to play with audio.

I found something about bufferStalledError on the github of the hls.js guys, but what's the meaning exactly of these errors, as I understand they are related to gaps or a buffer underflow?
Also, do you have any idea what changed in between this build of videojs5-hlsjs and the previous one which seems to have fixed the MEDIA_ERR_NETWORK error I had?

What is the proper way to initialize a videojs-quality-picker plugin?

If I pass to videojs

  plugins: {
    qualityPickerPlugin: {}
  }

then I get the following error:
Uncaught TypeError: Cannot read property 'on' of undefined
on line tech.on('loadedqualitydata', onQualityData);
(tech is not loaded yet)

If I call player.qualityPickerPlugin({}); after player init, the tech is loaded and loadedqualitydata event is already fired, so the quality picker won't appear.

Hi, can you please update hls.js to 1.1.1?
https://github.com/video-dev/hls.js/blob/master/MIGRATING.md

Now the latest version of hls.js is v0.8.9, but this package is dependent on hls.js v0.6.21.

hls.js v0.6.21 not work well with android 4.4, so it need update to version v0.8.9 to fix it.

Default is "auto" quality and if we have a small player it does not make sense to force big files.
Is it possible to force 360p for example on load ?

Hi,
I want to change labels and ordering in metadata payload (https://github.com/streamroot/videojs5-hlsjs-source-handler/blob/master/lib/videojs5-hlsjs-source-handler.js#L132). What would you propose?

Thanks for great plugins!!

I have a .m3u8 file with subtitles inside, such as this one. The problem is that subtitles aren't shown on screen and the Video.js subtitles/captions buttons are hidden, but using the console you can see they are added into the <video> element.

document.querySelector("video").textTracks; // returns a TextTrackList with the right TextTrack elements
var player=videojs("video");
player.textTracks().tracks_; // returns an empty array

Is this a bug or do I have to manually move the tracks from <video> to Video.js?

I'm using Video.js v5.18.4, Hls.js v0.7.6 and videojs5-hlsjs-source-handler v0.1.0

Browser: Chrome 64.0.3282.186

It is ease to occur, just call:

player.src('https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8')

or call:

player.dispose();

And you cloud reshow this bug in the example of master branch.