Wistia javascript api 更改视频源答案

【问题标题】：Wistia javascript api change video sourceWistia javascript api 更改视频源
【发布时间】：2017-05-20 16:03:37
【问题描述】：

我无法理解他们的 API。

首先，不知道为什么他们没有像 youtube 和 vimeo 多年来一直坚持使用 iframe 嵌入方法（和 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>

【问题讨论】：

我也有同样的问题。不知何故想出了解决方案并将其添加到下面。我希望你已经解决了。也许它会帮助别人。

标签： wistia

【解决方案1】：

您应该做的是在您的页面上拥有所有视频，然后根据点击事件显示和隐藏。（请注意，视频将从 wistia 异步获取。因此这里无需担心性能）

请查看下面的演示。

    $(".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>

【讨论】：

【解决方案2】：

我迟到了这个问题，但是如果您正在寻找不需要按照 Kiran 的建议加载所有图像的方法，您可以在执行 replaceWith 之后再次推送您的配置。


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

}

$('#btn-next').on('click', function(){
    video.replaceWith(id);
    applyConfig(id);  
});

【讨论】：