Wistia javascript api change video source

Question

I am having trouble understanding their api.

First, not sure why havent they sticked to iframe embed method (and api appearance) for consistency like youtube and vimeo have been doing for years.

So after a lot of digging, I have this to change video source. I am still not sure if this is the best method to embed video?

When I use replaceWith the problem is that events ("play" in this example) are not heard any more.

//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>

//body

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

Answer 1

What you should do is have all the videos on your page and then show and hide based on click event. (Note that the videos will come asynchronously from wistia. So no need to worry about performance here)

Please check the demo below.

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

Answer 2

I'm late to this question, but If you are looking for method that doesn't require you to have all images loaded as suggested by Kiran, you can push your config again after your do 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);  
});