Search code examples
javascriptiosgoogle-chromedailymotion-api

dailymotion api initial play

I'm trying to use the dailymotion api and I'm having problems with iphone and chrome on a mac.

In chrome, I have the autoplay set to true and it should work but it doesn't. I get a "play" button for flash on top when I load the player. And I cannot use the play api. Once I click on this button, I can use the api normally. The html version does not work at all on chrome.

Also on iPhone, I know that the autoplay should not work and it's normal. However if I use the api to do a play, it display another button inside the container that I need to click or the video won't start. Again once this initial click is done, play/pause using the api is working normally.

My code:

<!DOCTYPE html>
<html>
<head>
    <title>test dailymotion</title>
    <script src="https://api.dmcdn.net/all.js"></script>
</head>
<body>

    <div id="player-dailymotion"></div>
    <button id="play">Play</button>
    <button id="pause">Pause</button>

</body>
<script type="text/javascript">

//Give time to load dailymotion script
setTimeout(function() {
    DM.init({
    apiKey: '',
    status: false, // check login status
    cookie: true // enable cookies to allow the server to access the session
});

var player = DM.player(
    document.querySelector('#player-dailymotion'), 
    {
        video: 'x1safo9',
        width: '400px',
        height: '200px',
        params: {
            autoplay: 1,
            chromeless: 1
        }
    }
);

document.querySelector('#play').addEventListener('click', function() {
    console.log('click on play');
    player.play();
});

document.querySelector('#pause').addEventListener('click', function() {
    console.log('click on pause');
    player.pause();
});

}, 1000);


</script>
</html>

example on jsfiddle:

https://jsfiddle.net/uq8gftcy/1/

Is there a way to use the api to start the video the first time on iPhone ? And why autoplay is not working on my chrome mac ?

[Update] I found an article talking about a chrome update and they are now blocking all flash content by default. How can I use dailymotion html version then ?

Solution

  • Your two issues are normal behaviors of the video player:

    • autoplay on chrome: chrome blocks flash player under a certain size, so a user interaction is needed to play the video. Try to set a bigger player (like 738x432), you'll get the expected behavior.
    • on iOS: this is an iOS restriction. Calling play() from a button outside the player iframe is not considered as a real user interaction, so you must wait for the user to touch the player's start screen. See Dailymotion embedded player on iOS devices (HTML5) for more detailed info.

    You can check other video providers, the behavior is the same as it is dependant on the OS / browser's choices.