video.js v5

[oleynikd]

Can't make this work with video.js 5:

TypeError: undefined is not an object (evaluating 'videos.Flash.extend')

Could someone please help...

[gkatsev]

The released version of contrib HLS doesn't currently support vjs 5.0. However, we're working on a version that supports vjs 5.0. Unfortunately (though, also fortunately) it's tied up with our transition to using MSE for playback to limit how much flash is used. Stay tuned.

[oleynikd]

Looking forward, thanks. It would also be great if you'd made it CommonJS compatible...

[norlin]

Is there any progress with it? Do you have MSE transition issue opened or someone just working on it? And btw what exactly need to do? :-)

[dmlap]

@norlin you can check out the state of things so far in the development branch. It's still very active right now but it won't be too long before we cut a release with video.js 5 compatiblity and MSE included.

[oleynikd]

@dmlap Could you please tell approximate schedule for video.js 5 and MSE compatible release? Thanks.

[dmlap]

video.js 5 and a new version of contrib-hls are being released TODAY (woohoo!).

[oleynikd]

Woohoo!!!!!!!! :)

[Tralapo]

Is v 1.0 delayed? The blogpost about Video.js 5.0 is speaking about it with a lot of enthusiasm, and it sounds good, but it's not released yet?

[gkatsev]

Unfortunately, it's not quite ready yet :(

[Tralapo]

