web-dev-qa-db-ja.com

HTML5動画が読み込まれるまで待ちます

ビデオタグがあり、ユーザーがデータベースから多数のビデオから選択できるように、ソースを動的に変更します。問題は、src属性を変更すると、指示されてもビデオが読み込まれないことです。

ここに私のコードがあります：

$("#video").attr('src', 'my_video_'+value+'.ogg');
$("#video").load();
while($("#video").readyState !== 4) {
        console.log("Video is not ready");
};

コードは無限ループのままです。

何か助け？

[〜＃〜] edit [〜＃〜]：

イアン・デヴリンへ：

//add an listener on loaded metadata
v.addEventListener('loadeddata', function() {
    console.log("Loaded the video's data!");
    console.log("Video Source: "+ $('#video').attr('src'));
    console.log("Video Duration: "+ $('#video').duration);
}, false);

OK、これは私が今持っているコードです。ソースは素晴らしく印刷されますが、継続時間を取得できません：/

html5html5-video
35
Test Test

Media API が必要なものすべてを提供するので、これにはjQueryは本当に必要ありません。

_var video = document.getElementById('myVideo');
video.src = 'my_video_' + value + '.ogg';
video.load();
_

Media APIには load() メソッドも含まれます。このメソッドは、「要素をリセットし、最初から新しいメディアリソースの選択とロードをリセットします。」

（Oggは限られた数のブラウザーでのみサポートされているため、使用するのに最適な形式ではありません。すべての主要なブラウザーをカバーするためにWebMおよびMP4を使用することをお勧めします。 canPlayType() どちらをプレイするかを決定する機能）。

その後、 loadedmetadata または loadeddata （必要に応じて）イベントが発生するのを待つことができます。

_video.addEventListener('loadeddata', function() {
   // Video is loaded and can be played
}, false);
_
71
Ian Devlin

まだ答えられていない質問の最後の部分に応答して... $('#video').durationを書くとき、jQueryコレクションオブジェクトのdurationプロパティを要求しています存在します。ネイティブDOMビデオ要素には期間があります。いくつかの方法で取得できます。

以下がその1つです。

// get the native element directly
document.getElementById('video').duration

ここに別のものがあります：

// get it out of the jQuery object
$('#video').get(0).duration

そしてもう一つ：

// use the event object
v.bind('loadeddata', function(e) {
  console.log(e.target.duration);
});
11
No Surprises

動画タグの属性でpreload = "none"を使用すると、ユーザーが再生ボタンをクリックしたときにのみ動画が表示されます。

<video preload="none">
1
Gomzy

ロード時に関数を呼び出す：

<video onload="doWhatYouNeedTo()" src="demo.mp4" id="video">

ビデオの長さを取得する

var video = document.getElementById("video");
var duration = video.duration;
0
Jacob Schneider