Safari HLS playback results in error with overrideNative

[kennypavan]

Description

Attempting to play a HLS stream in Safari with overrideNative set true results in the errors listed below.

Steps to reproduce

1. Play video on Safari with options listed below

videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeVideoTracks = false;

Results

Expected

Video playback and HLS obj available.

Error output

TypeError: Attempted to assign to readonly property
TypeError: undefined is not an object (evaluating 'this.messageHandlers')

Additional Information

This appears to be a similar issue to #949 but setting the nativeAudioTracks and nativeVideoTracks to false did not solve the issue.

videojs-contrib-hls version

5.2.0

videojs version

5.17.0

Browsers

Safari v9.0.3

Platforms

OSX 10.11.3

[gesinger]

Thanks for reporting @kennypavan . Yeah, we haven't used overrideNative for Safari, and it seems there is an issue here. It definitely warrants further investigation.

[kennypavan]

No problem. Thanks for your quick response @gesinger.

[aamelegy]

I'm using exactly those three lines in Safari.

videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeVideoTracks = false;

No errors in the console however still the native HLS is used , Same behaviour in Android Chrome

[drakunov]

This error on Safari 10.0.2, OSX 10.12.2
using
videojs.options.hls.overrideNative = true;
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeVideoTracks = false;

[Info] Source changed to auto (path, line 75)
[Error] VIDEOJS: (4)
"ERROR:"
"(CODE:3 MEDIA_ERR_DECODE)"
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support."
d {code: 3, message: "The media playback was aborted due to a corruption…media used features your browser did not support.", status: null, MEDIA_ERR_CUSTOM: 0, MEDIA_ERR_ABORTED: 1, …}
logByType (video.min.js:18:21374)
error (video.min.js:15:22741)
handleTechError_ (video.min.js:15:14221)
dispatcher (video.min.js:18:18660)
[Log] JavaScript error: InvalidStateError (DOM Exception 11): The object is in an invalid state. on line 6 for http://urlurl/contrib/videojs-contrib-hls.min.js (mobile-logger.js, line 6)
[Error] InvalidStateError (DOM Exception 11): The object is in an invalid state.
value (videojs-contrib-hls.min.js:6:29976)
(anonymous function) (videojs-contrib-hls.min.js:2:29983)
(anonymous function)
value (videojs-contrib-hls.min.js:2:30886)
value (videojs-contrib-hls.min.js:2:30728)
value (videojs-contrib-hls.min.js:2:29943)
value (videojs-contrib-hls.min.js:2:27144)
value (videojs-contrib-hls.min.js:2:26279)
value (videojs-contrib-hls.min.js:2:26082)
value
(anonymous function) (videojs-contrib-hls.min.js:3:12748)
j (video.min.js:19)`

[sbminimalistics]

Guys, what is the status of this issue?
Is there any way to overwrite native hls player on Safari?
The thing why I'm asking this is the fact that m3u8 manipulation is easy doable through videojs.Hls.xhr.beforeRequest method. Alas it's not available when native playback is on.

test environment on my machine:
videojs-contrib-hls @Version 5.5.3
Video.js 6.2.0
flags rewriting:
videojs.options.html5.nativeAudioTracks = false;
videojs.options.html5.nativeVideoTracks = false;
videojs.options.hls.overrideNative = true;

[jorisvervuurt]

+1 for @sbminimalistics: I'd like to know too, because I'd like to set the beforeRequest method in Safari too. Ain't possible right now (latest Video.js 6 release). :-(

[petrklus]

+1 for @sbminimalistics from my end too - seeing the issue on Safari 10, vjs version 5 and latest HLS.

[brycefisher]

Discussed this issue today on the Videojs Slack channel. I'm also having a possibly related problem.

One possible solution raised by the maintainers was to avoid using the html element <source>, since Safari might start using the native HLS implementation before contrib-hls has a chance to intercept it. Instead, avoid creating a <source> element inside the video tag. Manually call player.src('https://example.com/hls.m3u8') so that videojs can fully control the process.

This solution didn't work for me, but I'm on a different version of videojs and contrib-hls than the OP. It might be worth a quick try?

[gfx0]

Changing the source using an object like may also help with this problem:
player.src( { src: 'https://example.com/hls.m3u8', type: "application/x-mpegURL", withCredentials: false } )

[buccfer]

@gesinger Is there any update on this? I'm experiencing issues with Safari and overrideNative as well.

Best.

[sbminimalistics]

As far as I know there are no updates on this.
Also it depends which Safari you have in mind.
Native playback can not be overridden if "Media Source Extensions" is not supported. With that in mind, information given over here
http://caniuse.com/#search=mse
implies that at the moment native playback could not be overridden on iOS Safari doesn't matter how much effort you pay. But from my understanding Safari on Mac should be able to handle hls non natively. But as guys on this thread mentioned there are some errors popping out while playing hls non-natively on non-mobile Safari.

[tchakabam]

Hey,

The problem is just that you are getting the options wrong.

This is how it should work like:

var player = videojs('example-video', {
  html5: {  
    nativeAudioTracks: false,
    nativeVideoTracks: false,
    hls: {
      debug: true,
      overrideNative: true
    }
}});

NOTE that the hls options always are embedded inside the html5 tech options - this is the mistake in your above configuration.

This isn't a bug, I got this working flawlessly with the above snippet.

EDIT: Your Safari still needs to support MediaSource obviously, which is from Yosemite and above as far as I remember.

EDIT: Note that mobile Safari does never support MediaSource

[tchakabam]

Please check this test-page: http://tchakabam.com/test/2coders-videojs/

IMPORTANT: You need to press the "load" button to make sure videojs-hls initializes correctly with the desired config (not using native Safari HLS precisely).

This behavior (needing to press load) is only on Safari, and it may be a bug that need to be investigated.

However this example shows that generally the config can be applied to do this.

We should probably close/rewrite this issue to what it really is.

[yoshz]

I can confirm that this issue still exists even with the options set right @tchakabam.
With overrideNative enabled on Safari 8 it doesn't start at all because of the errors and on Safari 10/11 it fails to load files when you seek to a different time.

[shreysaroch]

Issue persists on and above iOS 11.2.1,videojs works perfect on and below iOS 11.0

What is the current status?

[m1neral]

Failed in safari <= 9

[Error] TypeError: Attempted to assign to readonly property. (blob:http://localhost:3000/bc24f9dd-aa20-4aef-9d5f-304314fa0b7a, line 19565)
[Error] TypeError: undefined is not an object (evaluating 'this.messageHandlers') (blob:http://localhost:3000/bc24f9dd-aa20-4aef-9d5f-304314fa0b7a, line 19569, x3)

[bamboodigital]

Confirming this is still an issue on the following versions, any updates on a solution in progress? :

VideoJS
6.6.0

videojs-contrib-hls
5.12.2

Safari
11.0.2

Errors

[Error] TypeError: Attempted to assign to readonly property.
[Error] TypeError: undefined is not an object (evaluating 'sortedSegments.audio.initSegment.byteLength')
[Error] TypeError: Attempted to assign to readonly property.
[Error] Unhandled Promise Rejection: [object DOMError]

[RafalLukawiecki]

Same issue

[pureexe]

same issue here.

[lllleeo]

same issue

[harshil93]

Happening on Chrome Mobile, Edge Mobile and Edge desktop

[harshil93]

This happens when your video.js and contrib-hls.js are loaded after your video tag is already created.

Put your js files before your video elements and everything works fine.

[chaner]

Ran it in debug, seeing undefined is not an object (evaluating 'this.tech_.hls.xhr. Somehow the xhr object is not being instantiated on iOS.

[chaner]

Debugged further, looks like MediaSource is undefined:

https://forums.developer.apple.com/thread/90712

[RafalLukawiecki]

@chaner regarding your comment on 14 Feb. The link you provided relates to iOS Safari, where Media Source is undefined. However, this issue affects the regular, desktop Safari on recent macOS, which has supported MediaSource for a while. Have I misunderstood you, perhaps? Apologies if so.

[aaronchenweb]

Same issue