当网页加载然后暂停并出现静音屏幕并在一段时间后出现实际视频屏幕。怎么解决这个？

Question

1）加载网页时出现第一个屏幕。 （屏幕1）

2）在屏幕上方几秒后，此屏幕出现。 （屏幕2）

为什么这个屏幕1来了？我该如何删除该错误？ 我只是希望在网页加载屏幕2（视频）出现/显示后。

我该怎么做？我是这个视频嵌入的新手，所以请帮助。

我的参考代码：

dropboxVideo : function(){
    new_video = document.createElement('video');
    new_video.setAttribute('controls','true');
    new_video.setAttribute('preload','none');//autoPlay: false, 'preload':'auto'
    video = document.getElementById('RIZfC358yRk').appendChild(new_video);
    source = document.createElement('source');  
    source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
    video.appendChild(source);
    video.load();
}

Answer 1

我一直在寻找内置的解决方案，但似乎没有。 所以我编写了一些你正在寻找的东西：

    <div id="videoelt" style="display:none" ></div>
<script>
 function dropboxVideo (){
    var videoElt = document.getElementById('videoelt');
    new_video = document.createElement('video');
    new_video.setAttribute('controls','true');
    //new_video.setAttribute('preload','none');//autoPlay: false, 'preload':'auto'
    new_video.setAttribute('autoplay','true');//autoPlay: false, 'preload':'auto'

    //new_video.setAttribute('poster','foo.jpg');
    source = document.createElement('source');  
    source.setAttribute('src','https://dl.dropboxusercontent.com/u/87532981/Ella%20May%20and%20the%20Wishing%20Stone%20By%20Cary%20Fagan.mp4');
    new_video.appendChild(source);
    videoElt.appendChild(new_video);

    new_video.addEventListener("canplay", function(e) { 
        videoElt.style.display = '';
    }); 
}

dropboxVideo();
</script>

视频元素包含您可以收听的事件，'canplay'适合它开始的那一刻。 所以我隐藏了视频控件直到准备好然后我显示它。 您可以使用视频元素的“poster”属性的另一个选项。放置一些将显示的图像以暗示即将播放的内容。