我的 videojs Vast 播放器无法加载视频 Flash 广告答案

【问题标题】：My videojs Vast player failed to load video flash ads我的 videojs Vast 播放器无法加载视频 Flash 广告
【发布时间】：2016-03-11 10:05:16
【问题描述】：

您可以在此处看到示例https://github.com/theonion/videojs-vast-plugin,the 播放器在主视频之前播放视频广告。但是当我将广告商提供的网址放在我自己的 HTML 页面中时，没有广告，我必须点击播放按钮然后主视频将开始。这是代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Video.js VAST Example</title>

  <!--<link href="http://vjs.zencdn.net/4.7.1/video-js.css" rel="stylesheet">-->
  <link rel="stylesheet" href="css/video-js.css">
  <link rel="stylesheet" href="videojs.vast.css">
  <link href="lib/videojs-contrib-ads/videojs.ads.css" rel="stylesheet" type="text/css">
  <link href="videojs.vast.css" rel="stylesheet" type="text/css">
  <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
  <style>
    .example-video-container {
      position: absolute;
      top: 30px;
      left: 50%;
      margin-left: -315px;
    }
    #vid2 {
      position: absolute;
      top: 30px;
    }
  </style>
  <!--[if lt IE 9]><script src="lib/es5.js"></script><![endif]-->
  <!--<script src="http://vjs.zencdn.net/4.7.1/video.js"></script>-->
  <script src="js/video.js"></script>
  <script src="lib/videojs-contrib-ads/videojs.ads.js"></script>

  <script src="lib/vast-client.js"></script>
  <script src="videojs.vast.js"></script>
</head>
<body>

  <div class="example-video-container">
    <video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto"
        poster=""
        data-setup='{}'
        width='710'
        height='500'
        >
      <source src="v1.mp4" type='video/mp4'>
      <!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>-->
      <p>Video Playback Not Supported</p>
    </video>
  </div>

  <script type="text/javascript">

    console.log(returnCitySN["cip"]+','+returnCitySN["cname"]);
    videojs('vid2',{}, function () {
      var timestamp=Math.round(new Date().getTime()/1000);
      console.log(timestamp);
      var player = this;
      player.ads();
      player.vast({
         url:'https://p.algovid.com/vpvast?p=99974938&cb=' + timestamp + '&d=https%3A%2F%2Fh5.xcloudgame.com&w=710&h=500'
      });
      player.on('readyforpreroll',function(){
        player.ads.startLinearAdMode();
        console.log('adsstart');
        player.one('ended', function() {
          player.ads.endLinearAdMode();
          console.log('adsend');
        });
      });

    });
  </script>

</body>
</html>

xml 文件返回这个。

<VAST version="2.0">
<Ad id="VPAID">
<InLine>
<AdSystem version="1.0">Cedato</AdSystem>
<AdTitle>Cedato VPAID Ad Manager</AdTitle>
<Impression />
<Creatives>
<Creative sequence="1">
<Linear>
<Duration>00:00:30</Duration>
<MediaFiles>
<MediaFile delivery="progressive" width="710" height="500" scalable="1" type="application/x-shockwave-flash" apiFramework="VPAID">https://c.algovid.com/player/cedato_vpw_ima_101.82.swf?vp=378&p=99974938&sid=&w=710&h=500&h=500&w=710&pv=102.83&d=https%3A%2F%2Fh5%2Excloudgame%2Ecom</MediaFile>
<MediaFile delivery="progressive" width="710" height="500" scalable="1" type="application/javascript" apiFramework="VPAID">https://c.algovid.com/player/cedato_vpaid_102.83.js?p=99974938&sid=&w=710&h=500&h=500&w=710&pv=102.83&d=https%3A%2F%2Fh5%2Excloudgame%2Ecom</MediaFile>
</MediaFiles>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>

有没有人可以告诉我如何解决这个问题？

【问题讨论】：

标签： javascript video video.js vast

【解决方案1】：

Afaig，videojs-vast-plugin 无法播放 VPAID。

例如，您将需要 videojs-vast-vpaid 插件。

很遗憾，我无法播放该资源，因为：
AD ERROR: VAST Error: on VPAIDAdUnitWrapper.waitForEvent, timeout while waiting for event 'AdLoaded'
但这可能是由广告服务器配置引起的（也可能不接受我的推荐人），因此您需要自己找出答案。

你会在 github 上找到 videojs-vast-vpaid 插件的示例，但这是我所做的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Video.js VAST Example</title>
    <!-- VideoJs required styles-->
    <link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/demo/videojs_4/video-js.css"/>
    <!-- VideoJs.vast.vpaid required styles-->
    <link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/styles/videojs.vast.vpaid.css"/>
    <!-- DEMO required styles-->
    <link rel="stylesheet" type="text/css" href="//mailonline.github.io/videojs-vast-vpaid/demo/styles/demo.css"/>
    <!-- Web Fonts -->
    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
    <script type="text/javascript">
        // this is mandatory for IE8 !!!!!
        document.createElement('video');
        document.createElement('audio');
        document.createElement('track');
    </script>
    <!-- VideoJs required scripts-->
    <script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/demo/videojs_4/video.js"></script>
    <!-- VideoJs.vast.vpaid required scripts-->
    <script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/es5-shim.js"></script>
    <script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/ie8fix.js"></script>
    <script type="text/javascript" src="//mailonline.github.io/videojs-vast-vpaid/scripts/videojs_4.vast.vpaid.js"></script>
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
</head>
<body>

<div class="example-video-container">
    <video id="vid2" class="video-js vjs-default-skin" autoplay controls preload="auto" poster="" data-setup='{}' width='710' height='500'>
        <source src="oceans.mp4" type='video/mp4'>
        <p>Video Playback Not Supported</p>
    </video>
</div>

<script type="text/javascript">
    console.log(returnCitySN["cip"]+','+returnCitySN["cname"]);
    var timestamp = Math.round(new Date().getTime()/1000);
    var vjs = videojs('vid2',{}, function () {
        var player = this;
        var vastPlugin = player.vastClient({
            adTagUrl: '//p.algovid.com/vpvast?p=99974938&cb=' + timestamp + '&d=https%3A%2F%2Fh5.xcloudgame.com&w=710&h=500',
            //adTagUrl: '//rtr.innovid.com/r1.5554946ab01d97.36996823;cb=%25%CACHEBUSTER%25%25',
            playAdAlways: true,
            adCancelTimeout: 60000,
            vpaidFlashLoaderPath: './VPAIDFlash.swf'
        });
        player.on('reset', function () {
            console.log('vast-plugin enabled - ' +  vastPlugin.isEnabled() ? 'true' : 'false')
            if (!vastPlugin.isEnabled()) {
                vastPlugin.enable();
            } else {
                vastAd.disable();
            }
        });
    });
</script>
</body>
</html>

我用于测试的有效资源：http://rtr.innovid.com/r1.5554946ab01d97.36996823;cb=%25%CACHEBUSTER%25%25

配置可能并不完美 - 我对这个播放器不太熟悉。

希望这对您有所帮助，祝您有愉快的一天。

【讨论】：

【解决方案2】：

很遗憾，我目前无法运行测试，但根据您对问题的描述，可能需要更新此参数d=https%3A%2F%2Fh5.xcloudgame.com？

【讨论】：