按下 'next' 按钮时自动暂停 html5 视频 (javascript/ jquery)

Question

我在 Web 浏览器上设计了一个类似 i-phone 的屏幕，我正在其中测试我正在构建的应用程序。 None 个视频具有自动播放功能；用户可以通过单击视频播放视频 area.The 用户可以通过单击右上角的按钮导航到下一个视频。

问题： 问题是如果我按下一个视频并且它正在播放，如果我按下 'next' 按钮，如果我没有点击返回，随着新视频的推进，视频继续播放，我可以听到它在后台播放的声音。

我试过将视频静音但没用我试过在用户点击 'next' 按钮时将视频静音，但效果很好静音，但是，问题是如果我按下 return 按钮，视频将完全静音，除非我刷新页面，否则声音根本不会再次播放*。

这是我用来尝试在按下 'next' 按钮时使视频静音的 jquery 代码：

$("#nextButtonTop, #prevButtonTop ").click( function (){
if( $("#topVid video:visible").prop('muted') ) {
        $("#topVid video:visible").prop('muted', true);

  } else {
    $("#topVid video:visible").prop('muted', true);


  }
});

本节基本html代码：

<div class="topVid channel1960s">
  <div class="testMarqueeLeft"><div>CHANNEL 1960s: Jackie Kennedy at JFK's service</div></div>
      <video loop onclick="this.paused? this.play() : this.pause()" >
      <source src="videos/1960s_Jackie_mourning_VERT.mp4" type="video/mp4">
      Your browser does not support the video tag.
      </video> </div>

理想解决方案：按下 'NEXT' 按钮后立即暂停 最终，我意识到由于性能问题（隐藏视频即使没有声音也会继续播放）。 按下 'next' 按钮后立即暂停（而不是静音）视频的最佳方法是什么？ 已经内联javascript html 上的代码，如果用户点击它会播放和暂停，但 我不确定如何添加其他部分，如果按下下一个按钮，它会暂停一旦可见就可以播放。

我试过让视频暂停，但没用

$("#nextButtonTop, #prevButtonTop ").click( function (){
  if ($('.topVid.video').is(":hidden")) {
      $('.topVid.video').pause();
  }
});

这个我也试过了，没用

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

使用

 "this.paused ? this.play() : this.pause();"

是在另一个答案中提出的建议，但我不确定这是如何工作的，因为点击另一个元素（'next' 按钮，而不是视频本身会触发暂停。

Answer 1

除非你的jQuery在文档的最后，记得用jQuery(function($) {...}).

换行

附加 javaScript 中的所有事件处理程序，而不是 HTML。这不是必需的，但可以让您一目了然地查看所有交互式代码。

请注意 .play() 和 .pause() 是 <video> 元素方法，而不是 jQuery 方法。

试试这个：

HTML

<div class="topVid channel1960s">
    <div class="testMarqueeLeft">
        <div>CHANNEL 1960s: Jackie Kennedy at JFK's service</div>
    </div>
    <video loop> <!-- remove onclick="..." -->
        <source src="videos/1960s_Jackie_mourning_VERT.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    </video>
</div>

JavaScript

jQuery(function($) {
    // Attach click handler to both <video> elements
    $('video').on('click', function() {
        this.paused? this.play() : this.pause();
    });

    // Attach click handler to top video's prev/next buttons
    $("#nextButtonTop, #prevButtonTop").on('click', function(e) {
        e.preventDefault(); // maybe not required but does no harm.
        var $video = $('.topVid video');
        if ($video.is(':hidden')) {
            $video.get(0).pause(); // .pause() is a method of the <video> element, not a jQuery method.
        }
    });
});

按下 'next' 按钮时自动暂停 html5 视频 (javascript/ jquery)

Automatically pausing html5 video as the 'next' button is pressed (javascript/ jquery)

html

javascript

video

jquery

pause