HTML5 on hover play video

18-11-2010 9:22pm #1

While watching an introduction to HTML5 by Google Coders (or something along those lines), they had a nifty little action where they moved their mouse over a video and it started to play. A google search on how to possibly do it came up with this site and the following code:

<!doctype html>
<html lang="en">
<head>
	<title>Hover to Play Video with HTML5, CSS, and 

JavaScripthttp://www.roxy.com/home/index.jsp</title>
<script type="text/javascript">

document.addEventListener('mouseover',hoverVideo(),false);
var vid = document.getElementById('video-example');
function hoverVideo(e)
{	
	if(e.target == vid)
	{
		vid.play();
		this.addEventListener('mouseout',hideVideo,false);
	}

}

function hideVideo(e)
{
	if(e.target == vid)
	{
		vid.pause();
	}

}
</script>
</head>
<body>
	<h1>Hover to Play Video Example</h1>
	<div id="wrapper">
		<video id="video-example" width="854" height="480"  loop 

controls>
			<source src="big_buck_bunny_480p_stereo.ogg" 

type="video/ogg"></source>
		</video>	
	</div><!--end wrapper-->
	<script src="js.js"></script>
</body>
</html>

When I went to test it, the video itself would play using the normal controls, but not with the hover command. It seems that the javascript is being ignored. Whilst looking through it again, I noticed down the bottom there was also another <script></script> so I moved the javascript down -

<!doctype html>
<html lang="en">
<head>
	<title>Hover to Play Video with HTML5, CSS, and 

JavaScripthttp://www.roxy.com/home/index.jsp</title>



</head>
<body>
	<h1>Hover to Play Video Example</h1>
	<div id="wrapper">
		<video id="video-example" width="854" height="480"  loop 

controls>
			<source src="big_buck_bunny_480p_stereo.ogg" 

type="video/ogg"></source>
		</video>	
	</div><!--end wrapper-->
	<script src="js.js">
document.addEventListener('mouseover',hoverVideo(),false);
var vid = document.getElementById('video-example');
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>

yet to no avail. Any other ideas? I'm thinking about the possibility of having an onmouseover command/function somewhere, but unsure if that would work either.

lil_lisa · 18-11-2010 9:34pm

What browser are you using?

18-11-2010 10:40pm

I tested it in Mozilla Firefox and Google Chrome - same thing in both. IE wouldn't even display the video tags.

pixelburp · 19-11-2010 10:00am

HTML5 isn't supported by IE (afaik) at the moment. IE9 beta does I believe, but 6-8 don't

mewso · 19-11-2010 12:20pm

Your first example won't work because it isn't waiting for the page to load so the element may not exist when it attempts to bind the event.

The second example uses an src attribute and does not declare the type (text/javascript).

Have you tried using jquery to bind the event in the document load? When you place the script after an element you can be sure it has loaded when the script runs but it's not my preference in general. I prefer to use the document loaded option.

jQuery also means you don't have to worry about the event binding support for different browsers. It's unlikely to be the problem but it's one less concern using the like of jquery.

19-11-2010 12:23pm

I'm only somewhat starting off but is there a difference between jquery and, say, javascript itself?

aidan_walsh · 19-11-2010 12:24pm

jQuery is just a Javascript library.

19-11-2010 12:26pm

Ah I see. I'm going to start looking into that now. It'll have many useful applications for a website I'll be working on after Christmas.

mewso · 19-11-2010 2:49pm

Sorry boneyarsebogman I wasn't sure how much you knew about javascript. While I would encourage people to learn javascript and get a good understanding of it I would recommend everyone eventually move on to a library. It just makes life too much easier.

19-11-2010 4:53pm

This may sound like a silly question but does it matter how you declare that it's JavaScript. I've found numerous examples like:

<script type = "text/javascript">
<script language = "JavaScript">

pixelburp · 19-11-2010 4:54pm

Like so:

<script src="/path/to/my/file.js" type="text/javascript"></script>

19-11-2010 4:57pm

pixelburp wrote: »

Like so:

<script src="/path/to/my/file.js" type="text/javascript"></script>

So with regards to that example, I would have all the javascript on a seperate file?

pixelburp · 19-11-2010 5:03pm

That's the syntax if you're calling an external file. If like in your example the JS is inline within the HTML, then it's like so:

<script type="text/javascript">

my code goes here...

</script>

The previous comments by Mewso still apply; if you're using JS, you should make sure the functions don't get called before the HTML is loaded. So if your JS is inline, it should be placed just before the closing </body> tag.

19-11-2010 5:10pm

That does make sense - thanks. I've taken out the javascript so it now looks like this:

<!doctype html>
<html lang="en">
<head>
	<title>Hover to Play Video with HTML5, CSS, and JavaScripthttp://www.roxy.com/home/index.jsp</title>



