javascript - 更改幻灯片时视频幻灯片 javascript 暂停-6ren

javascript - 更改幻灯片时视频幻灯片 javascript 暂停

转载作者：行者123 更新时间：2023-11-30 19:23:05

我制作了一个 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>

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

最佳答案

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

一个简单的逻辑就是检查n当前幻灯片，然后暂停任何 不等于 到 id 的视频(按 n) .

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

这意味着您的 n变量的范围为 1至 5 .
为每张幻灯片命名 <video>用 id= 标记的 vid1 , vid2 , vid3等等……
使用 !=检查不等于状态。
在 FOR循环，检测哪张幻灯片 Is-Not 等于当前的“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 - 更改幻灯片时视频幻灯片 javascript 暂停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57246860/

文章推荐： javascript - 多个 choropleth 图层应用不同的样式

文章推荐： c - C 中的二项式系数

文章推荐： c - 从用于写入的 FILE 副本中将数据读入数组

文章推荐： c# - 如果它为空，则不要添加到列表中 c#

javascript - AngularJS，Ng-repeat 更改/更改 Json 数组的顺序
SO亲爱的 friend 们: 2014 年 3 月 18 日。我正在处理一种情况，在使用 ng-repeat 时，数组内的元素(我从 Json 字符串中获取)更改了原始顺序。需要明确的是，数组中的
javascript - 更改 div 类 onclick --- 并*保存*更改
有很多问题询问如何在 JavaScript 单击处理程序中更改 div 的类，例如，此处:Change Div style onclick .我理解得很好(只需更改 .className)，并且它有效
java - 无法删除、更改、更改...列名称 'number of shares' 带空格
我从access导入了一个数据库到mysql，但其中一个表的列名“股数”带有空格，但我尝试更改、替换甚至删除列名，但失败了。任何人都可以帮助解决这一问题 String UpdateQuary = "U
javascript - iframe css src 更改，如果父 css src 更改
我正在做一个随机的学校元素。目前，我有一个包含两个 CSS 的页面。一种用于正常 View ，一种用于残障人士 View 。此页面还包括两个按钮，它们将更改使用的样式表。 function c
javascript - 更改
文本中的文本我会使用 javascript 更改
元素
我需要使用 javascript 更改 HTML 元素中的文本，但我不知道该怎么做。 ¿有什么帮助吗？我把它定义成这样: Text I want to change. 我正在尝试这样做: docum
javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？
我在它自己的文件 nav_bar.shtml 中有一个主导航栏，每个其他页面都包含该导航栏。这个菜单栏是一个 jQuery 菜单栏(ApyCom 是销售这些导航栏的公司的名称)。导航栏上的元素如何确定
更改 if 语句
我正在摆弄我的代码，并开始想知道这个变化是否来自: if(array[index] == 0) 对此: if(!array[index] != 0) 可能会影响任何代码，或者它只是做同样的事情而我不需
更改 Windows 控制台大小
我一直在想办法调整控制台窗口的大小。这是我正在使用的函数的代码: #include #include #define WIDTH 70 #define HEIGHT 35 HANDLE wHnd;
vba - 更改 IF 语句以提高效率
我有很多情况会导致相同的消息框警报。有没有比做几个 if 语句更简单/更好的解决方案？ PRODUCTS BOX1 BOX2 BOX3
c# - 更改/重命名命名空间前缀
我有一个包含这些元素的 XELEMENT B Bob Petier 19310227 1 我想像这样转换前缀。 B Bob Pet
mysql - 更改 where 子句的顺序会破坏查询
我使用 MySQL 5.6 遇到了这种情况: 此查询有效并返回预期结果: select * from some_table where a = 'b' and metadata->>"$.countr
r - 检测日期列格式的中断/更改
我想知道是否有人知道可以检测 R 中日期列格式的任何中断的包或函数，即检测日期向量格式更改的位置，例如: 11/2/90 12/2/90 . . . 15/Feb/1990 16/Feb/1990 .
更改 GtkButton 的标签
我希望能够在小部件显示后更改 GtkButton 的标签 char *ButtonStance == "Connect"; GtkWidget *EntryButton = gtk_button_ne
更改 C 中缓冲区的播放速率？
我正在使用 Altera DE2 FPGA 开发板并尝试使用 SD 卡端口和音频线路输出。我正在使用 VHDL 和 C 进行编程，但由于缺乏经验/知识，我在 C 部分遇到了困难。目前，我可以从 SD
java - 更改 JProgressBar
注意到这个链接后: http://www.newscientist.com/blogs/nstv/2010/12/best-videos-of-2010-progress-bar-illusion.h
Ansible:更改=0
我想知道在某些情况下，即使剧本任务已成功执行并且 ok=2，ansible 也会显示“changed=0”。使用 Rest API 和 uri 模块时会发生这种情况。我试图找到解释但没有成功。谁能告诉
iphone - 更改/删除远程通知上的按钮或按钮文本
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: add buttons to push notification alert 是否可以在远程通知显示的警报框中指定有
iphone - 更改 "More"选项卡的导航栏颜色？
当您的 TabBarController 中有超过 5 个 View Controller 时，系统会自动为您设置一个“更多” View 。是否可以更改此 View 中导航栏的颜色以匹配我正在使用的颜
path - 更改.AndroidStudioBeta文件夹的位置
如何更改.AndroidStudioBeta文件夹的位置，默认情况下，该文件夹位于Windows中的\ .. \ User \ .AndroidStudioBeta，而不会破坏任何内容？ /编辑：找
Scala:收集不可变状态的更新/更改
我目前正在尝试将更具功能性的编程风格应用于涉及低级(基于 LWJGL)GUI 开发的项目。显然，在这种情况下，需要携带很多状态，这在当前版本中是可变的。我的目标是最终拥有一个完全不可变的状态，以避免状

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城