51

カスタム インターフェースを使用して HTML5 ビデオ プレーヤーの構築に取り組んでいますが、ビデオの長さの情報を表示するのに問題があります。

私の HTML は単純です:

<video id="video" poster="image.jpg" controls>     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
</video>
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>  
</ul>

そして、期間を取得して挿入するために使用しているjavascriptは

var duration = $('#duration').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

問題は、何も起こらないことです。デフォルトのコントロールをそのまま使用すると問題なく表示されるため、動画ファイルに継続時間データがあることはわかっています。

しかし、本当に奇妙なのは、私のコードに alert(duration) を入れた場合です

alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

その後、正常に動作します（ポップアップする迷惑なアラートは除きます）。ここで何が起こっているのか、またはどうすれば修正できるのでしょうか?

更新: この問題を正確に解決したわけではありませんが、私の最大の懸念であるユーザー エクスペリエンスを処理する回避策を見つけました。

まず、視聴者が再生ボタンを押すまでビデオの読み込みが開始されないため、期間情報を取得できなかったと想定しています (この特定の問題を修正する方法はわかりません...ビデオとは別にビデオのメタデータをロードするだけで済むと思いますが、それが可能かどうかさえわかりません)。

そこで、デュレーション データがないという事実を回避するために、再生ボタンを押すまで、デュレーション情報 (および実際にはコントロール全体) を完全に非表示にすることにしました。

とはいえ、ビデオ ファイルとは別にビデオ メタデータを読み込む方法を知っている人がいる場合は、共有してください。私はそれがこの問題を完全に解決するはずだと思います。

4

6 に答える 6

166

それを行う：

var myVideoPlayer = document.getElementById('video_player');
myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(myVideoPlayer.duration);
});

ブラウザがビデオからすべてのメタデータを受信したときにトリガーされます。

[編集]それ以来、より良いアプローチは、信頼できない可能性がある「loadedmetadata」ではなく「durationchange」をリッスンすることです。

myVideoPlayer.addEventListener('durationchange', function() {
    console.log('Duration change', myVideoPlayer.duration);
});
于 2010-04-08T18:47:39.180 に答える
32

問題は WebKit ブラウザーにあります。ビデオのメタデータはビデオの後に読み込まれるため、JS の実行時には使用できません。readyState 属性を照会する必要があります。これには 0 から 4 までの一連の値があり、ビデオの状態を示します。メタデータが読み込まれると、値が 1 になります。

したがって、次のようなことをする必要があります。

window.setInterval(function(t){
  if (video.readyState > 0) {
    var duration = $('#duration').get(0);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;
    clearInterval(t);
  }
},500);

私はそのコードをテストしていませんが、それ (またはそれに似たもの) は動作するはずです。

developer.mozilla.orgに、メディア要素の属性に関する詳細情報があります。

于 2010-04-08T18:49:11.777 に答える
5

HTML5 仕様では、メタデータのプリロードのみが許可されています。

<video id="video" poster="image.jpg" controls preload="metadata">     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
</video>

http://www.w3.org/TR/html-markup/video.html#video.attrs.preload

于 2015-03-26T05:02:39.587 に答える
2

これはコードの変更です

var duration = document.getElementById("duration");
var vid_duration = Math.round(document.getElementById("video").duration);
//alert(vid_duration);
duration.innerHTML = vid_duration;
//duration.firstChild.nodeValue = vid_duration;

お役に立てれば。

IE を使用しているようですが、document.getElementByIdメソッドを使用してビデオ オブジェクトを取得してみませんか?

于 2010-02-08T11:36:55.613 に答える
0

私は同じ問題に遭遇しました:ビデオの期間を読み取ることができず、$('video')[0].duration常に返すことができません. NaN@stopsatgreenの受け入れられた回答を参照し、一般的なケースに収まるようにコードを変更しました.それは実際に機能します.

var video = $('video')[0];
var t = setInterval(function () {
    if(video.readyState > 0) {
        var duration = video.duration;
        console.log(duration);
        clearInterval(t);
    }
}, 500);

コードは非常にシンプルで実際に機能するので、この回答を投稿して、より多くの人に役立つことを願っています.

于 2016-07-07T09:07:14.860 に答える