Wistia javascript apiビデオソースを変更する

Question

私はapiの理解に問題があります。

まず、youtubeやvimeoのような一貫性のためにiframe embedメソッド（とapiの外観）に固執しなかったのはなぜか分かりません。

多くの掘削の後、私はビデオソースを変更する必要があります。これがビデオを埋め込む最良の方法であるかどうかはまだ分かりません。

replaceWithを使用すると、イベント（この例では「再生」）はもう聞かれません。

//head 
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 


var video; 

window._wq = window._wq || []; 
    _wq.push({ 
    id: '479268413a', 
    options: { 
     autoPlay:true 
    }, 
    onReady: function(v) { 
     video = v; 
     video.bind("play", function(){ 
      console.log("play"); 
     }) 
    } 
}); 

$('#btn-next').on('click', function(){ 
    video.replaceWith(
    '5bbw8l7kl5', { 
     autoPlay:true 
    }); 
}); 
}); 

    </script> 

//ボディ

<div class="wistia_embed wistia_async_479268413a"></div> 

Answer 1

あなたは何をすべきページ上のすべてのビデオを持っているし、その後、クリックイベントに基づいて表示し、非表示にしています。 （ビデオはウィスチアから非同期に来るので、ここでパフォーマンスを心配する必要はありません）

以下のデモを確認してください。

$(".wistia-trigger").click(function(){ 
 
     var vid = $(this).attr("data-video-id"); 
 

 
     $(".wistia_embed").hide(); 
 
     $(".wistia_embed.wistia_async_"+vid).show(); 
 

 
     window._wq = window._wq || []; 
 

 
     // pause all videos and move time to zero 
 
     _wq.push({ id: "_all", onReady: function(video) { 
 
      video.pause(); 
 
      video.time(0); 
 
     }}); 
 

 
     // start playing current video 
 
     _wq.push({ id: vid, onReady: function(video) { 
 
      video.play(); 
 
     }});   
 
    });

.wistia_embed { 
 
    display: none; 
 
    width: 200px; 
 
    height: 200px; 
 
    float: left; 
 
} 
 

 
.wistia-trigger { 
 
float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script> 
 
<div class="wistia_embed wistia_async_479268413a"></div> 
 
<div class="wistia_embed wistia_async_5bbw8l7kl5"></div> 
 
<button class="wistia-trigger" data-video-id="479268413a"> 
 
play 479268413a 
 
</button> 
 
<button class="wistia-trigger" data-video-id="5bbw8l7kl5"> 
 
play 5bbw8l7kl5 
 
</button>