Question

我自己尝试过，我确实做到了。阅读大量的论坛帖子，尝试过的代码笔，小提琴和整个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);
    });
});

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

仅供参考：发生的事情是“ vid海报+延迟自动播放”的工作原理，但是“停止模式关闭视频”不仅被忽略，而且从头开始播放视频。

Answer 1

您的代码之一是对视频使用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"

第二个jQuery函数取消了第一个

1 个答案: