iOS设备上的Dailymotion嵌入式播放器（HTML5）

问题描述

我有一个使用Player api的Dailymotion嵌入式播放器（）。它适用于桌面和Android平板电脑。但在iOS设备上，视频只是无法启动。我的代码如下：

 <！ -  This< div>标签将被替换为< iframe>视频播放器 - > 
< div id =player>< / div> 
 
< script> 
 //此代码异步加载Dailymotion Javascript SDK。 
（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）; 
}（））; 
 
 //这个函数在SDK被加载后初始化播放器
 window.dmAsyncInit = function（）
 {
 // PARAMS是一个javascript对象，包含参数（如：{autoplay：1}）
 var player = DM.player（player，{video：'somevideoid'，width：100％，height：100％） ，params：{autoplay：0}}）; 
 
 // 4.我们可以在播放器上添加一些事件（使用标准DOM事件）
 player.addEventListener（apiready，function（e）
 {
 e.target.play（）; 
}）; 
}; 
< / script> 
  

解决方案

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

apiready 事件由Dailymotion SDK触发，不是用户事件。这就是为什么 play（）方法对视频没有影响的原因。 'd从另一个事件侦听器调用 play（）方法，比如点击或 touchend 事件。。
另外，由于Dailymotion Player嵌入在< iframe> 中，父页面和< iframe>无论父页面的原始事件是否来自用户，浏览器始终将视为 programmatic 事件。

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

I have a Dailymotion embedded player using the Player api ( http://www.dailymotion.com/doc/api/player.html ) . It works well on a Desktop and a Android Tablet. But on a iOS device, the video just doesn't start. My code is as follows:

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

解决方案

Your code is perfectly valid. The thing is that most mobile devices, including iOS devices, prevent videos from being played automatically (see Apple documentation : Safari HTML5 Audio and Video Guide). On those devices, the first play must be triggered by a user interaction, such as touching the play button, otherwise it's ignored by the browser.

The apiready event is triggered by the Dailymotion SDK and is not a user event. That's why the play() method as no effect on the video.

[Edit]: .Also, as the Dailymotion Player is embedded within an <iframe>, the communication between the parent page and the <iframe> will always be considered as a programmatic event by the browser, no matter if the original event from the parent page comes from a user or not.

TLDR: On mobile device, you must wait for the user to touch the player's start screen.

这篇关于iOS设备上的Dailymotion嵌入式播放器（HTML5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！