时间戳

首页 > 解决方案 > 当用户播放另一个视频时停止当前视频播放？

javascript - 当用户播放另一个视频时停止当前视频播放？

问题描述

我有一个包含多个视频的侧边栏，现在用户可以播放和暂停他想要的任何视频，但是当某个视频正在播放并且用户播放另一个视频时，两个视频都在播放，

现在我想当一个视频正在播放并且用户播放另一个视频时它应该停止当前播放的视频。

这是一个现场演示：现场演示

这是播放暂停视频的功能

 $(".playpause").on('click', function(){

                    var videotag = $(this).parent().find("video")[0];
                    if(videotag.paused==true) {
                            $(this).parent().find("video")[0].play();
                            $(this).css("opacity", 0)
                            $(videotag).on('ended',function(){
                                    $('.playpause').css("opacity", 1);
                            });


                    } else if(videotag.paused==false) {
                            $(this).parent().find("video")[0].pause();
                            $(this).css("opacity", 1)
                            $('.playpause').show();
                    }

            });

我需要更改什么才能使其正常工作？

标签： javascriptjqueryhtmlvideo

解决方案

当视频开始播放时，您可以选择所有其他视频并pause()对其调用方法。另请注意，您可以通过缓存选择器并定义ended一次事件来整理逻辑。else if也是多余的，因为只有paused两个状态。试试这个：

var $allVideos = $('video').on('ended', function() {
  $('.playpause').css('opacity', 1);
});
var $allPlayPause = $('.playpause');

$allPlayPause.on('click', function() {
  var $playpause = $(this),
    video = $playpause.parent().find('video')[0];
  
  if (video.paused) {
    video.play();
    $allPlayPause.css('opacity', 1);
    $playpause.css('opacity', 0)

    // pause all but this:
    $allVideos.not(video).each(function(i, vid) {
      vid.pause();
    });
  } else {
    video.pause();
    $playpause.css('opacity', 1)
    $('.playpause').show();
  }
});

推荐阅读