49

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

これが私のコードです：

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

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

何か助けはありますか？

編集：

イアン・デブリンへ:

//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);

これは私が今持っているコードです。ソースはうまく印刷されますが、まだ期間を取得できません:/

4

4 に答える 4

84

必要なものをすべて提供する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);
于 2012-12-14T08:42:58.463 に答える
13

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

ここに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);
});
于 2013-10-02T05:06:37.630 に答える