Any idea when it will be, @gkatsev? And will it contain a /dist folder by then? (#167)

[gkatsev]

Sorry, not quite sure what the status is. @dmlap will be able to provide a better answer in the following week.

[sjernigan]

+1 also eagerly awaiting 1.0. Thanks for working on this and sharing the results.

[dmlap]

@Tralapo @sjernigan we discovered some errors with our test content last week and we decided to delay the official release until we took care of them. Many videos work great with the new branch, though-- please build the development branch and let us know how it works for you if you have the time!

[lardawge]

I am using development build and ran into an error in chrome. It seems that playback works but when trying to destroy the player it raises an error: Uncaught InvalidStateError: Failed to execute 'abort' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

I have no issues in Safari...

[Tralapo]

@dmlap I found out how to build this and gave the development branch a try with VideoJS 5. Worked quite well! Used it with a HLS livestream, created with Wowza. I had a few issues:

• In Firefox, the loading spinner keeps spinning while the video was already playing. It won't go away.
• In Chrome, it looks OK, apart from one problem, which is a bit specific maybe: I used to use the code below to assure the stream would always start at the most recent point again, after someone had pressed pause and play again after a few minutes

function yourSweetReadyFunc() {
  var player = this;
  player.on("pause", function () {
    player.one("play", function () {
      player.load();
      player.play();
    });
  });
};

var myPlayer = videojs('my_video_1', {}, yourSweetReadyFunc);

This does not work with VideoJS 5 and the development branch of videojs-contrib-hls. In Firefox the stream will restart but at the point I pressed pause, in Chrome the stream won't start again and goes black. 9 out of 10 times I get this in the console. Any idea?

• Edit: The HLS-stream stops after about 10 seconds in Firefox, with a 'unknown network problem' in the console. In Chrome this does not happen. I would think it's not able to grab a new chunklist?

[dmlap]

Did you turn off the media sources whitelist in Firefox? If not, you were using a refactored version of the Flash fallback. I thought live streaming was up and running there but I'll make sure we take another look.

On the Chrome-live question: this is one of the issues we're delaying release for. The underlying problem is an MSE-spec issue (in my opinion, at least) but we're looking into workarounds until there's an official solution.

Thanks for going through the trouble to build everything and try it out!

[Tralapo]

I set the media.mediasource.whitelist to false and now it keeps playing in Firefox. But that's not a workable situation then, it should fall back to Flash I would think. I can't notify all my users to disable the whitelist.

Now, in Firefox with the whitelist disabled, the behaviour with my play/pause is the same as in Chrome: black screen and network errors in the console. Not the one Chrome is showing by the way.

In Internet Explorer I get the classic The media could not be loaded, either because the server or network failed or because the format is not supported. after pause/play.

[oleynikd]

@dmlap How can I try development version with CommonJS (using browserify)? Thanks.

[oleynikd]

OK, I figured out how to build it... Have the same problems as @Tralapo mentioned.

• Firefox has the infinite spinner.
• HLS doesn't work in Opera at all.
• In Chrome I had some strange periodic problems like freezes and audio without video.

[Tralapo]

@dmlap I gave this another try with a HLS livestream created with the NGINX-RTMP module, and this stream isn't working at all. In all browsers the screen is black and the spinners keeps spinning. Nothing in the Console, I can see it's downloading chunklists and files.

Stream does work in Microsoft Edge, which has native HLS-support.

[Ivshti]

I like to mention dailymotion/hls.js here as it might be of some help

[Tralapo]

@dmlap Did a new build today, the infinite spinner in Firefox is gone. Edit: If I set media.mediasource.whitelist back to true (standard) in Firefox, I can play now (I couldn't before, so that's good), but the infinite spinner is back too. With the whitelist disabled everything is fine.

My problem about restarting in https://github.com/videojs/videojs-contrib-hls/issues/382#issuecomment-146238131 still exists.

Edit: It looks like Firefox (whitelist enabled) is choking itself. It keeps downloading the same .ts chunk over and over and over again. Pressing pause in the player won't stop it. This is when the spinner is spinning by the way. Strange thing is the stream does keep playing (not looping). Eventually Firefox will crash.

[DJaeger]

Still no release?

[mgood]

@DJaeger it sounds like there are still some playback bugs with the new version. This issue seems to be updated as they're making progress.

[DJaeger]

It's really bad to promote a release on the blog, which is much time after still not available...

[mgood]

@DJaeger the official Video.js v5 release is out and available from the main site. This issue is just regarding this plugin providing additional HLS compatibility. This is a "contrib" module, which is a common term in open source projects for software that has been contributed by the community, but not an official part of the main software. It sounds like there are a few technical issues with updating this module for the new release, but the people you see commenting here are working on it.

[DJaeger]

@mgood: That's clear to me. But the blog post for "the official Video.js v5 release" is telling "[...] have reached some major milestones. videojs-contrib-hls 1.0 [...]". (Has this text been changed? I think there was also a "release" mentioned) But here is no release of version 1.0. That shouldn't be...

[Tralapo]

Updated to Firefox 42 (64 bit version!) and HLS now stopped working at all. Video won't load, nothing. Console gives me this:

[dmlap]

@DJaeger we found issues in testing and decided we needed to delay the official release until we could resolve them. You'll notice we do have an official 1.0.0 out now but it's tagged with "next" (not "latest", yet) in npm. Right now, we feel pretty good about playback as long as you're doing VOD and you make sure your segments start with keyframes. MSE is a lot more picky about partial frame information than Flash is and stalls with videos that don't have that leading keyframe.

Right now, we're working on tricks to get MSE working without that leading keyframe requirement. We probably won't be able to get rid of it entirely but we think we can relax it a bit and make a whole bunch more HLS content work. We're also working to get live playback back to the position it is in 0.x. There are a couple fundamental issues that we're going to have to work around until some new APIs are added to MSE.

[dmlap]

@Tralapo any chance you could put an example up somewhere for us to check out?

[DJaeger]

@dmlap: So do I understand you correct, that VOD playback is mostly working and live playback is mostly NOT working? Are you able to tell me a approx. percentage of how much of VOD and live playback is working?

[Tralapo]

@DJaeger Well, you can try that for your own situation by just downloading and building the development branch? I mostly have some problems with Firefox.

@dmlap Yes, I will create an example for you later today

[Tralapo]

@dmlap Here is my example: -- link removed --

[ChiliChili]

@Tralapo, which version you use from videojs-contrib-hls (videojs.hls.min.js) and videojs-media-sources.js? Im try fire up my page with HLS stream, but so far unsuccessfully. Im try with video.js ver 4.x and 5.x and copy of your example, but it does not work.

Navigated to http://ip:9802/vhls1.html vhls1.html:9 GET http://ip:9802/videojs-media-sources.js vhls1.html:10 GET http://ip:9802/videojs.hls.min.js video.min.js:19VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video. i {code: 4, message: "No compatible source was found for this video."}e @ video.min.js:19h.error @ video.min.js:19b.error @ video.min.js:15(anonymous function) @ video.min.js:15e @ video.min.js:19

The m3u8 link works fine with OS X/iOS or ip-tv devices

[Tralapo]

@ChiliChili I use the latest build of the development branch

[ChiliChili]

@Tralapo Ok, i use the latest videojs-contrib-hls (1.2.0), and videojs-contrib-media-sources (2.3.0), with video.js 5.1.0 and the HLS stream (m3u8) still does not work.

Uncaught TypeError: videojs.Hls.PlaylistLoader is not a function videojs-hls.js:151

The line 151:

this.playlists = new videojs.Hls.PlaylistLoader(this.source_.src, this.options_.withCredentials);

[dmlap]

@Tralapo I was able to see the issue you reported in Firefox, thank you. I believe the error is because of https://github.com/videojs/videojs-contrib-hls/issues/430, which I'm trying to fix in https://github.com/videojs/videojs-contrib-hls/pull/432.

@ChiliChili: that sounds like you're missing parts of HLS. We didn't include the full distribution in the 1.x releases in npm (sorry!) so the easiest way to get going is probably to clone this project, npm install, and then grunt. The concatenated, minified file will show up in the dist/ directory.

[ChiliChili]

We didn't include the full distribution in the 1.x releases in npm (sorry!)

@dmlap Thanks a lot, it works!

[Tralapo]

@dmlap Did a new build today, still no luck in Firefox I'm afraid..

[dmlap]

@Tralapo shoot. Did you ever put together an example stream for us to take a look at?

[Tralapo]

@dmlap I do. This is the one that's causing trouble for me in Firefox: -- link removed --

[dmlap]

@Tralapo just tried out your stream using the latest code from all of our sub-projects and it was working for me in FF 42 (your example page is broken on my machine, too). We'll be making a new release in the next day or so, I think you'll be all set then. Thanks for being patient!

[Tralapo]

@dmlap Looking forward to that! Thanks for the help.

[Tralapo]

@dmlap This is freaking bizarre. I was playing around with example.html and indeed found my stream was working there. After a lot of trying, copy-paste and other stuff, I finally made my own example work in Firefox.

I found out it was still failing, because I had no poster specified.

This is working, not mentioning a poster at all:

<video id="Video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360">

This fails, an empty poster:

<video id="Video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="">

How about that............

[Tralapo]

@dmlap Although I still got a lot of error messages in the console (most of them seem to come from video.js itself by the way) I decided to go ahead and use this tech in a live environment because it's working fine with all my browsers and mobile devices.

I get a lot of complaints from people with Internet Explorer 11, especially from Windows 7. I personally use Windows 10 and Internet Explorer 11 is fine here, what would cause errors in W7 then? Is that browser much different from the one in W10? I would say it wasn't?

[Tralapo]

I found out MSE is not supported by Internet Explorer 11 in Windows 7? https://msdn.microsoft.com/en-us/library/dn594470(v=vs.85).aspx

Should it fall back to Flash then? How does that work exactly?

Edit: I see it does fall back to Flash, but the loading spinner isn't always hiding. I 'fixed' this for now by disabling the loadingSpinner completely in the data-setup.

CPU usage with Flash is exessive, much higher then with the normal version of Video.js. Is it a bug, or is that as expected with HLS?

[dmlap]

@Tralapo yes, the Flash fallback on IE11/Win7 is expected. That combo doesn't support MSE so Flash is the only option for HLS playback. If you really want HTML5 playback on that platform, you can include your video in another format like mp4, for instance, and video.js will fall back to playing that file when it detects MSE-HLS is a no-go.

We've gotten a bit off-topic in this issue :) Version 1.2.2 is fully video.js 5 compatible so I'm going to close this. If any of the other problems brought up in the comments are still occurring in the latest release, please open up new issues.