Table of content

How to play the video sound on Player hover with the Platform API


You can easily customize the user experience by setting different options on your Dailymotion Player. One of the recurring question our API support team receives is “how to play the sound only when the cursor hovers over the video?“. 

To unmute a video on Player hover, use this code sample:

// Dailymotion video
var player = DM.player(document.getElementById("player"), {
    video: "x70val9",
    width: "100%",
    height: "400",
    params: {
        autoplay: false,
        mute: true,
    }
});

// Wait for apiready event to use the API
player.addEventListener('apiready', function() {

    player.addEventListener("mouseover", function() {
        player.setMuted(false);
    });
    player.addEventListener("mouseout", function() {
        player.setMuted(true);
    });
});
Note:

We do not recommend combining this with the autoplay:true parameter. As mouseover is not considered as a proper user interaction, web browser might prevent the video playback as soon as the player.setMuted(false)method is called.