Image On Hover Play Video And Reset the div with image on completion

user_17598016 0
Viewed 486

I would like to show thumbnails for videos on load and on hover or touch I want to play the video inside the parent div of the image. On mouseout and video ends, the div should show the image automatically. How can I do it?

In simple, I need a homepage just like youtube page. I will show the images first and on hover it should play or pause respective videos.

css jquery javascript
2 Answers

Can you try this enter image description here:

var vid = document.getElementById("myVideo"); 
var text = document.getElementById("text"); 
function playVid() { 
  vid.play(); 
  text.innerHTML = "Start Video";
} 

function pauseVid() { 
  vid.pause(); 
  text.innerHTML = "Stop Video";
} 
<!DOCTYPE html> 
<html> 
<body> 
<video muted="muted" id="myVideo" onmouseenter="playVid()" onmouseleave="pauseVid()"> 
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<p id="text"></p>

</body>
</html>

user_174978620

Check out If That's What You Want Here It Is (Play video on hover over image)

<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>

Html

<div id="content" style="width: fit-content;">
    <img id="image" src="resources/thumb.png" />
    
    <video id="video" style="display:none;">
        <source src="resources/video_test.mp4" autoplay="true" muted="muted" type="video/mp4" />
    </video>
</div>

jquery script

<script>
//onHover function
$(document).on('mouseover', '#content', function() {
    $(this).find("#image").css("display", "none");
    $(this).find("#video").css("display", "block");
});

//play video on hover
$(document).on('mouseover', 'video', function() {
    $(this).get(0).muted = true;
    $(this).get(0).load();
    $(this).get(0).play();
}); 

//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
    $(this).get(0).currentTime = 0;
    $(this).get(0).pause();
    //hideVideo
    $(this).css("display","none");
    $(this).find("#image").css("display","block");
});

//show video controls on Click
$(document).on('click', 'video', function() {
    if($(this).attr('controls')) {
        $(this).removeAttr('controls');
    }else {
        $(this).attr('controls', '');
    }
});
</script>
user_120429090
Related