Hover image, play certain video

Question

First of all, I'm very new to Javascript but have dabbled a bit, watching videos across the interweb.

I have images that i would like to use as trigger objects to play a video that corresponds to them. Lets say i have 3 images. img1 (vid1) img2 (vid2) img3 (vid3). If I hover above one of the images, play the image that corresponds to it. (I obviously need to reference different videos in my video src)

I am able to hover and play a single video but am unsure how to have multiple sources that can load and play into the html video.

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(); 
}

Thank you soooo much!

just to clarify, do you want to play the same set of videos no matter what image you hover over? — Udendu Abasili, Dec 08 '19 at 20:18

chrisbyte · Accepted Answer · 2019-12-08T21:45:09.887

You can use data attributes in html, on each image input control, that contains the source of the video you would like to play.

The data attributes are defined by you, so you can use something like data-video-src="video.mp4". I do not know the file names of the other videos, but based on your example I am assuming they are the same as the image file name. You must also pass a reference to the control using this on the onmouseover event, so it would change to 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()">

Then change the javascript to use the video source based on the data attribute for each image

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() { 
    myVideo.pause(); 
}

Good luck! Please comment if you have any questions or need clarification

One more question. Is there a way to set the video back to the beginning of the video instead of pausing? — chimchase, Dec 09 '19 at 05:31
@chimchase looks like there is a `currentTime` property on the video object, as described here https://stackoverflow.com/a/10461709/8678978 I have not tested this but it looks like it would do the trick! — chrisbyte, Dec 09 '19 at 13:32

Hover image, play certain video

1 Answers1