iOS 设备上的 Dailymotion 嵌入式播放器 (HTML5)答案

【问题标题】：Dailymotion embedded player on iOS devices (HTML5)iOS 设备上的 Dailymotion 嵌入式播放器 (HTML5)
【发布时间】：2015-11-25 23:35:38
【问题描述】：

我有一个使用 Player api (http://www.dailymotion.com/doc/api/player.html) 的 Dailymotion 嵌入式播放器。它在台式机和 Android 平板电脑上运行良好。但在 iOS 设备上，视频无法启动。我的代码如下：

<!-- This <div> tag will be replaced the <iframe> video player -->
<div id="player"></div>

<script>
    // This code loads the Dailymotion Javascript SDK asynchronously.
    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//api.dmcdn.net/all.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    }());

    // This function init the player once the SDK is loaded
    window.dmAsyncInit = function()
    {
        // PARAMS is a javascript object containing parameters to pass to the player if any (eg: {autoplay: 1})
        var player = DM.player("player", {video: 'somevideoid', width: "100%", height: "100%", params: {autoplay: 0}});

        // 4. We can attach some events on the player (using standard DOM events)
        player.addEventListener("apiready", function(e)
        {
            e.target.play();
        });
    };
</script>

【问题讨论】：

标签： ios html dailymotion-api

【解决方案1】：

您的代码完全有效。问题是大多数移动设备，包括 iOS 设备，都阻止自动播放视频（请参阅Apple documentation : Safari HTML5 Audio and Video Guide）。在这些设备上，第一次播放必须由用户交互触发，例如触摸播放按钮，否则浏览器会忽略它。

apiready 事件由 Dailymotion SDK 触发，不是用户事件。这就是为什么 play() 方法对视频没有影响的原因。

[编辑]：~~您宁愿从另一个事件侦听器调用play() 方法，例如click 或touchend 事件。~~。此外，由于 Dailymotion 播放器嵌入在 <iframe> 中，父页面和 <iframe> 之间的通信将始终被浏览器视为 程序化 事件，无论原始事件是否来自父页面是否来自用户。

TLDR：在移动设备上，您必须等待用户触摸播放器的开始屏幕。

【讨论】：