代码之家  ›  专栏  ›  技术社区  ›  rosu alin

Vimeo视频不会在iframe中的chrome上启动。未调用LoadProgress

  •  2
  • rosu alin  · 技术社区  · 6 年前

    这是我的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); 只有一个“就绪”事件,然后是很多“加载进度”,这正是我想要的。但在Chrome上,我有大约25个现成的事件,没有“加载进度”

    示例: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/k8hCm4vy6KSQE8I/upload.png

    编辑:

    这是我创建的链接,并在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
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   rosu alin    6 年前

    添加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');