Question

我有一些嵌入代码：

<iframe id="video1" class="video" src=""//www.dailymotion.com/embed/video/VIDEO_ID?autoPlay=1&wmode=transparent&loop=1&controls=0&showinfo=0&api=1&endscreen-enable=0&mute=1" allowfullscreen="true" frameborder="0" width="560" height="349"></iframe>

我正在尝试使用Javascript访问此视频，但事先不知道视频ID（必须能够在我们的CMS中设置并由任何编辑器更改）。此外，页面上还可以有多个视频。无法在.js文件中对视频ID进行硬编码。

使用Javascript API，我需要编写一个自定义的播放/暂停功能（传入他们点击的按钮对象），还要检测视频何时结束并重新启动它（模仿循环，Dailymotion显然是这样做的）不支持某种原因）。但似乎呼吁：

DM.Player(document.getElementById(iframeID), { video: VIDEO_ID})

需要知道视频的ID（我确实知道视频所在的iFrame ID，但显然不足以像其他视频平台一样访问播放器。）

然后，我需要能够创建一个函数来根据用户是否单击特定视频上的播放/暂停切换来调用播放或暂停。我的Javascript知识并不是很好，但我已经能够通过知道iframe ID与其他平台一起做到这一点。如果我对视频ID进行硬编码，但只有在页面上有一个视频时才会播放/暂停，只有当我不尝试“＃34; loop＆＃34;视频。

这是一段私人视频，如果重要的话 - 我们希望它只能在我们的网站上观看，而不是在Dailymotion上观看。

伪代码非常受欢迎，因为我发现他们的API文档对于新手来说有点不完整（例如没有指定参数是必需的还是可选的，并且没有列出可用的选项，例如在DM.Player初始化期间的参数和事件）

编辑：以下是我使用其他视频托管服务（YouTube，Vimeo，Brightcove等）访问视频API的方式

我构建了一个包含特定类名的所有HTML元素的数组（回想一下，可以有多个视频）。假设班级名称为＆＃34; .video＆＃34;所以我建立了一个所有＆＃34; .video＆＃34;在页面上及其相应的HTML ID。然后我使用document.getElementById用播放器填充数组。

然后在播放/暂停点击功能中，我可以像这样访问视频：

var player = players[index];
var state = player.getPlayerState();
if (state == 1) {
     player.pauseVideo();
}
else {
     player.playVideo();
}

这对Dailymotion不起作用，因为必须事先知道实际的DM视频ID（而不是HTML元素的ID）。我想知道是否有办法在不知道视频ID的情况下通过Javascript API访问视频？

Answer 1

我没有使用DailyMotion API，但我敲了这个可能对你有用的实验。

看看下面我的示例代码中的注释是否有助于您了解如何使用自己的按钮与JS功能以及如何处理视频＆＃34; end＆＃34;事件等。

<!DOCTYPE html>
<html>
<body>

<!-- 1. Load DailyMotion API (Javascript) -->
<script src='https://api.dmcdn.net/all.js'> </script>

<!-- 2. Create container for DM Player instance  -->
<div id='player'></div>

<!-- 3. Javascript stuff goes here -->
<script>

    //Set VIDEO_ID (retrieve or update from your CMS)
    //**example** var VIDEO_ID = get_video_id.php **where PHP returns/echo the text of ID**

    var VIDEO_ID = "xwr14q"; //update this via your CMS technique

    //Create DM Player instance//
    var player = DM.player(document.getElementById('player'), {
    video: VIDEO_ID,
    width: "100%", height: "100%",
    params: { autoplay: false, mute: true }


    });

    //Handle video ending (seek back to zero time)//
    player.addEventListener('end', function (evt) { evt.target.currentTime = 0; evt.target.play() } );

    //Control functions for DM Player instance//
    function func_Play()
    { player.play(); }

    function func_Pause()
    { player.pause(); }

</script>



<p>

<!-- Buttons for play pause -->
<button onclick="func_Play()"> PLAY </button>

<button onclick="func_Pause()"> PAUSE </button>

</p>

</body>
</html>

还有关于

＆＃34; ...页面上可以有多个视频＆＃34;

做一些＆＃34;体验质量＆＃34;试验。请确保您的用户不要介意同时运行多个循环视频（例如：可能会降低您的网页/浏览器的速度，或者在移动设备上耗尽数据限额等）。

要处理多个视频，我只想将每个视频播放器放入其自己的HTML页面（如上面显示的代码），然后在主页面中加载多个指向每个播放器HTML的iframe。 / p>

如果视频ID未知，如何使用JS API访问Dailymotion视频？

1 个答案: