我在一个页面上有一个视频滑块,我想在活动视频的顶部添加一个功能性的播放按钮。我按照这里的教程进行操作:https://codeconvey.com/add-html5-video-overlay-play-button/。该按钮可以暂停/播放视频;但是,在单击时,它不会将文本从“播放”更改为“暂停”。我还尝试更改透明度或隐藏按钮,以便在播放时不会遮盖视频。我创建了一个带有适用代码的JSFiddle(但由于某些原因,按钮根本没有显示出来):https://jsfiddle.net/xasw7dqL。在控制台中,我收到错误消息“$未定义”,因此我确定与此有关,但我不知道该如何定义它。我以前没有在网站上实现过JavaScript。感谢您提供任何帮助。下面是代码:
HTML:
CSS:
HTML:
<div class="image-slider-fade fade">
<button class="_active">Play</button>
<video id="vid1" controls>
<source src="videos/testvid1.mp4" type="video/mp4">
Your browser does not support the video.
</video>
</div>
CSS:
#vid1, #vid2, #vid3, #vid4 {
width: 100%;
z-index: -1;
}
button {
background-color: #666;
border: medium none;
color: #fff;
display: block;
font-size: 18px;
left: 0;
margin: 0 auto;
padding: 8px 16px;
position: absolute;
right: 0;
top: 50%;
}
button._active {
opacity: 0.5;
}
button:hover {
background-color: #e05a00;
}
JavaScript:
//video play button
$(document).ready(function() {
var ctrlVideo = document.getElementById("video");
('button').click(function() {
if ($('button').hasClass("_active")) {
ctrlVideo.play();
$('button').html("Pause");
$('button').toggleClass("_active");
} else {
ctrlVideo.pause();
$('button').html("Play");
$('button').toggleClass("_active");
}
});
});