Question

我无法理解他们的api。

首先，不确定为什么他们没有坚持使用iframe嵌入方法（和api外观）以保持一致性，就像youtube和vimeo已经做了多年。

因此经过大量挖掘后，我有了改变视频源的方法。我还不确定这是否是嵌入视频的最佳方法？

当我使用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异步出现。因此，无需担心性能）

请查看下面的演示。

＆＃13;

if $dayofweek == 0

＆＃13;

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

＆＃13;

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

＆＃13;

Wistia javascript api更改视频源

1 个答案: