<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script> <video width="300" height="150" id="my-video" class="video-js" poster="https://livetv.canbroadcast.com:7443/media/2022/acik_kayit/acik_kayit_2022-16-02__20-01-32.jpg"></video> <script> // Video source for test const sources = [ { src: 'https://livetv.canbroadcast.com:7443/media/2022/acik_kayit/acik_kayit_2022-16-02__20-01-32.mp4', type: 'video/mp4' }, { src: 'https://livetv.canbroadcast.com:7443/canlinow/acik_kayit_2022-16-02__20-01-32.m3u8', type: 'application/x-mpegURL' } ] let index = 0 // Currently loaded video source sequence number var player = videojs('my-video', { fluid: true, responsive: true, width: 380, controls: true, preload: 'auto', autoplay: 'true', // The key to realize automatic video playback sources: sources[index] }) videojs.hook('beforeerror', (player, err) => { console.log('beforeerror', index, player.src(), err) // Video.js will trigger an err=null error immediately after switching / specifying the source. Filter it here if (err !== null) { player.src(sources[++index]) } // Clear the error to prevent the error event from throwing an error on the console return null }) // Other events and hooks that can observe progress // videojs.hook('error', (player, err) => { // console.log('error') // return err // }) // player.on('loadeddata', () => { // console.log('loadeddata') // }) // player.on('loadedmetadata', () => { // console.log('loadedmetadata') // }) // player.on('loadstart', () => { // console.log('loadstart') // }) </script>
