无效状态错误。 Vimeo 视频播放正常但抛出异常
InvalidStateError. Vimeo videos plays okay but throwing an exception
我正在尝试将具有 data-video1 和 data-video2 属性的图像替换为视频 ID,并将它们替换为两个视频(一个取代另一个,第二个视频在点击第一个自动播放视频时播放).一切正常,但它引发了破坏我的导航的以下异常。你能告诉我如何修复代码以收听并等待视频准备好吗?
InvalidStateError: 试图使用一个不可用或不再可用的对象
<script src="//cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js" type="text/javascript"></script>
<script src="//player.vimeo.com/api/player.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.homepage-collage > a').each(function(index) {
$this = $(this);
$img = $this.find('img');
if($img.data('video1')){
var rand1 = Math.floor(Math.random()*100000);
var rand2 = Math.floor(Math.random()*100000);
var rand3 = Math.floor(Math.random()*100000);
$img.css({'opacity':0}).parent().append('<div class="video-wrap video-wrap'+rand3+'"> <div class="trigger"></div><div class="player1_wrap"><iframe id="player'+rand1+'" src="https://player.vimeo.com/video/'+ $img.data('video1') +'?api=1&player_id=player'+rand1+'&autostop=0&badge=0&byline=0&portrait=0&title=0&background=1&loop=1" width="640" height="360" frameborder="0"></iframe></div><div class="player2_wrap"> <iframe id="player'+rand2+'" src="https://player.vimeo.com/video/'+ $img.data('video2') +'?api=1&playsinline=false&player_id=player'+rand2+'&autostop=1&badge=0&byline=0&portrait=0&title=0&" width="640" height="360" frameborder="0"></iframe> </div> </div>');
$this.fitVids();
var player1 = new Vimeo.Player($('#player'+rand1+''));
var player2 = new Vimeo.Player($('#player'+rand2+''));
$(document).on('click', '.video-wrap'+rand3+' .trigger', function(event) {
var $trigger = $(this);
$trigger.hide();
player1.pause();
$trigger.siblings('.player1_wrap').fadeOut('fast');
$trigger.siblings('.player2_wrap').fadeIn('fast');
player2.play();
});
player2.on('finish', function () {
$trigger = $('.video-wrap'+rand3+' .trigger');
$trigger.show();
$trigger.siblings('.player2_wrap').fadeOut('fast')
$trigger.siblings('.player1_wrap').fadeIn('fast');
player1.play();
});
}
});
});
</script>
非常感谢任何指导!非常感谢!
我假设您使用的是 Firefox,因为这是 Firefox 中的一个已知问题,已记录在我们的存储库中 (https://github.com/vimeo/player.js/issues/344)。但是,不太确定这会如何破坏您的导航,因为在我们所有的测试中,此错误似乎都没有影响。与 Vimeo API 相比,更有可能是您的代码有问题。但是,此信息可能有助于我为您提供更多帮助。
1) "break your navigation" 是什么意思?您能否提供网页或 JSFiddle 的示例页面?
2) 你能试试别的浏览器吗- Chrome/Safari/Edge?该错误不应该出现在那里。如果不是并且问题仍然存在,则该错误与您的问题无关。
我正在尝试将具有 data-video1 和 data-video2 属性的图像替换为视频 ID,并将它们替换为两个视频(一个取代另一个,第二个视频在点击第一个自动播放视频时播放).一切正常,但它引发了破坏我的导航的以下异常。你能告诉我如何修复代码以收听并等待视频准备好吗?
InvalidStateError: 试图使用一个不可用或不再可用的对象
<script src="//cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js" type="text/javascript"></script>
<script src="//player.vimeo.com/api/player.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.homepage-collage > a').each(function(index) {
$this = $(this);
$img = $this.find('img');
if($img.data('video1')){
var rand1 = Math.floor(Math.random()*100000);
var rand2 = Math.floor(Math.random()*100000);
var rand3 = Math.floor(Math.random()*100000);
$img.css({'opacity':0}).parent().append('<div class="video-wrap video-wrap'+rand3+'"> <div class="trigger"></div><div class="player1_wrap"><iframe id="player'+rand1+'" src="https://player.vimeo.com/video/'+ $img.data('video1') +'?api=1&player_id=player'+rand1+'&autostop=0&badge=0&byline=0&portrait=0&title=0&background=1&loop=1" width="640" height="360" frameborder="0"></iframe></div><div class="player2_wrap"> <iframe id="player'+rand2+'" src="https://player.vimeo.com/video/'+ $img.data('video2') +'?api=1&playsinline=false&player_id=player'+rand2+'&autostop=1&badge=0&byline=0&portrait=0&title=0&" width="640" height="360" frameborder="0"></iframe> </div> </div>');
$this.fitVids();
var player1 = new Vimeo.Player($('#player'+rand1+''));
var player2 = new Vimeo.Player($('#player'+rand2+''));
$(document).on('click', '.video-wrap'+rand3+' .trigger', function(event) {
var $trigger = $(this);
$trigger.hide();
player1.pause();
$trigger.siblings('.player1_wrap').fadeOut('fast');
$trigger.siblings('.player2_wrap').fadeIn('fast');
player2.play();
});
player2.on('finish', function () {
$trigger = $('.video-wrap'+rand3+' .trigger');
$trigger.show();
$trigger.siblings('.player2_wrap').fadeOut('fast')
$trigger.siblings('.player1_wrap').fadeIn('fast');
player1.play();
});
}
});
});
</script>
非常感谢任何指导!非常感谢!
我假设您使用的是 Firefox,因为这是 Firefox 中的一个已知问题,已记录在我们的存储库中 (https://github.com/vimeo/player.js/issues/344)。但是,不太确定这会如何破坏您的导航,因为在我们所有的测试中,此错误似乎都没有影响。与 Vimeo API 相比,更有可能是您的代码有问题。但是,此信息可能有助于我为您提供更多帮助。
1) "break your navigation" 是什么意思?您能否提供网页或 JSFiddle 的示例页面?
2) 你能试试别的浏览器吗- Chrome/Safari/Edge?该错误不应该出现在那里。如果不是并且问题仍然存在,则该错误与您的问题无关。