首先,我对Java脚本很陌生,但是已经涉猎了一点,观看了整个Internet上的视频。
我有一些图像,我想用作触发对象来播放与其对应的视频。可以说我有3张图片。 img1(vid1)img2(vid2)img3(vid3)。如果我将鼠标悬停在其中一张图像上方,则播放与其对应的图像。 (我显然需要在我的视频src中引用其他视频)
我能够悬停并播放单个视频,但不确定如何拥有多个可加载并播放到html视频中的源。
HTML:
<div class = "videoContainer">
<video id="video" src="Videos/Glitch.mp4" height = "180">
<div class ="body">
<div class = "textPresets">
<input class ="glitch" type = "image" src ="Pics/Glitch.png" onmouseover="playVideo()" onmouseout ="pauseVideo()">
<div class="line"></div>
<input class ="gold" type = "image" src ="Pics/Golden-Text_Preview.png" onmouseover="playVideo()" onmouseout = "pauseVideo()">
<div class="line"></div>
<input class ="chrome" type = "image" src ="Pics/Chrome-Text_Preview.png" onmouseover="playVideo()" onmouseout = "pauseVideo()">
</div>
</div>
</div>
JAVASCRIPT:
var myVideo = document.getElementById("video");
function playVideo() {
myVideo.play();
}
function pauseVideo() {
myVideo.pause();
}
非常感谢!
您可以在每个图像输入控件上使用html中的数据属性,其中包含您要播放的视频的来源。
数据属性由您定义,因此您可以使用类似data-video-src=""
的名称。我不知道其他视频的文件名,但是根据您的示例,我假设它们与图像文件名相同。您还必须在onmouseover事件上使用this
传递对控件的引用,因此它将变为onmouseover="playVideo(this);
<video id="video" height="180">
<input class="glitch" type="image" src="Pics/Glitch.png" data-video-src="Videos/Glitch.mp4" onmouseover="playVideo(this)" onmouseout ="pauseVideo()">
<input class="gold" type="image" src="Pics/Golden-Text_Preview.png" data-video-src="Videos/Golden-Text_Preview.mp4" onmouseover="playVideo(this)" onmouseout ="pauseVideo()">
<input class="chrome" type="image" src="Pics/Chrome-Text_Preview.png" data-video-src="Videos/Chrome-Text_Preview.mp4" onmouseover="playVideo(this)" onmouseout ="pauseVideo()">
然后根据每个图像的data属性更改javascript以使用视频源
var myVideo = document.getElementById("video");
function playVideo(elem) {
// get the data attribute with the video source
// note that 'elem' is a reference to the specific control you are mousing over
var videoSource = elem.getAttribute('data-video-src');
// update the video control with the video source for this image
myVideo.setAttribute('src', videoSource);
// play the video
myVideo.play();
}
function pauseVideo(elem) {
myVideo.pause();
}
祝你好运!如果您有任何疑问或需要澄清,请发表评论