video plays on mouse over but not with multiple videos

Page 1 of 1

11 Replies - 2966 Views - Last Post: 30 September 2012 - 11:47 PM

#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 online

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,541
  • 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 online

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,541
  • 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: 5
  • 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 online

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,541
  • 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: 5
  • Joined: 21-August 12

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

Posted 21 August 2012 - 10:29 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?


Yes please. :) I used the code you posted above which works great on my testing page: http://motion-master...-page-new-hover

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

Thank you! :)
Was This Post Helpful? 0
  • +
  • -

#9 Deyson  Icon User is offline

  • New D.I.C Head

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

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

Posted 21 August 2012 - 11:13 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?



You can see them better in action here if you scroll to the bottom where the bigger images are: http://motion-master-templates.com
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.
Was This Post Helpful? 0
  • +
  • -

#10 Deyson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • 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: 5
  • Joined: 21-August 12

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

Posted 30 September 2012 - 07:48 AM

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


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.

www.motion-master-templates.com

Thank you very much! :)
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,541
  • 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
  • +
  • -
Page 1 of 1