14 Replies - 11623 Views - Last Post: 08 July 2014 - 07:09 AM

#1 Jamie Skinner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-June 12

video plays on mouse over but not with multiple videos

Posted 03 June 2012 - 07:14 AM

Hi, i have two videos that i want to play on mouse over, at the moment i can only get one out of the two videos to play on mouse over.
Im really new to all this, i have tried:

document.getElementById('video2')
document.getElementByClass('video2')

Duplicated scripts etc and i can't get each of the video to play on mouse over. Can anyone help?
This is the tut i followed to get this far:
http://developer.pra...-and-Javascript


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Horizontal_Slider</title>
	<link href="css/style.css" rel="stylesheet" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' 
		type='text/css'>
		

	
	<script type="text/javascript">
	Shadowbox.init();
	</script>

</head>
<body>
	
	<div id="header"></div><!--end header-->

	
		<a href="video/speechlrg.mp4">
		<video id="video1" loop>	
		<source src="video/speech.mp4" type="video/mp4"></source>
		</video> </a>
		

		
		
		<a href="video/identlrg.mp4">
		<video id="video2" loop>	
		<source src="video/ident.mp4" type="video/mp4"></source>
		</video> </a>
		
		
		
	

<script src="js/js.js"></script>

<script>
document.addEventListener('mouseover',hoverVideo,false);


var vid = document.getElementById('video2')



function hoverVideo(e)
{	
	if(e.target == vid)
	{
		vid.play();
		this.addEventListener('mouseout',hideVideo,false);
	}

}

function hideVideo(e)
{
	if(e.target == vid)
	{
		vid.pause();
	}

}

</script>
</body>
</html>



Thanks

Is This A Good Question/Topic? 0
  • +

Replies To: video plays on mouse over but not with multiple videos

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,251
  • Joined: 08-June 10

Re: video plays on mouse over but not with multiple videos

Posted 03 June 2012 - 07:41 AM

View PostJamie Skinner, on 03 June 2012 - 04:14 PM, said:

i have tried:

document.getElementById('video2')
document.getElementByClass('video2')

as the name suggests getElementById() gets you the element with the according ID (that is supposed to be unique).

getElementByClass() does not exist, the method is called getElementsByClassName().
Was This Post Helpful? 1
  • +
  • -

#3 Jamie Skinner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-June 12

Re: video plays on mouse over but not with multiple videos

Posted 04 June 2012 - 06:30 AM

ok thanks, have tried class name but it still doesn't want to work.


<div class="videoone">
		<a href="video/speechlrg.mp4">
		<video id="video1" loop>	
		<source src="video/speech.mp4" type="video/mp4"></source>
		</video> </a>
		
	</div>
		
		
		
	<div class="videoone">
		<a href="video/identlrg.mp4">
		<video id="video2" loop>	
		<source src="video/ident.mp4" type="video/mp4"></source>
		</video> </a>
		
	</div>



Js
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('video1');
function hoverVideo(e)
{	
	if(e.target == vid)
	{
		vid.play();
		this.addEventListener('mouseout',hideVideo,false);
	}
}
function hideVideo(e)
{
	if(e.target == vid)
	{
		vid.pause();
	}
}




var vid = document.getElementById('video1');

This is what i need to change i think, i need to target multiple id's

Posted Image

As I hover over each I want that video to play, i can get one to work but not another, can anyone help?
cheers
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,251
  • Joined: 08-June 10

Re: video plays on mouse over but not with multiple videos

Posted 04 June 2012 - 06:38 AM

the problem is line #2, you check if the target element is that with the ID "video1".

it would suffice to register the event listeners on the <video> (then you also need no if() conditions)

// something along that
var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
	item.addEventListener('mouseover', hoverVideo, false);
	item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{	
	this.play();
}
function hideVideo(e)
{
	this.pause();
}

This post has been edited by Dormilich: 04 June 2012 - 06:38 AM

Was This Post Helpful? 2
  • +
  • -

#5 Jamie Skinner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-June 12

Re: video plays on mouse over but not with multiple videos

Posted 05 June 2012 - 03:49 AM

Thanks very much that worked great, thanks for your time
Was This Post Helpful? 0
  • +
  • -

#6 Deyson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 21-August 12

Re: video plays on mouse over but not with multiple videos

Posted 21 August 2012 - 10:04 AM

Thank you so much, this helped me out as well! :)
I also wanted to know if you knew how I can alter the code so instead of looping the video would start over when the mouse leaves and re-renters.
Thank you very much and have a wonderful day!

View PostDormilich, on 04 June 2012 - 06:38 AM, said:

the problem is line #2, you check if the target element is that with the ID "video1".

it would suffice to register the event listeners on the <video> (then you also need no if() conditions)

// something along that
var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
	item.addEventListener('mouseover', hoverVideo, false);
	item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{	
	this.play();
}
function hideVideo(e)
{
	this.pause();
}

Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,251
  • Joined: 08-June 10

