Member Avatar for rani_4

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

  • 2 Contributors
  • 1 Reply
  • 239 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by gabrielcastillo

Dani AI

Generated

The current thread shows code that already toggles play/pause on hover, but it doesn’t add a visible overlay. To show a square when the cursor enters the video area you can add a positioned overlay DIV on top of the video and move it with mouse events. asked for an optional face-highlighting box; pointed to face‑detection resources, which is the next step after the simple overlay.

A minimal, non‑detection solution (works in any browser, cheap on CPU):

/* add to your stylesheet */
#video_container { position: relative; display: inline-block; }
.video-overlay {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #fff;
  background: rgba(0,0,0,0.25);
  pointer-events: none;   /* lets mouse events pass to the video */
  transform: translate(-50%,-50%);
  display: none;
}
// add next to your video HTML (not the play/pause code shown earlier)
const container = document.querySelector('#video_container');
const overlay = document.createElement('div');
overlay.className = 'video-overlay';
container.appendChild(overlay);

container.addEventListener('mouseenter', () => overlay.style.display = 'block');
container.addEventListener('mousemove', e => {
  const r = container.getBoundingClientRect();
  overlay.style.left = (e.clientX - r.left) + 'px';
  overlay.style.top  = (e.clientY - r.top)  + 'px';
});
container.addEventListener('mouseleave', () => overlay.style.display = 'none');

If you want the box to follow a detected face, use a JS face detector (face-api.js / OpenCV.js, etc.). Workflow: draw the current video frame to a small offscreen canvas, run the detector at a low rate (5–10 FPS), get the detection box, and update the overlay position/size to match the box. Important notes: drawing video to canvas requires same-origin or CORS-enabled video, and detection is CPU/GPU heavy—downscale frames and throttle detection to keep performance acceptable. For mobile, remember hover doesn’t exist; use touch events instead.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.