按钮

时间:2017-01-23 22:48:17

标签: javascript jquery html5-video jquery-cycle2 cycle2

我想通过按钮在cycle2-carousel幻灯片中暂停视频。不知怎的,它不起作用,虽然它可以很好地与页面上某处随机放置的视频一起使用。我在这里错过了什么?为什么我的第二个按钮/功能无法暂停幻灯片中的视频?

提前感谢您的帮助。

function pausefirstvideo()
{
	document.getElementById('video1').pause();
}

function pausesecondvideo()
{
	document.getElementById('video2').pause();
}
.slides
{
	width: 500px;
	height: 300px;
	margin-left: 10px;
	margin-right: 10px;
}
.slides img
{
	width: 100%;
	height: 100%;
}
.slides video
{
	width: 100%;
	height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>

<button id="pause1" onclick="javascript:pausefirstvideo();">PAUSE VIDEO1</button>
<button id="pause2" onclick="javascript:pausesecondvideo();">PAUSE VIDEO2</button>

<video id="video1" controls="controls"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video>


<div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-speed="500" data-cycle-timeout="8000" data-cycle-fx="carousel">
<div class="slides"><img src="http://malsup.github.io/images/beach1.jpg"></div>
<div class="slides"><video id="video2" controls="controls"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video></div></div>

0 个答案:

没有答案