Re: video plays on mouse over but not with multiple videos

Posted 21 August 2012 - 10:14 AM

View PostDeyson, on 21 August 2012 - 07:04 PM, said:

I also wanted to know if you knew how I can alter the code so instead of looping the video would start over when the mouse leaves and re-renters.

something like the code in my post?
Was This Post Helpful? 0
  • +
  • -

#8 Deyson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 21-August 12

Re: video plays on mouse over but not with multiple videos

Posted 21 August 2012 - 10:29 AM

Yes please. :)/> I used the code you posted above which works great on my testing page:edit:mod link removed

I just wanted to see how it would look better if the video restarts instead of just pausing.

Thank you! :)/>

This post has been edited by modi123_1: 08 July 2014 - 09:27 AM

Was This Post Helpful? 0
  • +
  • -

#9 Deyson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 21-August 12

Re: video plays on mouse over but not with multiple videos

Posted 21 August 2012 - 11:13 AM

You can see them better in action here if you scroll to the bottom where the bigger images are: edit:mod link removed
Let me know what you think or what recommendations you may have. I thought restarting the movie would make it easier for the visitors in case they accidentally hovered over another thumbnail. I am open for any suggestions though. :)/>

Thank you very much in advance.

This post has been edited by modi123_1: 08 July 2014 - 09:27 AM

Was This Post Helpful? 0
  • +
  • -

#10 Deyson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 21-August 12

Re: video plays on mouse over but not with multiple videos

Posted 30 August 2012 - 03:33 AM

View PostDormilich, on 21 August 2012 - 10:14 AM, said:

View PostDeyson, on 21 August 2012 - 07:04 PM, said:

I also wanted to know if you knew how I can alter the code so instead of looping the video would start over when the mouse leaves and re-renters.

something like the code in my post?



Hello I was able to achieve the video to pause and reset once the mouse leaves the video using :
function hideVideo(e)
{
	this.pause();
	this.currentTime = 0;
}


My question now is how can I bring back the thumbnail over the video in order to hide the video in its paused state.

Thank you :)

This post has been edited by Dormilich: 30 September 2012 - 11:44 PM
Reason for edit:: fixed code tags

Was This Post Helpful? 0
  • +
  • -

#11 Deyson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 21-August 12

Re: video plays on mouse over but not with multiple videos

Posted 30 September 2012 - 07:48 AM

Hello Dormilich I hope you are having a wonderful day.
I have gotten all the video to work with the hover script you shared with us. The only problem I came across is that if I add preload="none" to the videos ( to save bandwidth times and load times) the visitor has no way of knowing that a video is loading. What would you recommend I do to give an indication or signal to the viewer to wait while the video loads.
Here is my website with the above code working. As you can see the video does not start immediately because the video has to buffer.

edit:mod link removed

Thank you very much! :)/>/>

This post has been edited by modi123_1: 08 July 2014 - 09:27 AM

Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,251
  • Joined: 08-June 10

Re: video plays on mouse over but not with multiple videos

Posted 30 September 2012 - 11:47 PM

onclick you could add a message that says the video were loading (and then automatically fade that out/remove it)
Was This Post Helpful? 0
  • +
  • -

#13 yamaka  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 05-July 14

Re: video plays on mouse over but not with multiple videos

Posted 05 July 2014 - 05:05 AM

View PostDeyson, on 21 August 2012 - 07:04 PM, said:

Hello I was able to achieve the video to pause and reset once the mouse leaves the video using :
function hideVideo(e)
{
	this.pause();
	this.currentTime = 0;
}


My question now is how can I bring back the thumbnail over the video in order to hide the video in its paused state.

Thank you :)/>/>



Does anyone know how to show the thumbnail? I'm having the same issue right now..
I would appreciate any help!
Greetings
Was This Post Helpful? 0
  • +
  • -

#14 yamaka  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 05-July 14

Re: video plays on mouse over but not with multiple videos

Posted 05 July 2014 - 08:47 AM

Ok solved.. so if anyone wants to know:
window.location.reload() will reload the thumbnail

This post has been edited by andrewsw: 05 July 2014 - 09:15 AM
Reason for edit:: Removed previous quote

Was This Post Helpful? 0
  • +
  • -

#15 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 80
  • View blog
  • Posts: 559
  • Joined: 21-November 13

Re: video plays on mouse over but not with multiple videos

Posted 08 July 2014 - 07:09 AM

Actually, it reloads the whole document. There is nothing heavier than that.

The best way to control this, to my mind, is to extract the first frame of the video thanks to the Canvas API and display it on mouseout.

Note: you should start your own thread. If you want to reference this one, provide us a link. It's clearer and it doesn't revive 2 years old threads. I had to read Jamie Skinner's question and some of the replies before I notice. Not cool !

This post has been edited by ge∅: 08 July 2014 - 07:11 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1