javascript - Wistia 视频 : Adding a play/pause button overlay

Question

我正在尝试向 Wistia 托管的视频添加播放/暂停按钮。我大部分时间都在使用它，但是当我添加多个视频时，它并不针对当前视频。相反，当我点击第二个视频时，会播放第一个视频。

下面是HTML:

<div class="tqm-video-wrapper">
    <div class="tqm-video-overlay">
        <a class="tqm-play-btn">
        </a>
    </div>

    <!-- WISTIA IN PLACE VIDEO EMBED CODE -->
    <script src="https://fast.wistia.com/embed/medias/j04n260140.jsonp" async></script>
    <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
    <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
    <div class="wistia_embed wistia_async_j04n260140 videoFoam=true" style="height:100%;width:100%">&nbsp;</div>
    </div>
    </div>                          
    <!-- END WISTIA IN PLACE VIDEO EMBED CODE -->

</div>

脚本如下:

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

    _wq.push({ id: "_all", onReady: function(wistiaEmbed) { 

        var wistiaHash = $(".wistia_embed").attr("id", "wistiaGenID_" + wistiaEmbed.hashedId());
        var wistiaHashId = wistiaEmbed.hashedId();          

            // grab Wista API
            wistiaEmbed = Wistia.api(wistiaHashId);

            // when the video is stopped
            wistiaEmbed.bind("end", function() {                     
              $(this).find('.tqm-video-overlay').fadeIn("slow");
            });

            //when the video is paused
            wistiaEmbed.bind("pause", function() {
              $('.tqm-video-wrapper').find('.tqm-video-overlay').fadeIn("slow");
            });

            //when the video time changes
            wistiaEmbed.bind("secondchange", function() {
             $(this).find('.tqm-video-overlay').fadeOut("slow");
            });  

            // when you click the custom play button
            $('.tqm-video-overlay').click(function() {
                if ($(this).parent().has(".wistia_embed")) {
                    wistiaEmbed.play();
                    $(this).fadeOut("slow");
                }                       
            });     
    }
});

这是 jsfiddle 的链接:https://jsfiddle.net/eilawen/bggu5s1q/7/

有人能给我指明正确的方向吗？提前致谢。

Answer 1

替换<VIDEO_ID>使用您的 wistia 视频 ID

这行得通

<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_<VIDEO_ID>" style="width:640px;height:360px;"></div>
<button id="play">Play</button>
<button id="pause">Pause</button>
<script>
    window._wq = window._wq || [];
    _wq.push({
        id: "<VIDEO_ID>", onReady: function (video) {
            console.log("I got a handle to the video!", video);
        }
    });
    $("#play").click(function () {
        _wq.push({
            id: "<VIDEO_ID>", onReady: function (video) {
                video.play();
            }
        });
    })
    $("#pause").click(function () {
        _wq.push({
            id: "<VIDEO_ID>", onReady: function (video) {
                video.pause();
            }
        });
    })
</script>