[英]Iterate through video's in Videojs
谢谢你看我的问题。 对于作业,我需要在 JQuery 手风琴中遍历 5 个视频。 我们需要创建自己的按钮,它们有自己的功能。 目前我有 5 个不同视频的 div,但是,当我想播放第二个视频时,第一个视频将开始播放。 第 3、4 和 5 个视频也是如此。
问题:如何更改我的代码,以便每个播放按钮适用于每个不同的视频? 我的猜测是 JQuery 每个 function,但我不知道。
<div id="video-wrap">
<div id="accordion">
<div class="acc-wrap"><img class="arrow" src="img/arrow.svg" alt="arrow">
<h3>Introduction</h3>
</div>
<div>
<div class="video-player" id="player-1">
<video id="my-video-1" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img class="arrow" src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 1</h3>
</div>
<div>
<div class="video-player" id="player-2">
<video id="my-video-2" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="video/citral.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 2</h3>
</div>
<div>
<div class="video-player" id="player-3">
<video controls id="my-video-3" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 3</h3>
</div>
<div>
<div class="video-player" id="player-4">
<video controls id="my-video-4" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
<div class="acc-wrap"><img src="img/arrow.svg" alt="arrow">
<h3>Daniel Shiffman: Coding Challenge 4</h3>
</div>
<div>
<div class="video-player" id="player-5">
<video controls id="my-video-5" class="video-js" preload="auto" width="1088px" height="612"
data-setup="{}">
<source src="https://player.vimeo.com/video/420225730" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
video</a>
</p>
</video>
<div class="player-buttons">
<a class="play-toggle" class="video-play">
<img class="pause" src="img/play-btn.svg" alt="pause button">
<img class="play" src="img/play-btn2.svg" alt="play button">
</a>
<a class="forward-btn">
<img src="img/forward btn.svg" alt="forward button">
</a>
<a class="rewind-btn">
<img src="img/rewind btn.svg" alt="forward button">
</a>
</div>
</div>
</div>
</div>
</div>
// Play/pause toggle //
$('.play-toggle').click(function () {
if ($('.acc-wrap').hasClass("ui-state-active")) {
if (player.paused()) {
player.play();
$('.play').css({
"visibility": "visible",
});
$('.pause').css({
"visibility": "hidden",
});
} else {
player.pause();
$('.play').css({
"visibility": "hidden",
});
$('.pause').css({
"visibility": "visible",
});
};
};
});
我建议您了解更多有关Scope和Classes / Object Prototypes的信息。
您的 jQuery 代码的问题是有多个.play-toggle
类,您目前无法识别该播放按钮所属的正确视频。
您可以开始 scope 如果通过将event
参数传递到您的点击处理程序来识别实际点击了哪个项目
$('.play-toggle').click(function (event) {
console.log(event)
})
从这里您可以识别父容器找到视频并连接到播放暂停功能。 但是我会推荐另一种方法。
第 1 步:创建一个 VideoPlayer Class 以容纳所有 VideoPlayer 功能
class VideoPlayer {
constructor(el) {
this._el = el
this._video = el.querySelector('video')
this._playToggle = el.querySelector('.play-toggle')
this.setupEventListeners()
}
setupEventListeners() {
this._playToggle.addEventListener('click',() => {
console.log(`play button clicked on element id ${this._el.id}`)
})
}
}
如果您不确定类,请阅读它们,这里我们将视频播放器元素定义为变量并将它们保存为变量,然后初始化一个事件侦听器来侦听您的点击事件。 您将在此 class 中存储所有视频播放器功能
第 2 步:遍历页面并识别所有潜在的视频播放器
let videoPlayers = document.querySelectorAll('.video-player')
在这里,我们知道所有视频播放器都包含在父 class video-player
中,如果您使用console.log(videoPlayers)
,您应该会看到一系列元素
步骤 3. 为每个元素创建一个 VideoPlayer class 的实例
videos.forEach(v => new VideoPlayer(v))
这将为您在 videoPlayers 中的每个项目创建一个新的 VidePlayer class 实例,现在如果您单击播放按钮,您应该会在您的控制台中看到play button clicked on element id (whatever id)
再次在您的视频播放器 class 中,我将包含您按钮的所有逻辑,在这里您可以连接到您想要自定义视频播放器的任何 HTML5 视频事件。
请注意,您必须自己处理删除事件侦听器,这不是一个完整的答案,但应该为您提供有关如何解决问题的足够信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.