mksasi
commented
6 years ago 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.
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?