20

ビデオを再生せずに、またはビデオを再生する前に HTML5 でビデオの長さを取得して、YouTube や他のビデオ サイトで見られるように、ビデオ サムに表示しようとしています。

どんな助けでも本当に感謝します。

前もって感謝します。

4

4 に答える 4

29

HTML5 の場合、ファイルのメタデータが読み込まれると、video タグの duration プロパティを使用できるようになります。それを行う良い方法については、この回答を参照してください。

ファイルとは別に HTML5 ビデオの長さを取得する

ミクシのアンサーを引用するには：

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

「loadedmetadata」イベントをリッスンすることで、継続時間の値が読み込まれたことを確認できます。

loadedmetadata の詳細については、http ://www.w3schools.com/tags/av_event_loadedmetadata.asp を参照してください。

編集

@lucas-vasques のコメントによると、イベントの代わりに、MDN Media Events リストloadmetadataで次のように説明されているものを使用できます...durationchange

メタデータがロードまたは変更され、メディアの長さが変更されたことを示します。これは、たとえば、メディアが十分にロードされて継続時間がわかる場合に送信されます。

于 2013-10-25T14:09:53.260 に答える
3 
<!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>
于 2013-10-25T14:10:30.153 に答える
0

「loadedmetadata」と呼ばれるビデオ要素でトリガーされる特別なイベントがあります。これがトリガーされると、期間などのプロパティがビデオ要素で使用可能になります。

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

于 2013-10-25T14:11:39.973 に答える
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);
于 2017-10-02T17:41:14.813 に答える