视频幻灯片 javascript 更换幻灯片时暂停

Question

我制作了一个 HTML5 视频幻灯片。我想要做的是在用户转到下一张幻灯片时暂停正在播放的所有视频。我将如何在 javascript 中执行此操作？这是我到目前为止所做的：

https://codepen.io/patriciaworth/pen/wVgovq

//starting slide
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

//calcuate number of slides and which ones not to show
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    //pause videos here?
  }

  slides[slideIndex - 1].style.display = "block";

}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  background: #333;
}

$page-font: Arial;
$electric-pink: #e236c8;
h1 {
  color: #fff;
  float: left;
  font-family: Arial;
  font-size: 20px;
}

.slideshow {
  margin: 0 auto;
  width: 600px;
}

.ss-controls {
  float: right;
  .ss-back,
  .ss-forward {
    color: #fff;
    font-family: $page-font;
    font-size: 16px;
    margin: 0 3px;
    &:hover {
      color: $electric-pink;
      cursor: pointer;
    }
  }
}

.mySlides {
  margin-top: 20px;
  width: 100%;
  video {
    width: 100%;
    margin-bottom: 15px;
  }
  color: #e6e6e6;
  font-family: $page-font;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="HTML5 Video Slideshow" name="description">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min-width=320" />
  <title>HTML5 Video Slideshow</title>
  <!--My CSS -->
  <link href="css/styles.css" rel="stylesheet">
  <!-- Fontawesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet">
</head>

<body>
  <div class="slideshow">
    <h1>Video Slideshow</h1>
    <span class="ss-controls">
                <span class="ss-back">
                    <a class="prev" onclick="plusSlides(-1)"><i class="fas fa-caret-left fa-2x"></i></a>
                </span>
    <span class="ss-forward">
                    <a class="next" onclick="plusSlides(1)"><i class="fas fa-caret-right fa-2x"></i></a>
                </span>
    </span>
    <div class="mySlides fade">
      <video controls>
                    <source src="videos/mp4/Reflona - SilentCrafter.mp4" type="video/mp4">
                    <source src="videos/mp4/Reflona - SilentCrafter.webm" type="video/webm">
                    Your browser does not support the video tag.
                </video> Reflona - SilentCrafter
    </div>
    <div class="mySlides fade">
      <video controls>
                    <source src="videos/mp4/Fog - Dizaro.mp4" type="video/mp4">
                    <source src="videos/mp4/Fog - Dizaro.webm" type="video/webm">
                    Your browser does not support the video tag.
                </video> Dizaro - Fog
    </div>
    <div class="mySlides fade">
      <video controls>
                    <source src="videos/mp4/Virtual Trip - Niwel.mp4" type="video/mp4">
                    <source src="videos/mp4/Virtual Trip - Niwel.webm" type="video/webm">
                    Your browser does not support the video tag.
                </video> Virtual Trip - Niwel
    </div>
  </div>
  <!--Slideshow js-->
  <script src="js/slideshow.js"></script>
</body>

</html>

请注意视频不可见，因为我无法上传它们。

Answer 1

您需要为您的视频提供一些 ID 号，以便稍后您可以使用相同的值暂停或播放。

一个简单的逻辑是检查当前幻灯片的 n，然后暂停 不等于 到 [=12] 的任何视频（按 id） =].

例如：假设您有 5 张幻灯片...

这意味着您的 n 变量的范围将从 1 到 5。
用 vid1、vid2、vid3 等的 id= 命名每张幻灯片自己的 <video> 标签...
使用 != 检查 Is-Not-Equal 状态。
在FOR循环中，检测哪张幻灯片不等于当前“n”。不等于n.

记住：

!= 表示“IS-NOT-EQUAL”（例如： if ( abc != xyz ) then do...

|| 表示“OR ELSE”（例如： if ( (abc == true) || (xyz == true) ) then do...

示例代码：

var tmpElement; var n = 0;

n = 3; //# let's assume now showing slide number 3...

tmpElement = document.getElementById("vid"+n); //get video tag with id of "vid3"...

for (i = 0; i < (slides.length); i++) 
{
    if( i != n) //if "i" is NOT-EQUAL-TO our 3...
    {
        //# pause videos here?
        tmpElement = document.getElementById("vid"+i); tmpElement.pause(); //pause any not current "n" video element
    }
}

tmpElement.play(); //play video #3

我希望以上内容足以说明如何修复您的代码逻辑。

下面还有一个更长的例子。它并排放置 3 个视频，将播放一个当前视频，同时暂停另外两个。当前视频循环...

<!DOCTYPE html>
<html>
<body>

<div> <a id="myVideoTag"> </a> </div>

<video width="320" height="240" id="vid0" >
<source src="null.mp4" type="video/mp4">
</video>

<video width="320" height="240" id="vid1" >
<source src="null.mp4" type="video/mp4">
</video>


<video width="320" height="240" id="vid2" >
<source src="null.mp4" type="video/mp4">
</video>


<div onclick="do_Menu_Clicks(this);" id="btn_prev" div style="font-size:14px; width:30; 
float:left; width: 100px; height:40px; background: rgba(213, 104, 176, 0.5);
position:absolute; top: 500px; left: 200px; z-index: 3" > 
<b> # PREV </b>
</div>


<div onclick="do_Menu_Clicks(this);" id="btn_next" div style="font-size:14px; width:30; 
float:left; width: 100px; height:40px; background: rgba(64, 169, 116, 0.5);
position:absolute; top: 500px; left: 400px; z-index: 3" > 
<b> # NEXT </b>
</div>

<script>

var path1 = "your-path-to/video-1.mp4";
var path2 = "your-path-to/video-2.mp4";
var path3 = "your-path-to/video-3.mp4";

tmpElement = document.getElementById("vid0"); tmpElement.setAttribute("src", path1);
tmpElement = document.getElementById("vid1"); tmpElement.setAttribute("src", path2);
tmpElement = document.getElementById("vid2"); tmpElement.setAttribute("src", path3);

var i;
var n = -1; //start at "-1" since "0" means first slide...
var slides = ["vid0", "vid1", "vid2"]; //# first slide is at zero index... eg: [0,1,2,3]

//starting slide
var slideIndex = n; //1;
showSlides(slideIndex);

// Next/previous controls
//function plusSlides(n) { showSlides(slideIndex += n); }

function do_Menu_Clicks ( input )
{ 
    //# update for next slide
    if (input.id == "btn_next") 
    {  if ( n < (slides.length-1) ) { n++; } }

    if (input.id == "btn_prev") 
    { if (n > 0) {n--;} }

    //# check if BIGGER than ( || means "OR ELSE" ) if SMALLER than.. 
    if ( (n > slides.length-1) || (n < 0) )  { slideIndex = 0; } //reset to zero

    showSlides(n);

}

//calcuate number of slides and which ones not to show
function showSlides(n) 
{
    tmpElement = document.getElementById("vid"+n); //tmpElement.play();

    var playVidPromise = tmpElement.play();

    if (playVidPromise !== undefined) { playVidPromise.then(_ => {}).catch(error => { }); }

    for (i = 0; i < (slides.length); i++) 
    {
        if( i != n)
        {
            //slides[i].style.display = "none";

            //# pause videos here?
            tmpElement = document.getElementById("vid"+i); tmpElement.pause(); //pause any not current "n" video element
        }
    }

}

</script>

</body>
</html>

视频幻灯片 javascript 更换幻灯片时暂停

Video slideshow javascript pause when changing slides

html

javascript

video

slideshow