1

1) Web ページが読み込まれると、この最初の画面が表示されます。(画面1)

ページ読み込み時の最初の画像

2) 上記の画面の数秒後、この画面が表示されます。(画面2)

数秒後の 2 番目の画像

なぜこのスクリーン 1 が来るのですか? そのバグをどのように削除すればよいですか？Webページのロード後に画面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」は開始した瞬間に収まります。そのため、準備が整うまでビデオコントロールを非表示にしてから表示しました。video 要素の 'poster' 属性を使用できる別のオプション。再生しようとしていることを示唆するために表示される画像を配置します。

于 2013-09-21T08:10:26.553 に答える