时间戳

首页 > 解决方案 > 第二个jQuery函数取消第一个

jquery - 第二个jQuery函数取消第一个

问题描述

我自己试过，真的。阅读大量论坛帖子，尝试过代码笔，小提琴和整个 9。我基本上浪费了 3 天。我在客户的网站上工作，所以时间至关重要。我知道这里有出色的程序员。

我实现了一个 jquery 代码，用于在我关闭模式时让我的视频停止播放。这是该代码：

jQuery(document).ready(function($){
    $('.modal').on('hide.bs.modal', function() {
        var memory = $(this).html();
        $(this).html(memory);
    });
});

（我使用的是 Wordpress，所以我必须这样做第一行。）

无论如何，效果很好，当您关闭模式时视频停止播放。但是后来我想使用视频海报图片，为了避免繁琐的双击，它需要延迟自动播放（在页面加载时暂停视频自动播放，等到海报图片被点击。）这是我一直使用的代码那：

jQuery(document).ready(function( $ ){
    $('.vidposter').on('click', function() {
    var element = $(this);
    var videoSRC = element.attr('data-videoSRC');
    var iframe = '<iframe width="700" height="394" src="'+videoSRC+'"></iframe>';
    element.html(iframe);
    });
});

如果您需要查看它，这里是 HTML：

  <div align="center"><div class="vidposter" data-videoSRC="https://player.vimeo.com/video/123456789?autoplay=1"><img src="http://blahblahsite.com/images/image.jpg" style="cursor:pointer"></div></div>

问题：

两个 jquery 单独工作都很好。当我上传第二个脚本时，它被忽略了。或者当我尝试组合一个时，第二个功能失败。

我尝试结合：

jQuery(document).ready(function($){

    $('.vidposter').on('click', function() {
        var element = $(this);
        var videoSRC = element.attr('data-videoSRC');
        var iframe = '<iframe width="700" height="394" src="'+videoSRC+'"></iframe>';
        element.html(iframe);
    });

    $('.modal').on('hide.bs.modal', function() {
        var memory = $(this).html();
        $(this).html(memory);
    });
});

我把它们组合错了吗？我需要重写一些东西吗？

仅供参考：会发生什么是“视频海报+延迟自动播放”的作品，但“模式关闭时停止视频”不仅被忽略，它还从头开始播放视频。

标签： jquerymodal-dialogautoplay

解决方案

您的代码之一是使用video标签的视频，另一个使用iframe标签的视频。

第一个想要暂停video第二个的标签，但第二个使用iframe标签。

它们彼此不一致。暂停带有标签的视频与video标签不同iframe。

对于停止视频，您应该检查它是iframe还是normal video。并分别停止每个案例的视频。

所以改变：

    var memory = $(this).html();
    $(this).html(memory);

至：

if($(this).find('iframe')[0]){
        var iframe = $(this).find('iframe')[0];
        try{
          var vid = $(iframe).contents().find(this)[0];
          if (vid) {vid.pause();vid.currentTime = 0;}
        }catch(e){console.log(e);}
        //for vimeo videos
        if(iframe.contentWindow)iframe.contentWindow.postMessage('{"method":"unload"}', '*');
    }
    else if($(this).find('video')[0]){
        var memory = $(this).html();
        $(this).html(memory);
    }

另外，如果您想暂停而不是停止，请删除vid.currentTime = 0;并更改"method":"unload"为"method":"pause"

推荐阅读