</head>
<body>
	<h1>Hover to Play Video Example</h1>
	<div id="wrapper">
		<video id="video-example" width="854" height="480"  loop controls>
			<source src="big_buck_bunny_480p_stereo.ogg" type="video/ogg"></source>
		</video>	
	</div><!--end wrapper-->
	<script src="js.js" type="text/javascript">

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

with the file "js.js" looking like this:

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

}

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

}

Still not working.

mewso · 19-11-2010 6:03pm

I couldn't get the video to work in Firefox at all with or without javascript. I just get an X but maybe I am using a version that can't handle it (3.6.12?).

It works in Chrome (I am on the Dev stream of Chrome so it's version 9.someting) but your script doesn't. Switching to jquery and it works perfectly.

<!doctype html>
<html lang="en">
<head>
    <title>blah</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script src="js.js" type="text/javascript"></script>
</head>
<body>
    <h1>Hover to Play Video Example</h1>
    <div id="wrapper">
        <video id="video-example" width="854" height="480"  loop controls>
            <source src="Pentagon_News_Sample.ogg" type="video/ogg"></source>
        </video>    
    </div>
    <div id="status"></div>    
</body>
</html>

www.jquery.com for the lastest version and here is the script in my js.js:-

$(document).ready(function () {
    $("#video-example").bind("mouseover", function () {
        $("#status").html("Playing");
        this.play();
    }).bind("mouseout", function () {
        $("#status").html("Paused");
        this.pause();
    });
});

I was updating a status div just to make sure everything was registering properly but you should see how simple jQuery makes things. In fact there is even a hover function in jquery that allowd you to pass two function, one for mouseover and one for mouseout. This also works:-

$(document).ready(function () {
    $("#video-example").hover(function () {
        $("#status").html("Playing");
        this.play();
    }, function () {
        $("#status").html("Paused");
        this.pause();
    });
});

*Edit - I wonder if there might be an issue with ogg video here. It only works in chrome for me and in chrome it takes ages to load.

19-11-2010 7:23pm

It seems that right now the video tags only support .mp4 and .ogg. I haven't tried it with .mp4 yet, as I was trying to go by the code I had found.

20-11-2010 3:48pm

Is it possible to have the smaller video boxes to act as buttons and, whatever is looping in those will get played on the larger one. In my head the way I'm attempting to do it now is:

<h1>Hover to Play Video Example</h1>
    <div id="wrapper">
        <video id="big-box" width="500" height="500" loop>
            <source src="big-box" type="video/ogg"></source>
        </video>

         <video id = "small-box" width="100" height="100" loop>
           <source src = "Version02.mp4" type="video/mp4"></source>
          </video>

with js.js including:

$(document).ready(function () {
    $("#big-box").bind("click", "small-box", function () {
        $("#status").html("Playing");
       <video> 
       <source src="big_buck_bunny_480p_stereo.ogg"></source>
      <video>  
      this.play();
       
});

but this is probably far off.

mewso · 20-11-2010 4:39pm

Your code looks a bit messed up there but I'm not entirely sure what you are going for. Several videos in small size playing constantly? Clicking on one gets that movie to play in the larger box?

20-11-2010 4:51pm

My code is usually pretty messed up at the beginning, until I get a better idea of what I'm doing. But yes, that is somewhat what I'm hoping for. Am I completely far off?

mewso · 20-11-2010 4:59pm

lol no I meant messed up as in some html has sneaked into your javascript. Something like this should work:-

<h1>Hover to Play Video Example</h1>
<div id="wrapper">
    <video id="big-box" width="500" height="500" loop>
        <source src="big-box" type="video/ogg"></source>
    </video>
    <video id="small-box1" width="100" height="100" class="thumbnail-video" loop>
        <source src="video1.mp4" type="video/mp4"></source>
    </video>
    <video id="small-box2" width="100" height="100" class="thumbnail-video" loop>
        <source src="video2.mp4" type="video/mp4"></source>
    </video>
    <video id="small-box3" width="100" height="100" class="thumbnail-video" loop>
        <source src="video3.mp4" type="video/mp4"></source>
    </video>
</div>

$(document).ready(function () {
    $(".thumbnail-video").bind("click", function () {
        $(#big-box").attr("src", $(this).attr("src"));
        $(#big-box").play();
    });
});

20-11-2010 5:13pm

Ah OK - I think in my head I was wondering if anytime you clicked on the box, the javascript would change the video. Thanks so much for your help - I'm only starting off fully now.

20-11-2010 9:46pm

So I tried out your code and for some strange reason it crashes google chrome and doesn't work in firefox either.

<!doctype html>
<html lang = "en">
<head>
    <script src="youtube-style.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
    <video id="big-box" width="500" height="500" loop>
        <source src="big-box" type="video/ogg"></source>
    </video>
    <video id="small-box1" width="100" height="100" class="thumbnail-video" loop>
        <source src="First Video.ogg" type="video/ogg"></source>
    </video>
    <video id="small-box2" width="100" height="100" class="thumbnail-video" loop>
        <source src="Second Video.ogg" type="video/ogg"></source>
    </video>
    <video id="small-box3" width="100" height="100" class="thumbnail-video" loop>
        <source src="Third Video.ogg" type="video/ogg"></source>
    </video>
</div>
</body>
</html>

(only changes I made were to the names of the video I intended to use)

with youtube-style.js looking like this:

$(document).ready(function () {
    $(".thumbnail-video").bind("click", function () {
        $(#big-box").attr("src", $(this).attr("src"));
        $(#big-box").play();
    });
});

mewso · 20-11-2010 10:06pm

Deleted User wrote: »

So I tried out your code and for some strange reason it crashes google chrome and doesn't work in firefox either.

<!doctype html>
<html lang = "en">
<head>
    <script src="youtube-style.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
    <video id="big-box" width="500" height="500" loop>
        <source src="big-box" type="video/ogg"></source>
    </video>
    <video id="small-box1" width="100" height="100" class="thumbnail-video" loop>
        <source src="First Video.ogg" type="video/ogg"></source>
    </video>
    <video id="small-box2" width="100" height="100" class="thumbnail-video" loop>
        <source src="Second Video.ogg" type="video/ogg"></source>
    </video>
    <video id="small-box3" width="100" height="100" class="thumbnail-video" loop>
        <source src="Third Video.ogg" type="video/ogg"></source>
    </video>
</div>
</body>
</html>

(only changes I made were to the names of the video I intended to use)

with youtube-style.js looking like this:

$(document).ready(function () {
    $(".thumbnail-video").bind("click", function () {
        $(#big-box").attr("src", $(this).attr("src"));
        $(#big-box").play();
    });
});

Yeah I can see my mistake now. src is not an attribute of the video element it's an attribute of the child source element so the code should be:-

$(document).ready(function () {
    $(".thumbnail-video").bind("click", function () {
        var thisSource = $(this).find("source").eq(0);
        var bigBoxSource = $(#big-box").find("source").eq(0);
        bigBoxSource.attr("src", thisSource.attr("src"));
        $(#big-box").play();
    });
});

The eq(0) is not strictly speaking necessary but I like to put it in when I only want the first child as a habit even if in this case there should only be one child. I can't test this but be sure to check for errors in firebug/chrome script thingy if there are any.

marguello · 14-11-2011 9:54pm

i'm not like code lvl200 but might be code lvl 10 and the code doesnt' work

both the first example and the one uy put i triad all ways, the closer i get is hover effect screen goes on black when hovered.

Giblet · 15-11-2011 10:00am

mewso wrote: »
Yeah I can see my mistake now. src is not an attribute of the video element it's an attribute of the child source element so the code should be:-
$(document).ready(function () {
    $(".thumbnail-video").bind("click", function () {
        var thisSource = $(this).find("source").eq(0);
        var bigBoxSource = $(#big-box").find("source").eq(0);
        bigBoxSource.attr("src", thisSource.attr("src"));
        $(#big-box").play();
    });
});
The eq(0) is not strictly speaking necessary but I like to put it in when I only want the first child as a habit even if in this case there should only be one child. I can't test this but be sure to check for errors in firebug/chrome script thingy if there are any.

Don't use attr (jQuery broke this in some releases) when you can use [0].src, also, slice > eq.

mewso · 15-11-2011 10:07am

Giblet wrote: »

Don't use attr (jQuery broke this in some releases) when you can use [0].src, also, slice > eq.

I wasn't aware they broke it but they may have in the year since I posted that.

Giblet · 15-11-2011 10:08am

mewso wrote: »

I wasn't aware they broke it but they may have in the year since I posted that.

Damn it!! Didn't realise it was old

mewso · 15-11-2011 10:18am

I do remember some breaking changes with attr but it was only in terms of prop being introduced for accessing/setting properties. I don't think it affected src since that is an attribute. Haven't used slice. Better performer?

Giblet · 15-11-2011 12:08pm

mewso wrote: »

I do remember some breaking changes with attr but it was only in terms of prop being introduced for accessing/setting properties. I don't think it affected src since that is an attribute. Haven't used slice. Better performer?

Native slice I mean, or just access the array directly! $(elem)[0].src

All attributes should use javascript objects rather than jquery ones, they all work fine
el.src
el.href
etc

freddyr0 · 12-04-2012 12:30am

Hello!,

Glad I joined this forum. I'm trying to build a grid of videos...where you can select them and play them in big. The thing is that I want this grid to be playing the videos in the thumbnails...without having to hover over it...is this easy to do? what do you guys think?

thanks a lot!

HTML5 on hover play video

Comments