При загрузке веб-страницы появляется экран паузы и отключения звука, и через некоторое время появляется фактический экран видео. Как это решить?

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' для видеоэлемента. Поместите некоторое изображение, которое будет отображаться для намека на то, что собирается сыграть.