streamroot / videojs-hlsjs-plugin Goto Github PK
View Code? Open in Web Editor NEWhls.js Source Handler for video.js 5
Home Page: http://www.streamroot.io
License: MIT License
hls.js Source Handler for video.js 5
Home Page: http://www.streamroot.io
License: MIT License
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?
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
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>Regards,
TV5Dev
Hi,
I'm seeing errors due the error
variable not being defined here. Where is it supposed to come from?
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] [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:
540p-main
and 540p-baseline
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.