March 5, 2019
|
Player API

How to play the video sound on Player hover with Dailymotion’s API

You can easily customize the user experience by setting different options on Dailymotion’s 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);
    });
});

As you can see below, the mouse cursor is now the sound trigger:

Note: We do not recommend combining this example 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.

Learn more about our Player customization features