web-dev-qa-db-ja.com

HTML5ビデオの長さを取得する際の問題

更新：Okしたがって、この問題を正確に解決していないが、最大の懸念事項であるユーザーエクスペリエンスを処理する回避策を見つけました。

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

そのため、期間データがないという事実を回避するために、プレイを開始するまで期間情報（および実際にはコントロール全体）を完全に非表示にすることにしました。

私は知っている...その不正行為。しかし、今のところそれは私を幸せにします:)

とはいえ...ビデオファイルとは別にビデオメタデータをロードする方法を誰かが知っているなら...共有してください。これでこの問題を完全に解決できると思います。

私は、カスタムインターフェイスを備えた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);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

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

javascriptvideohtml5
49
drebabels

問題は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 にメディア要素の属性に関する詳細情報があります。

32
stopsatgreen

それを行う：

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);
});
152
Mikushi

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

3
Manifest Interactive

これはコードの変更です

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ビデオオブジェクトを取得する方法？

3
Buhake Sindi

「loadedmetadata」または「durationchange」のどちらもリッスンしません。video.durationは信頼できません。
「 " https://media.w3.org/2018/10/w3c-particles.webm 」をロードしてみてください

スマートで効果的な方法があります。

//first, seek to a big number time
video.currentTime = 7*24*60*1000;
//then listen 'seeked' event. when this event occur, that means video duration can access normally
video.onseeked = ()=>{
  alert("the duration is: "+video.duration);
  video.onseeked = undefined;
};
0
Kent Wood

私は同じ問題に遭遇しました：ビデオの継続時間を読み取ることができません、$('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);

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

0
Kevin Yan