时间戳

首页 > 解决方案 > 视频滑块停止的js代码

javascript - 视频滑块停止的js代码

问题描述

我创建了一个视频滑块，也就是说，当我单击从 fontawesome.com 获取的一个圆圈时，我有两个视频在一个和另一个之间切换。当我单击底部 PLAY 开始播放视频时，当我切换到滑块的下一个视频时它不会停止。我想当我改变视频时，前一个停止。

我在下面展示了我到目前为止编写的 js 代码。如果你能帮助我知道我应该在这个代码中包含什么来停止我切换它的视频。

谢谢

$(document).ready(function(){
var videoItems = $('.slidervideo li').length;


// Pagination --
for(i= 1; i <= videoItems; i++){ 
$('.pagination-slider').append('<li><span class="fa fa-circle"></span> 
</li>');
}

//------------------------

$('.slidervideo li').hide(); // Ocultanos todos los slides
$('.slidervideo li:first').show(); // Mostramos el primer slide
$('.pagination-slider li:first').css({'color': '#CD6E2E'});

//Ejecutamos todas las funciones
$('.pagination-slider li').click(paginationslider);


// FUNCIONES =========================================================

function paginationslider(){
var paginationsliderPos = $(this).index() + 1;

$('.slidervideo li').hide();
$('.slidervideo li:nth-child('+ paginationsliderPos +')').fadeIn(); 


$('.pagination-slider li').css({'color': '#858585'});
$(this).css({'color': '#CD6E2E'});  
}

});

标签： javascript

解决方案

你快到了……

让我们看看这个hide()函数做了什么：

element.hide()：在元素（jquery 元素）上调用 hide() 函数，通过向其添加display: none属性来隐藏 elmenet。

这个 CSS 属性无法暂停/播放视频。

因此，您还必须添加暂停视频的代码。

$('.slidervideo li:nth-child('+ paginationsliderPos +') video').pause()

* 我假设您在元素内部有一个视频.slidervideo li元素。

而且您不需要 jQuery 元素来执行该.pause()方法，因为它是一个 HTMLMediaElement 方法。

编辑：暂停加载在 iframe 中的 youtube 视频是一种不同的方法。

看看他们的 API 的 https://developers.google.com/youtube/iframe_api_reference

首先，您需要使用参数更新 iframe urlenablejsapi

<iframe id="existing-iframe-example"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 4px #37474F"
></iframe>

然后你可以调用stopVideo暴露的方法。

player.stopVideo()

在您的情况下，它将被调用为：

$('.slidervideo li:nth-child('+ paginationsliderPos +') video').get(0).stopVideo();

推荐阅读