JavaScrpitのさまざまな動作onload/onclick

ページが読み込まれたときに自動的にビデオの長さを出力するJSコードを作成したかったのです。私はロード機能でボディを使用しましたが、それは動作しません。ボタンを使ってonlickを使って同じ機能を実行しようとしましたが、うまくいきます。誰かが私になぜ「オンロード」がうまくいかないのかを説明することができますか？それを解決する方法は、ユーザーがビデオの再生時間を見るためにボタンをクリックして、それを自動的に出力する必要はありませんか？ボタンを使用すると、それは継続的に持続時間を表示しますが、onload関数を使用するときは、「NaN」のみを表示します。助けてくれてありがとう！ラデクJavaScrpitのさまざまな動作onload/onclick

<!DOCTYPE html> 
 
<html> 
 
<body onload = "myFunction()"> 
 

 
<video width="400" controls id = "video"> 
 
    <source src="mov_bbb.mp4" type="video/mp4"> 
 
    <source src="mov_bbb.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
</video> 
 

 
<p> 
 
Video courtesy of 
 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>. 
 
</p> 
 
<p id = "demo"></p> 
 
<button onclick="myFunction()">Try it</button> 
 
<script> 
 
function myFunction() { 
 
    var x = document.getElementById("video").duration; 
 
    alert(x); 
 
} 
 
</script> 
 
</body> 
 
</html>

出典

2017-09-10 Radek

@JJJ、おかげでたくさん、。私の問題を解決した:) – Radek

原因はdoesntのロードされたページには、ビデオがロードされたことを意味していること。あなたは、動画のメタデータを待機する必要があります：私はそれを見つけることができ

window.onload = _ => { 
    const video = document.getElementById("video"); 
    video.addEventListener('loadeddata', _ => { 
    alert(video.duration); 
    }, false); 
};

出典

2017-09-10 10:16:42

JavaScrpitのさまざまな動作onload/onclick

答えて

関連する問題