Это 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&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>
И я загружаю видео со следующим кодом:
var iframe = document.createElement('iframe');
$(iframe).addClass('vim');
$(iframe).attr('id', 'vimeo'+key);
$(iframe).attr('src', 'https://player.vimeo.com/video/'+key+'?api=1'+
'&autopause=0'+
'&autoplay=1'+
'&badge=0'+
'&byline=0'+
'&loop=1'+
'&player_id=vimeo'+key+
'portrait=0'+
'&title=0');
$(iframe).attr('frameborder', '0');
$(iframe).css({ opacity: 0 });
player_parent.appendChild(iframe);
vimeoVideos[key].iframe = iframe;
vimeoVideos[key].vid_loaded = false;
vimeoVideos[key].vid_buffered = false;
vimeoVideos[key].autoplay = autoplay;
var interaction_preventer = document.createElement('div');
$(interaction_preventer).css({
position: 'absolute',
width: '100%',
height: '100%'
});
player_parent.appendChild(interaction_preventer);
iframe.onload = function() {
vimeoVideos[key].vid_loaded = true;
console.log('Vimeo', key, 'iframe loaded');
};
window.addEventListener('message', vimeoEvents.bind(null, key), false);
Где я привязываю прослушиватель событий, который выглядит следующим образом:
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 called: " + data.event); Просто 1 событие «ready», а затем много «LoadProgress», чего я и хочу.но в Chrome я получаю около 25 готовых событий, и никакой «LoadProgress»
Пример: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/k8hCm4vy6KSQE8I/upload.png
РЕДАКТИРОВАТЬ:
это ссылка, которую я создаю, и попробовал еев Chrome, но все еще не запускается автоматически, почему?когда в моем коде автозапуск = 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