dailymotion api初始播放答案

【问题标题】：dailymotion api initial playdailymotion api初始播放
【发布时间】：2015-11-24 16:48:15
【问题描述】：

我正在尝试使用 dailymotion api，但在 Mac 上使用 iphone 和 chrome 时遇到问题。

在 chrome 中，我将自动播放设置为 true，它应该可以工作，但它没有。当我加载播放器时，我会在顶部看到一个用于 Flash 的“播放”按钮。而且我不能使用 play api。单击此按钮后，我可以正常使用该 api。 html版本在chrome上根本不起作用。

同样在 iPhone 上，我知道自动播放不应该工作，这是正常的。但是，如果我使用 api 进行播放，它会在容器内显示另一个我需要单击的按钮，否则视频将无法启动。再次完成此初始点击后，使用 api 播放/暂停即可正常工作。

我的代码：

<!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>

jsfiddle 上的示例：

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

有没有办法使用 api 在 iPhone 上首次启动视频？为什么自动播放在我的 chrome mac 上不起作用？

[更新] 我发现一篇关于 chrome 更新的文章，他们现在默认阻止所有 flash 内容。那么如何使用dailymotion html版本呢？

【问题讨论】：

其实chrome现在屏蔽了所有flash内容：arstechnica.com/information-technology/2015/08/…

标签： javascript ios google-chrome dailymotion-api

【解决方案1】：

您的两个问题是视频播放器的正常行为：

在 chrome 上自动播放：chrome 在一定大小下会阻止 Flash 播放器，因此需要用户交互才能播放视频。尝试设置更大的播放器（如 738x432），您将获得预期的行为。
在 iOS 上：这是一个 iOS 限制。从播放器 iframe 外部的按钮调用 play() 不被视为真正的用户交互，因此您必须等待用户触摸播放器的开始屏幕。有关更多详细信息，请参阅Dailymotion embedded player on iOS devices (HTML5)。

您可以检查其他视频提供商，其行为与取决于操作系统/浏览器的选择相同。

【讨论】：