Vimeo 视频不会在 iframe 中的 chrome 开始。不调用 LoadProgress

Question

这是我的html代码

<div class="vim-scale-wrapper">
    <div class="vim-wrapper">
        <iframe class="vim" id="vimeo221913211" src="https://player.vimeo.com/video/221913211?api=1&amp;autopause=0&amp;autoplay=1&amp;badge=0&amp;byline=0&amp;loop=1&amp;player_id=vimeo221913211portrait=0&amp;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

编辑：

这是我创建的 link，并在 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

Answer 1

添加 muted=1 属性，使其适用于 Chrome。像这样：

$(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'+ '&muted=1' + '&title=0');

Vimeo 视频不会在 iframe 中的 chrome 开始。不调用 LoadProgress

Vimeo video does not start on chrome in iframe. LoadProgress is not called

javascript

video

iframe

events

vimeo

编辑：