1 year ago
#302128
Alberto P
VIDEOJS player with videojs-contrib-ads Error with m3u8 hls live streaming
i use videojs player for watch streaming hls file, and with video-contrib-ads for add adv video for preroll. i get VIDEOJS: ERROR: TypeError: Cannot read properties of undefined (reading 'suppressedTracks') at restorePlayerSnapshot (videojs.ads.js:1417:43)
with different test:
- videojs with live streaming flux hls m3u8, and without plugin work.
- videojs with video-contrib-ads, with static video or static bipbop_16x9_variant.m3u8 work
- videojs with video-contrib-ads with live streaming flux hls m3u8 not work (suppressedTracks error)
- videojs on apple mobile devices not work, only without plugin.
with liveCuePoints bypass error and jump directly to streaming, without show adv:
player.ads({
liveCuePoints: false
});
code:
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.css" rel="stylesheet" type="text/css">
</head>
<body>
<video-js id="my_video_1" class=" vjs-default-skin video-js vjs-fluid " controls preload="auto" poster="https://www.lignanosabbiadoro.com/images/webcam3.jpg" >
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.9.0/videojs.ads.js"></script>
<script>
videojs('my_video_1', {
fluid: true
}, function(){
var player = this;
player.ads({debug:true});
// request ads whenever there's new video content
player.on('contentchanged', function() {
// in a real plugin, you might fetch new ad inventory here
player.trigger('adsready');
});
player.on('readyforpreroll', function() {
player.ads.startLinearAdMode();
// play your linear ad content
// in this example, we use a static mp4
player.src('images/adv.mp4');
// send event when ad is playing to remove loading spinner
player.one('adplaying', function() {
player.trigger('ads-ad-started');
});
// resume content when all your linear ads have finished
player.one('adended', function() {
player.ads.endLinearAdMode();
});
});
player.trigger('adsready');
});
</script>
</body>
</html>
javascript
jquery
video-streaming
html5-video
video.js
0 Answers
Your Answer