Giters

videojs / videojs-contrib-hls

HLS library for video.js

Home Page:http://videojs.github.io/videojs-contrib-hls/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angular 5 - VideoJS CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTE

mksasi opened this issue · comments

commented

I am using Angular 5.x with Webpack 4.1.1. The configuration are given as below:

package.json
"video.js": "6.7.3",
"videojs-contrib-hls": "5.14.1"

webpack.config.js
alias : {
'video.js' : 'video.js/dist/video.js',
'videojs-contrib-hls' : 'videojs-contrib-hls/es5/videojs-contrib-hls.js',
webworkify : 'webworkify-webpack-dropin'
}
new webpack.ProvidePlugin({
videojs : "video.js",
"window.videojs" : "video.js"
})

My Component
import videojs from 'video.js';
import 'videojs-contrib-hls';

var options = {
html5: {
hls: {
withCredentials: true
}}
};
videoJSplayeraudio = videojs('clip-video', options).ready(function() {
let sources = [{ "type": "application/x-mpegURL", "src": mediaURI, withCredentials: true}];
this.src(sources);
});

Error
After running based on this configuration, i am getting the following error:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. MediaError {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."}

But the chrome console shows the following message.
XHR finished loading: GET "https://example.com/316214e9-880c-c551-febb-7a719f3b628c/316214e9-880c-c551-febb-7a719f3b628c.m3u8".

Can someone guide to get this issue rectified?

commented

It works when I specify the source of the stream hardcoded. But it fails when setting the withCredentials and dynamically setting the src.

Working
<video id="clipaudio" crossorigin="anonymous" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" preload="auto" controls></video>

<source src="https://xxxxxxxxxxxx.amazonaws.com/test-audio/aa10a5e5-0d88-dac7-400f-f20a7dce6841.m3u8" type="application/x-mpegURL">

Not working
<video id="clipaudio" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" preload="auto" controls> </video>
When setting the source dynamically it fails, but the XHR request gets succeeded.

commented

Finally, got it working. It was an configuration issue at AWS S3 where I have to add the CORS configuration. This fixed the issue and I can play stream with subtitle in Angular 5.2.8.