Develop Reference

HTML5 videos don't autoplay with tippy js

I use tippy.js and when I add a <video loop muted playsinline autoplay> inside a tooltip using allowHTML: true, the video won't autoplay on chrome. It works on firefox and safari though.
How can I achieve this?
Here is my js:
const modal = card.querySelector('.modal'),
modalContent = modal.innerHTML`
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false
});
And here is my html:
<div class="modal">
<div>
<video loop muted playsinline autoplay>
<source src="http://localhost:8888/artifacts/wp-content/uploads/2022/05/Artifacts-Landing.mp4" type="video/mp4">
</video>
</div>
</div>
I tried to add
card.querySelector('video').play()
but it doesn't work eather.
Thanks a lot in advance for your help,

It is indeed strange that a muted video would not autoplay. You can use setTimeout and then trigger play() using the onShow() event. For some reason onShown() doesn't ever fire for me.
Here's a working snippet:
const modal = document.querySelector('.modal'),
modalContent = modal.innerHTML;
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false,
onShow(instance) {
setTimeout(() => {
let video = instance.popper.getElementsByTagName('video')[0];
video.currentTime = 0; //start from begining
video.play();
}, 1);
},
});
.modal {
display: none;
}
video {
width: 40vw;
}
.card {
padding-top: 10vh;
}
h1{
display:inline;
margin:1em;
}
<!-- Production -->
<h1 class="card">CARD 1</h1>
<h1 class="card">CARD 2</h1>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://unpkg.com/tippy.js#6"></script>
<div class="modal">
<div>
<video loop muted playsinline autoplay>
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm.720p.vp9.webm" type="video/mp4">
</video>
</div>
</div>

HTML5 Video Play on Hover

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');
});

Play video on image mouseover causes trempling glitch

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();
});
});
});

Get an overlay or placeholder on pause using autoplay on Hover HTML Video

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

HTML, JS How to play/stop video on hover

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;
}