Vimeo 播放器在您播放任何视频时暂停另一个视频
Vimeo player pause another video when you play any video
当我播放第一个视频然后播放第二个视频时,我的页面中有 2 个 Vimeo 播放器,第一个暂停。
var vid1=new Vimeo.Player($('.one'));
var vid2=new Vimeo.Player($('.two'));
$('.btnonePlay').on('click',function(){
vid1.play();
})
$('.btnonePause').on('click',function(){
vid1.pause();
})
$('.btntwoPlay').on('click',function(){
vid2.play();
})
$('.btntwoPause').on('click',function(){
vid2.pause();
})
重现问题的步骤:
- 点击播放视频一
- 点击播放视频二
玩家一会在点击 'play video two' 按钮时暂停。
Working example on jsFiddle.
完整代码也在下面的代码片段中。
var vid1 = new Vimeo.Player($('.one'));
var vid2 = new Vimeo.Player($('.two'));
$('.btnonePlay').on('click', function() {
vid1.play();
})
$('.btnonePause').on('click', function() {
vid1.pause();
})
$('.btntwoPlay').on('click', function() {
vid2.play();
})
$('.btntwoPause').on('click', function() {
vid2.pause();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/286183716">Annihilation Song | Rubblebucket (Official Music Video)</a> from <a href="https://vimeo.com/amandabonaiuto">Amanda Bonaiuto</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<button class="btnonePlay"> Play video one</button>
<button class="btnonePause"> Pause video one</button>
<div class="two">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/286183716">Annihilation Song | Rubblebucket (Official Music Video)</a> from <a href="https://vimeo.com/amandabonaiuto">Amanda Bonaiuto</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<button class="btntwoPlay"> Play video two</button>
<button class="btntwoPause"> Pause video two</button>
默认情况下,我们在 Vimeo 视频上启用 autopause
。自动暂停是指一个视频在另一个视频开始播放时自动暂停。大多数人不希望同时播放两个视频。
但是,如果您确实需要,可以使用附加到 url ?autopause=0
的嵌入参数来关闭自动暂停。我已经调整了你的 jsfiddle 以相应地工作。 Working JSFiddle!
您可以从我们的 API readme or this help article 了解有关可用嵌入参数的更多信息。
当我播放第一个视频然后播放第二个视频时,我的页面中有 2 个 Vimeo 播放器,第一个暂停。
var vid1=new Vimeo.Player($('.one'));
var vid2=new Vimeo.Player($('.two'));
$('.btnonePlay').on('click',function(){
vid1.play();
})
$('.btnonePause').on('click',function(){
vid1.pause();
})
$('.btntwoPlay').on('click',function(){
vid2.play();
})
$('.btntwoPause').on('click',function(){
vid2.pause();
})
重现问题的步骤:
- 点击播放视频一
- 点击播放视频二
玩家一会在点击 'play video two' 按钮时暂停。
Working example on jsFiddle.
完整代码也在下面的代码片段中。
var vid1 = new Vimeo.Player($('.one'));
var vid2 = new Vimeo.Player($('.two'));
$('.btnonePlay').on('click', function() {
vid1.play();
})
$('.btnonePause').on('click', function() {
vid1.pause();
})
$('.btntwoPlay').on('click', function() {
vid2.play();
})
$('.btntwoPause').on('click', function() {
vid2.pause();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/286183716">Annihilation Song | Rubblebucket (Official Music Video)</a> from <a href="https://vimeo.com/amandabonaiuto">Amanda Bonaiuto</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<button class="btnonePlay"> Play video one</button>
<button class="btnonePause"> Pause video one</button>
<div class="two">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/286183716">Annihilation Song | Rubblebucket (Official Music Video)</a> from <a href="https://vimeo.com/amandabonaiuto">Amanda Bonaiuto</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>
<button class="btntwoPlay"> Play video two</button>
<button class="btntwoPause"> Pause video two</button>
默认情况下,我们在 Vimeo 视频上启用 autopause
。自动暂停是指一个视频在另一个视频开始播放时自动暂停。大多数人不希望同时播放两个视频。
但是,如果您确实需要,可以使用附加到 url ?autopause=0
的嵌入参数来关闭自动暂停。我已经调整了你的 jsfiddle 以相应地工作。 Working JSFiddle!
您可以从我们的 API readme or this help article 了解有关可用嵌入参数的更多信息。