Say i have a html5 vedio with mouse hovering of pausing and running in relation to cursor and code is working finely.I useing code as: from.js:
// 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();
And index.html page:
<!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="video_container">
<div id="video_container">
<video id="video" width="480" height="270" controls autoplay
autobuffer preload="metadata">
<source src="video/browser.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
</source>
<source src="video/browser.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
Your browser does not support the video element.
</video><br/>
<div id="video_container">
<video id="video" width="480" height="270" controls
autoplay autobuffer preload="metadata">
<source src="video/browser.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'></source>
<source src="video/browser.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
Your browser does not support the video element.
</video><br/>
<script src="js/from.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>
But i am want that a square should appear on vedio particulary showing face or just a square in vedio on mouse entering and removing square on leaving??I am new to this and no idea how to do.Please help.I have imagined how square will show on vedios.Look at http://imgur.com/LjioiAd.It is not compulsory suare must be on face,it can be anywhere.But if in a face then more useful.Pleasesupport or suggest any help
