peer5 / videojs-contrib-hls.js Goto Github PK
View Code? Open in Web Editor NEWHLS library for video.js using Dailymotion's hls.js tech
License: Apache License 2.0
HLS library for video.js using Dailymotion's hls.js tech
License: Apache License 2.0
I am using HLS stream for both video and audio files. When the audio only stream is played, the subtitles are not gettign displayed whereas its getting shown for video files.
Here are two versions of the same page, one using peer5/videojs-contrib-hls, which has no audio during playback in Chrome:
https://statusrecap.com/test.html
And the other using only videojs-contrib-hls, which does have audio during playback:
https://statusrecap.com/
I am using your excellent library on another site currently under development that uses VideoJS 5 source elements, which will only work using the peer5 version of videojs-contrib-hls, but unfortunately it produces the same no audio result.
According to your README, this plugin replaces the official videojs/videojs-contrib-hls
According to them, that's not true: videojs/videojs-contrib-hls#797
The most recent stable version of HLS.js is v0.12.1
This plugin is using v0.8.9
I am trying to setup/register videojs-contrib-hls
with videojs like below but its not working, it says
a is undefined
videojs.registerComponent('Hls', require('videojs-contrib-hls'));
What is the correct way to setup videojs-contrib-hls with videojs using requirejs?
The README here says that it is replacing videojs-contrib-hls. But it is not replacing it. videojs-contrib-hls is still a live project that is being active worked on.
It would be nice if instead it just calls out that it is similar to videojs-contrib-hls.
Thanks.
Captions button does not appear when viewing a live stream with captions. Hls.js is processing captions and I can manually display by calling:
videojs.textTracks[0].mode = 'showing'
Can you point me to a brief example showing how to enable the captions button? Do I need to wire it up to call mode = 'showing' and mode = 'hidden' ?
Thank you!
Error when creating a bundle using gulp and browserify:
Error: Cannot find module 'videojs-contrib-hls.js'
Any clues on what may be happening here? I create a bundle of all 3rd party packages using a line like this in gulp.js:
extLibPackageNames.forEach(function (name) { browserify.require(name); });
All other packages work, including react, videojs, videojs-contrib-media-sources, hls.js, etc. The only problem is videojs-contrib-hls.js
Any suggestions?
Thank you!
I am getting the following error from the mediaError eventListener
Uncaught TypeError: Cannot read property 'code' of null
at HTMLVideoElement.<anonymous>
Which comes from:
// listen to error events coming from the video tag
el.addEventListener('error', function(e) {
var mediaError = e.currentTarget.error; // => null
if (mediaError.code === mediaError.MEDIA_ERR_DECODE) {
videoTagErrorHandler();
} else {
console.error('Error loading media: File could not be played');
}
});
Any idea why this is occurring?
Why does this project depend on and include the entire bundle for the videojs/videojs-contrib-hls project?
Right now the package.json depends on the other project.
The Gulpfile is bundling the entire other library.
In addition the example separated.html
file this other library is included.
However if I remove that dependency from separated.html
example the library continues to work. Does this library actually need a dependency on videojs/videojs-contrib-hls? If so, what for?
I just made the switch from @videojs/http-streaming
to videojs-contrib-hls.js
to try and fix playback of several different videos that were not working properly in @videojs/http-streaming
. However my player has a quality selector button which displays the various renditions available (1080p, 720p, 540p, etc) - and his button stopped functioning with HLS.js
If HLS.js provides events for the detection of new renditions or hooks for determining which rendition is currently playing or limiting which renditions are allowed, then adding support for videojs-contrib-quality-levels
shouldn't be impossible. If HLS.js does not provide this and instead black-boxes all of the playback details, then a pull request on HLS.js may be necessary.
Thanks for your working first.
The problem is How can i get a reference to hls?
I need to handle errors outside the videojs-contrib-hlsjs.js.
Hi,
How can i retry for the video when I gets network error. I have tried to get error using
this.player.on('error',(e)={
console.log(e)
})
But this one doesn't catch any error even though I am getting 404 error in console.
Any suggestion for this one
Thanks,
Hi, we are using hls.js+videojs-contrib-hls.js+video.js to playback live HLS content with embedded CEA 608/708 captions.
On Safari (using hls.js+videojs-contrib-hls.js via MSE, not native HLS playback), the CC button correctly appears in the video.js player control bar when the material contains CEA 608/708 captions; selecting "english" from the popup results in the proper rendering of captions.
On FireFox and Chrome, the CC button never appears.
If I try playing the source with the hls.js demo player in FireFox and Chrome (using hls.js directly on top of HTML5 video tag), the CC button shows up, and the captions render, suggesting the video.js part of this is working.
If I understand correctly, hls.js translates CEA 608/708 captions into text tracks which are then rendered by video.js and/or the HTML5 video control.
Is there additional glue code required in the videojs-control-hls.js bridge to make video.js aware of tracks in Chrome/FireFox?
I'm kind of surprised this works in Safari; it suggests that perhaps the HTML5 video element in safari is capable of handling text tracks wherein the video element in Chrome/FireFox isn't?
thoughts?
Thank you!
Ty
Hi, I'm using video.js to play live HLS stream.
This repo is stable than the video.js official video-contrib-hls
in most situations. Thanks for your works!
But I encountered that when I play live HLS stream in android webview and open fullscreen, it has no video but only audio.
Anyone has similar situations?
PS: I use 3.0.3 now
Hi,
in the error handler:
// listen to error events coming from the video tag
el.addEventListener('error', function(e) {
line
I don't know why, but sometimes mediaError
can be null.
Maybe could you just check if mediaError
is not null before doing the comparaison ?
I was wondering why this project is called "videojs-contrib-hls.js", it doesn't seem to be related to the videojs-contrib-hls plugin and "contrib" is used to signify projects offered by the org (see grunt-contrib-* for example)
Airplay using Safari on Macbook doesn't work.
on iOS it is working.
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.