Блог

Я использую скрипт Wistia для встраивания видео на свою страницу vuejs, видео успешно встраивается с помощью их резервного сценария, как показано ниже:

         <div class="wistia_responsive_padding" style="padding:55.94% 0 0 0;position:relative;">
          <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
            <iframe :src="defaultWistiaVideo" title="Welcome Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
          </div>
        </div>
 

Теперь я хочу включить прослушивание play и end событие, чтобы изменить статус просмотра пользователя на просмотр/просмотр.
Я добавляю оба приведенных ниже сценария, как и их руководство, но это не работает.

Обратите внимание, что эти скрипты будут работать, если я помещу их в отдельный html-файл, а не в компонент vuejs

Я не уверен, как правильно настроить эти события с помощью vuejs.

 <div id="wistia_abcde12345" class="wistia_embed" style="width:640px;height:360px;">amp;nbsp;</div>
<script src="//fast.wistia.com/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("abcde12345");
wistiaEmbed.hasData(function() {
  wistiaEmbed.bind("play", function() {
    console.log("video played", wistiaEmbed.name());
  });
});
</script>
 

 <script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_abcde12345" style="width:640px;height:360px;"></div>
<script>
window._wq = window._wq || [];
_wq.push({ id: "abcde12345", onReady: function(video) {
  video.bind("play", function() {
    console.log("video played", video.name());
  });
}});
</script>
 

Вы должны поместить скрипт прослушивания событий wistia в mounted функцию, как это:

   mounted() {
    window._wq = window._wq || [];
    let context = this;
    _wq.push({ id: '_all', onReady: function(video) {
      video.bind('play', function() {
        // event handler
      });

      video.bind('end', function() {
        // event handler
      });
    }});
  }