我有一些嵌入代码,如:
<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进行硬编码,但只有在页面上有一个视频并且只是我不尝试“循环”视频时,播放/暂停才有效。
这是一个私人视频,如果重要的话 - 我们希望它只能在我们的网站上观看,而不是在Dailymotion上观看。
伪代码非常受欢迎,因为我发现他们的API文档对于新手来说有点不完整(例如没有指定参数是必需的还是可选的,并且没有列出可用的选项,例如在DM.Player初始化期间的参数和事件)
编辑:以下是我如何使用其他视频托管服务(YouTube,Vimeo,Brightcove等)访问视频API
我构建了一个包含特定类名的所有HTML元素的数组(回想一下,可以有多个视频)。假设类名是“.video”,所以我在页面上构建了一个包含所有“.video”的数组及其相应的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访问视频?
我不使用DailyMotion API,但我敲了这个可能对你有用的实验。
看看下面我的示例代码中的注释是否有助于您了解如何使用自己的按钮与JS函数以及如何处理视频“end
”事件等。
<!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>
也是关于
“......页面上可能有多个视频”
做一些“体验质量”测试。请确保您的用户不介意同时运行多个循环视频(例如:可能会降低页面/浏览器的速度,或者在移动设备上耗尽数据限额等)。
为了处理多个视频,我只想将每个视频播放器放在它自己的HTML页面中(如上面显示的代码),然后在主页面中加载指向每个播放器HTML的多个iframe。