带 videojs-contrib-ads 的 VIDEOJS 播放器 m3u8 hls 直播时出错

发布于 2025-01-15 00:37:20 字数 2680 浏览 3 评论 0原文

我使用 videojs 播放器观看流式 hls 文件，并使用 video-contrib-ads 为预卷添加广告视频。我得到 VIDEOJS: ERROR: TypeError: Cannot readproperties of undefined (reading 'suppressedTracks') atrestorePlayerSnapshot (videojs.ads.js:1417:43)

使用不同的测试：

带有实时流媒体通量 hls m3u8 的 videojs ，并且无需插件工作。
videojs 与 video-contrib-ads，静态视频或静态 bipbop_16x9_variant.m3u8 工作
videojs 与 video-contrib-ads 与实时流媒体通量 hls m3u8 不起作用（suppressedTracks 错误）
videojs 在苹果移动设备上不起作用，只有没有插件。

带有 liveCuePoints 绕过错误并直接跳转到流媒体，而不显示 adv：

player.ads({
  liveCuePoints: false
});

代码：

 <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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

究竟谁懂我的在乎 2025-01-22 00:37:20

<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;
            
            // Disable liveCuePoints as suggested to bypass some issues
            player.ads({
              liveCuePoints: false,
              debug: true
            });

            // Catch and handle the error to prevent player from crashing
            player.on('error', function(event) {
              console.error('VideoJS error:', event);
              // Maybe reload the player or provide user feedback here
            });

            // request ads whenever there's new video content
            player.on('contentchanged', function() {
               player.trigger('adsready');
            });    
            
            player.on('readyforpreroll', function() {
               player.ads.startLinearAdMode();
               // play your linear ad content
               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();
               });
            });

            // Trigger ads ready after setup
            player.trigger('adsready');

            // Optionally, listen for the error specifically related to 'suppressedTracks'
            player.on('error', function(event) {
               if (event.details && event.details.message.includes('suppressedTracks')) {
                  console.log('SuppressedTracks error encountered, trying to recover...');
                  // Here you might want to re-initialize or refresh the ad setup
               }
            });
         }); 
      </script>
   </body>
</html>

<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;
            
            // Disable liveCuePoints as suggested to bypass some issues
            player.ads({
              liveCuePoints: false,
              debug: true
            });

            // Catch and handle the error to prevent player from crashing
            player.on('error', function(event) {
              console.error('VideoJS error:', event);
              // Maybe reload the player or provide user feedback here
            });

            // request ads whenever there's new video content
            player.on('contentchanged', function() {
               player.trigger('adsready');
            });    
            
            player.on('readyforpreroll', function() {
               player.ads.startLinearAdMode();
               // play your linear ad content
               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();
               });
            });

            // Trigger ads ready after setup
            player.trigger('adsready');

            // Optionally, listen for the error specifically related to 'suppressedTracks'
            player.on('error', function(event) {
               if (event.details && event.details.message.includes('suppressedTracks')) {
                  console.log('SuppressedTracks error encountered, trying to recover...');
                  // Here you might want to re-initialize or refresh the ad setup
               }
            });
         }); 
      </script>
   </body>
</html>

回复收藏 0 原文

~没有更多了~