2013-10-25 13 views
8

動画を再生したり、チューブや他の動画サイトで見たように動画を再生して動画サムネイルに表示する前に、HTML5で動画再生時間を取得しようとしています。HTML5動画を再生しない動画の時間

本当にありがとうございます。

ありがとうございました。

+2

私はそれが映画を起動せずに常に可能ではないと思います。私はまたyoutubeそれをする場合は、サーバー上でムービーを前処理し、期間を取得する疑いがあります。 – akonsu

答えて

15

HTML5では、ファイルのメタデータが読み込まれると、ビデオタグのdurationプロパティを使用できるはずです。それを行うための良い方法は、この答えを参照してください。

Problem retrieving HTML5 video duration

Mikushiでanwserを引用すると:

myVideoPlayer.addEventListener('loadedmetadata', function() { 
    console.log(videoPlayer.duration); 
}); 

「loadedmetadata」イベントをリッスンすることによって、あなたは、デュレーション値を確保することとなっていますロードされる。 loadedmetadata上

詳細はここで見つけることができます:http://www.w3schools.com/tags/av_event_loadedmetadata.asp

+2

それは大丈夫ですが、私はページのロードにはクリックイベントを表示したくないです。 – Sajal

+0

これはonclickイベントではありません。ビデオメタデータが(クリックイベントの前に)詳細情報をロードするときです。http://www.w3schools.com/tags/av_event_loadedmetadata.asp – ToddBFisher

+2

+1、有益なコードありがとう。それは 'videoPlayer'の代わりにコールバックの中で' myVideoPlayer'であるべきではありませんか? –

0
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
     function getDuration() { 
      var s = document.getElementById('a'); 
      alert(s.duration) 
     } 
    </script> 
</head> 
<body> 
<div> 
    <video src="2.mp4" id="a" controls="controls"></video> 
    <button onclick="getDuration()">get duration</button> 
</div> 
</body> 

</html> 
0

特別なイベントがあり、「loadedmetadata」と呼ばれる映像要素でトリガ。これがトリガーされると、期間などのプロパティが動画要素で使用できます。

ここでは、すべてのHTML5ビデオのイベントの完全なリストがあります:http://www.w3.org/2010/05/video/mediaevents.html

0
// Assume "video" is the video node 
var i = setInterval(function() { 
    if(video.readyState > 0) { 
     var minutes = parseInt(video.duration/60, 10); 
     var seconds = video.duration % 60; 

     // (Put the minutes and seconds in the display) 

     clearInterval(i); 
    } 
}, 200); 
関連する問題