I have a question about how to play / stop the video when I mouse over. The user placed the mouse over the image and the video started playing in the place of the image, and when it was moved, the image returned and the video disappeared. Is it possible and how? I tried something but I have not got what I want.
$(document).on('ready', function() {
$('.image').on('mouseover', function() {
$('.video-preview').toggleClass('video-preview-show');
})
})
.image img {
width: 272px;
height: 160px;
}
.video-preview {
width: 272px;
}
.video-preview {
display: none
}
.video-preview-show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image">
<img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>
<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
View on Codepen
Try with this
<div onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
<video width="400px" height="auto" muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
<source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Try the below code. This will help you
$('.image').hover(function() {
$('.video-preview').addClass('video-preview-show');
},
function() {
$('.video-preview').removeClass('video-preview-show');
});
Related
I was wondering if this is possible :
I have a movie with a Play button.
After click, the movie begins to play.
When the movie finish, I have a picture which cover my movie div.
Which options to use in my function:
<video src="video.com" id="myVideo">
</video>
<div class="images">
<img scr="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
const img = document.querySelector("img")
const video = document.querySelector("video")
function myHandler(e) {
// now the video has to hide, and show the img:
video.style.display = "none:
img.style.display = "block"
}
</script>
There are various options, including replacing the <video> tag with an <image> tag.
The easiest one I can think of is to have the image on a layer under the video, then when the video finishes, you can change layers (put image as the front layer and now video in the back layer).
When image is under the video, it has same size and position so to end-user it's invisible. This is set through the <style=> part where z-index is the layer position (higher number puts it above others of a lower number). The top and left options are the positions of up/down and left/right settings.
You can try using: (in the code below, I change their positions (not aligned) so you can see what is happening)...
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" width="550" height="400" controls style=" z-index: 2; top: 50px; left: 100px; position: absolute; );">
<source src="some_video.mp4" type="video/mp4">
</video>
<div id="myPic" class="images" width="550" height="400" style=" z-index: 1; top: 80px; left: 140px; position: absolute; );">
<img src="some_pic.jpg" />
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
const img = document.getElementById('myPic');
const video = document.getElementById('myVideo');
function myHandler(e)
{
// now the video has to hide, and show the img:
//video.style.display = "none:
//img.style.display = "block"
//# swap their layer positioning
img.style.zIndex = "2"; //# makes top
video.style.zIndex = "1"; //# makes bottom
}
</script>
</body>
</html>
I'm not sure if there's something else to it other than simply showing an image when the video is not playing, if that's not the case, the video tag has a poster attribute:
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I want to make video responsive in html.For that i'm using video tag.
Following is the code i've tried.
<video controls autoplay="true" loop class="video_travel">
<source src="video/video.mp4" type="video/mp4">
<source src="video/video.webm" type="video/webm">
<source src="video/video.ogv" type="video/ogg">
</video>
Now when i opened the website which contains the video in mobile phone , what i'm getting is there will be a play button , but can't play anything.Please help..
Use Css Property-
video {
width: 100%;
height: auto;
}
You can use "max-width:100%" check snippet below..
video {
max-width: 100%;
height: auto;
}
<video controls autoplay loop class="video_travel">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>
Have you tried this
video {
width: 100% !important;
height: auto !important;
}
I am trying to play video while hovering over images at the same div in my website's img-gallery but obviously i am doing something wrong.
The supposingly hidden image over which the video should play on mouseover starts trempling.
I think its something obvious but i don't have enough experience to solve it.
Is there any idea how to hide the image at hovering for good?
Here is the code:
HTML
<div id="container">
<div class="viewer">
<img class="thumb" target="#video_1" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_2" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" target="#video_3" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
CSS
.viewer {
width: 530px;
height: 290px;
display:inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
JS
$(document).ready(function() {
$('.thumb')
.mouseover(function() {
$(this).hide();
var myVid = $(this).attr('target');
$( myVid ).show().trigger('play');
})
.mouseout(function() {
$('video').trigger('pause').hide()
$(this).show();
});
});
Here is also a saved [PEN]:https://codepen.io/anon/pen/oEwRJQ
The issue with your code is because you're hiding the .thumb element in the mouseover event which immediately triggers the mouseout event which shows it again. This causes a loop of hiding/showing which results in the flickering you see.
To fix this, hook the event to a parent element of both the thumb and the video. That way you don't need to use the non-standard target attribute and can instead find the related video element using DOM traversal, making the code more extensible and robust. You can also use the mouseenter and mouseleave events to prevent any possible flickering when near the edges of the hit area.
$(function() {
$('.viewer').mouseenter(function() {
var $el = $(this);
$el.find('.thumb').hide();
$el.find('video').show()[0].play();
}).mouseleave(function() {
var $el = $(this);
$el.find('.thumb').show();
$el.find('video').hide()[0].pause();
});
});
.viewer {
width: 530px;
height: 290px;
display: inline-block;
}
video {
width: 100%;
height: 100%;
position: relative;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_1" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_2" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
<div class="viewer">
<img class="thumb" src="https://1.bp.blogspot.com/-76jgnJ-JmHU/VBZvGw5LDWI/AAAAAAAAAGs/C0yoeoqoouU/s1600/golesengif.png">
<video id="video_3" preload loop>
<source src="https://fat.gfycat.com/ShockingDependableHogget.webm" type="video/webm">
No video support
</video>
</div>
</div>
$(document).ready(function() {
$('.viewer').each(function(){
var $this = $(this);
$this.mouseover(function() {
$(this).find('.thumb').hide();
$('video', $this).show().trigger('play');
})
$this.mouseout(function() {
$('video', $this).trigger('pause').hide()
$(this).find('.thumb').show();
});
});
});
I have a question please I got an HTML playing video on hover but once I go away with the mouse I got a hide video function, what I try to do is once I leave the mouse from the playing video to show the placeholder image again something like an Overlay on top of the video. I hope someone can please help me with this.
Here is a live example of the code https://jsfiddle.net/the_nexi/514pwkeo/2/
Thanks in advance
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); });
$(this).on("mouseout", function() { hideVideo(i); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>If you hover over this Thumbnail the Video will start but once you move the mouse away from the image the Thumbnail (Poster) should appear again with an Overlay this is what I try to do.</p>
<div class="video">
<video class="thevideo" loop muted preload="auto" poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", hoverVideo);
$(this).on("mouseout", hideVideo);
});
});
function hoverVideo() {
$(this).find(".overlayImage").hide();
$(this).find(".thevideo")[0].play();
}
function hideVideo(video) {
$(this).find(".thevideo")[0].currentTime = 0;
$(this).find(".thevideo")[0].pause();
$(this).find(".overlayImage").show();
}
* {
font-family: sans-serif
}
.video {
position: relative;
width: 320px;
}
.overlayImage {
position: absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="http://hdwarena.com/wp-content/uploads/2017/04/Beautiful-Wallpaper.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/rWaXO67Bipm9mgo7/videoblocks-4k-footage-disco-lights-as-an-abstract-colored-animated-background-or-wallpaper-light-leaks_sl5jole0z_thumbnail-small01.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<div class="video">
<img src="https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/BxWKHw2nWj8nx9c2x/videoblocks-red-wallpaper-slider_rxlvi6ltb_thumbnail-small11.jpg" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
In this, every video is separate from each other, allow me to explain why:
I changed the way you set the functions for the events mouseover and mouseout and now they are event functions.
Inside the functions hoverVideo() and hideVideo(), we hide the image and play the video using $(this) which is passed through the $.on() as the correspondent video div and find the elements (video and image) with $.find().
Optional: I added the width:320px in the css because it was somewhat annoying that it continued playing the video outside of the video because of the bigger width.
If you want you can get rid of the class tags, and use the $.find() function like this, for example:
$(this).find("video")[0].currentTime = 0;
$(this).find("video")[0].pause();
$(this).find("img").show();
In this way it will find every video element inside the div with the .video class and do the rest from there, the same for img.
I hope this code helps you.
$(document).ready(function() {
$('.video').each(function(i, obj) {
$(this).on("mouseover", function() { hoverVideo(i); $(this).find(".overlayImage").hide(); });
$(this).on("mouseout", function() { hideVideo(i); $(this).find(".overlayImage").show(); });
});
});
function hoverVideo(i) {
$('.thevideo')[i].play();
}
function hideVideo(i) {
$('.thevideo')[i].currentTime = 0;
$('.thevideo')[i].pause();
}
*{font-family: sans-serif}
.video {
position:relative;
}
.overlayImage {
position:absolute;
}
<div class="video">
<img src="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217" class="overlayImage" width="320" />
<video class="thevideo" loop muted poster="https://peach.blender.org/wp-content/uploads/bbb-splash.png?x11217">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
I hope this updated code help you
As you can see I have a question about playing/stoping video on hover. The user would hover the mouse on video and it would start playing and when he move the mouse away video would stop playing. Is it possible and how? I have video tag here
<video id="video" controls="" loop="" src="/wp-content/uploads/2016/06/vid/elipsiniai-treniruokliai.mp4" width="auto" height="auto" alt=""></video>
Update
A fix is added for the error that was thrown in the console when hovering over the videos (tested in chrome)
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
adding muted="muted" attribute to the video tag fixes the problem. For details see this answer
Here you go
$(document).ready(function() {
$(".myvideos").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
<video class="myvideos" controls="" loop="" src="http://vjs.zencdn.net/v/oceans.mp4" width="auto" height="auto" alt="" muted="muted"></video>
Try:
$("#video").hover(
()=>{ $(this).get(0).play(); },
()=>{ $(this).get(0).pause(); }
);
For this you have to use javascript. Easiest would be some kind of implementation with jQuery/javascript implementation.
You could also find this easily on the internet, this took me 3 seconds just by typing the "video on hover" in google: https://codepen.io/gil--/pen/bNxZWg
Html:
<div id="videosList">
<div class="video">
<video class="thevideo" loop preload="none">
<source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
</video>
</div>
</div>
You need to watch for hover event on video tag.
var figure = $(".video").hover( hoverVideo, hideVideo );
Now you add a function that plays video on hover:
function hoverVideo(e) {
$('video', this).get(0).play();
}
And when user leaves the video you add another function:
function hideVideo(e) {
$('video', this).get(0).pause();
}
To make a video play/pause on hover, try this:
JS:
var figure = $(".video").hover(hoverVideo, hideVideo);
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
CSS:
video::-webkit-media-controls {
display:none !important;
}