Javascript Vimeo视频不会在iframe中的chrome上启动。不调用LoadProgress
这是我的html代码Javascript Vimeo视频不会在iframe中的chrome上启动。不调用LoadProgress,javascript,events,video,iframe,vimeo,Javascript,Events,Video,Iframe,Vimeo,这是我的html代码 <div class="vim-scale-wrapper"> <div class="vim-wrapper"> <iframe class="vim" id="vimeo221913211" src="https://player.vimeo.com/video/221913211?api=1&autopause=0&autoplay=1&badge=0&
<div class="vim-scale-wrapper">
<div class="vim-wrapper">
<iframe class="vim" id="vimeo221913211" src="https://player.vimeo.com/video/221913211?api=1&autopause=0&autoplay=1&badge=0&byline=0&loop=1&player_id=vimeo221913211portrait=0&title=0" style="opacity: 1;" frameborder="0">
</iframe>
<div style="position: absolute; width: 100%; height: 100%;"></div>
</div>
</div>
其中我绑定了一个事件侦听器,如下所示:
function vimeoEvents(key, evt) {
if (!(/^https?:\/\/player.vimeo.com/).test(evt.origin) || !vimeoVideos[key].iframe.contentWindow) {
return false;
}
var data = (evt.data);
if(typeof data === 'string') {
data = JSON.parse(evt.data);
}
console.log("vimeoEvents called: " + data.event);
switch (data.event) {
case 'ready':
vimeoVideos[key].iframe.contentWindow.postMessage({method: 'addEventListener', value: 'loadProgress'}, '*');
break;
case 'loadProgress':
if($(vimeoVideos[key].iframe).css('opacity') == 0)
$(vimeoVideos[key].iframe).css({ opacity: 1 });
break
case 'progress':
if (vimeoVideos[key].vid_loaded && !vimeoVideos[key].vid_buffered && data.data.percent === 1) {
vimeoVideos[key].vid_buffered = true;
$(vimeoVideos[key].iframe).css({ opacity: 1 });
console.log('Vimeo', key, 'buffered');
if($scope.dynamicItems[$scope.index].vimeoId === key && $scope.cycleDuration > 0) {
$scope.activateItem($scope.index);
} else {
// prevent movies from playing out of view
vimeoVideos[key].iframe.contentWindow.postMessage(JSON.stringify({ method: 'pause' }), '*');
// vimeoVideos[key].iframe.contentWindow.postMessage(JSON.stringify({ method: 'seekTo', value: 0 }), '*');
}
}
break;
}
}
在Firefox上,我得到这行代码:console.log(“vimeoEvents调用:”+data.event)代码>只有1个“就绪”事件,然后是大量的“加载进度”,这正是我想要的。但在Chrome上,我有大约25个就绪事件,没有“加载进度”
例如:
编辑:
这是我创建的链接,并在chrome中尝试过,但仍然无法自动播放,为什么?当我的代码中有autoplay=1时:
https://player.vimeo.com/video/163821487?api=1&autopause=0&autoplay=1&badge=0&byline=0&loop=1&player_id=vimeo163821487&portrait=0&title=0
添加muted=1属性,使其在Chrome上工作。像这样:
function vimeoEvents(key, evt) {
if (!(/^https?:\/\/player.vimeo.com/).test(evt.origin) || !vimeoVideos[key].iframe.contentWindow) {
return false;
}
var data = (evt.data);
if(typeof data === 'string') {
data = JSON.parse(evt.data);
}
console.log("vimeoEvents called: " + data.event);
switch (data.event) {
case 'ready':
vimeoVideos[key].iframe.contentWindow.postMessage({method: 'addEventListener', value: 'loadProgress'}, '*');
break;
case 'loadProgress':
if($(vimeoVideos[key].iframe).css('opacity') == 0)
$(vimeoVideos[key].iframe).css({ opacity: 1 });
break
case 'progress':
if (vimeoVideos[key].vid_loaded && !vimeoVideos[key].vid_buffered && data.data.percent === 1) {
vimeoVideos[key].vid_buffered = true;
$(vimeoVideos[key].iframe).css({ opacity: 1 });
console.log('Vimeo', key, 'buffered');
if($scope.dynamicItems[$scope.index].vimeoId === key && $scope.cycleDuration > 0) {
$scope.activateItem($scope.index);
} else {
// prevent movies from playing out of view
vimeoVideos[key].iframe.contentWindow.postMessage(JSON.stringify({ method: 'pause' }), '*');
// vimeoVideos[key].iframe.contentWindow.postMessage(JSON.stringify({ method: 'seekTo', value: 0 }), '*');
}
}
break;
}
}
$(iframe).attr('src','https://player.vimeo.com/video/“+key+”?api=1”+
“&自动暂停=0”+
“&autoplay=1”+
“&badge=0”+
“&署名=0”+
“&loop=1”+
“&player_id=vimeo”+键+
“&纵向=0”+
“&mute=1”+
“&title=0”)代码>