0

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();
});
Code Genie
  • 11
  • 1
  • 6
  • 4
    I think this is just a window focus issue. You are in a browser, this is a sandbox and does not have access to the machine or its API, so in order for your page to capture events it must have the focus (i.e. you clicking on it ) – Bibberty Dec 30 '18 at 02:55

2 Answers2

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.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
0

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: https://stackoverflow.com/a/50742427/5572739

kemtopher
  • 1
  • 1
  • 1