Слайд-шоу видео пауза javascript при смене слайдов

Я создал слайд-шоу видео 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>

Обратите внимание, что видео не видны, потому что я не могу их загрузить.

javascript html video slideshow

29.07.2019 05:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

597

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно присвоить своим видео какой-либо идентификационный номер, чтобы позже вы могли использовать это же значение для паузы или воспроизведения.

Простая логика состоит в том, чтобы проверить n текущего слайда, а затем приостановить любое видео (по id), которое находится в диапазоне от не равный до n.

Например: Допустим, у вас есть 5 слайдов...

Это означает, что ваша переменная n будет варьироваться от 1 до 5.
Назовите собственный тег <video> каждого слайда с помощью id= из vid1, vid2, vid3 и т. д.
Используйте !=, чтобы проверить статус Не равно.
В цикле 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>

01.08.2019 09:42

Другие вопросы по теме

Мое выпадающее меню не появляется при использовании jQuery. Какие-нибудь советы?

Как установить переход каждый раз, когда текст меняется

Передать выбранную строку dataTable в другую строку dataTable на другой странице php

Сделать Bootstrap Nav Sticky Top

Извлечь текст из определенного тега HTML

Как я могу получить все значения флажка через jQuery?

Передача данных с главной страницы в php-запрос внутри модального окна

Отступы и поля не будут работать в Bootstrap

Проблема с интервалом при размещении изображения в таблице — HTML и CSS

Загрузочное изображение прогрессивного веб-приложения iOS в темном режиме?

Слайд-шоу видео пауза javascript при смене слайдов

Ответы 1

Другие вопросы по теме

Похожие вопросы