1

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();
}
4

1 回答 1

2

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

    <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”适合它开始的那一刻。所以我隐藏了视频控件，直到准备好然后我才显示它。您可以使用视频元素的“海报”属性的另一个选项。放置一些将显示的图像以提示即将播放的内容。

于 2013-09-21T08:10:26.553 回答