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

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);  
});