Okay, so, my problem is that I have a video in my HTML and I managed it to set it up to play on the mouse hover, but the problem is that it dosen’t work until I clicked anywhere on my Website first. For example: If I try to play video by hovering mouse over it, it won’t play. But if I click first anywhere on the site, then it’s working. How do I fix that? I want to be able to play my video without having to click somewhere first.
Here’s my code:
JavaScript:
<!-- Mouse hover over .video1 to play -->
var $video1 = $(".video1");
$video1.on("mouseenter focus", function () {
$video1.get(0).play();
});
1
I found the best answer for this to be adding the muted attribute to the video element. This allows the video to autoplay without requiring a user gesture first. Explained in more detail here: /a/50742427/5572739
0
It’s a new thing recently implemented – the user is required to interact with the page, with either a click or a keypress, before any video or audio can play. So no, this is not possible – but to get around this, you can just add a confirm dialog to the top of your page:
$(function() {
confirm();
var $video1 = $(".video1");
$video1.on("mouseenter focus", function () {
$video1.get(0).play();
});
});
What the above code does is it forces the user to either press “Enter” or “Esc”, or to click “Cancel” or “Confirm”, to dispel the alert box, so your video will play automatically after that.
1