播放暂停多个Vimeo视频
play pause multiple vimeo videos
我找到了从单独的按钮开始/暂停多个vimeo视频的解决方案,但我想使用图像进行播放和暂停按钮。
谁能帮我修改代码?我想我需要用图像替换 html 按钮代码,然后在 javascript 中引用它们,但我似乎无法让它工作。
非常感谢。
我的网址是:
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
<div>
<div>
<h1>Player 2</h1>
<div class="api_output"></div>
<iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
javascript是:
var VimeoEmbed = {};
VimeoEmbed.init = function(e)
{
//Listen to the load event for all the iframes on the page
$('iframe').each(function(index, iframe){
iframe.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
});
};
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('button.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
//On document ready
$(document).ready(VimeoEmbed.init);
我想它会是这样的
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<img class="simple" id="api_play" src="play.png">
<img class="simple" id="api_pause" src="pause.png">
<!-- ... same for player 2 -->
在 js 中
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('img.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
相关文章:
- 多个Vimeo视频与FlexSlider JS
- 加载vimeo视频的前15秒
- Node webkit 应用程序在加载 Vimeo 视频时崩溃
- 将YouTube/Vimeo视频转换为无声的动画图像(想想哈利波特中的“动态图片”)
- 在 Angular js 中嵌入来自 json 响应的 Youtube 视频网址和 Vimeo 视频网址时出现问题
- 播放暂停多个Vimeo视频
- 如何在点击图像后播放/启动vimeo视频
- 当我在页面上有多个视频时,我如何针对特定的Vimeo视频
- 静音+自动播放几个vimeo视频
- 当使用javascript onblur时,在Iframe中暂停youtube和/或vimeo视频
- 使用ajax调用vimeo视频
- 如何在Javascript中暂停Vimeo视频
- Froogaloop2 Vimeo视频播放器-开始视频在全屏
- 从最后的进度恢复Vimeo视频
- 如何使用javascript将vimeo视频源更改为本地mp4视频
- 更多的Vimeo视频在一个单一的播放器自动播放
- 如何使用Javascript动态地播放多个youtube或vimeo视频一个接一个
- 我如何让我的嵌入式Vimeo视频动态调整屏幕的宽度
- 如何有一个Vimeo视频从它离开的地方,当页面重新加载cookie
- JW播放器不播放DAILYMOTION和VIMEO视频,但YOUTUBE视频工作得很好