mp4が唯一のソースである場合、カスタムHTML5ビデオコントロールが動作しない

Question

問題：私はtumblrビデオにカスタムコントロールを追加しようとしているため、単一のビデオソース（mp4）しか持っていません。

ソースとしてmp4のみがある場合video.durationはNaNとして返されます。

3つのソース（mp4/webm/ogg）を使用した場合のテストとして動作しますので、video.durationはwembまたはoggからのみ返されます。

JSFIDDLE 1ソースとしてmp4が1つのみ（動作しないため）。

JSFIDDLE 2 3つのソースファイルが動作しています。

HTML

<div id="video-container"> 
    <!-- Video --> 
    <video id="video" width="640" height="365" poster="https://68.media.tumblr.com/tumblr_oj7dx3dAJL1vf3pu7_smart1.jpg"> 
     <source src="https://www.tumblr.com/video_file/t:kuWOGAOEWjotDIJeZpO4yw/155341819278/tumblr_oj7dx3dAJL1vf3pu7/480" type="video/mp4"> 
    </video> 
    <!-- Video Controls --> 
    <div id="video-controls"> 
     <button type="button" id="play-pause" class="play">Play</button> 
     <input type="range" id="seek-bar" value="0"> 
     <button type="button" id="mute">Mute</button> 
     <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1"> 
     <button type="button" id="full-screen">Full-Screen</button> 
    </div> 
</div> 
<span id="currentTime">0</span> 
<span id="duration">0</span> 

JS：

// Video 
    var video = document.getElementById("video"); 
    // Buttons 
    var playButton = document.getElementById("play-pause"); 
    var muteButton = document.getElementById("mute"); 
    var fullScreenButton = document.getElementById("full-screen"); 
    // Sliders 
    var seekBar = document.getElementById("seek-bar"); 
    var volumeBar = document.getElementById("volume-bar"); 

    // Event listener for the play/pause button 
    playButton.addEventListener("click", function() { 
     if (video.paused == true) { 
      // Play the video 
      video.play(); 
      // Update the button text to 'Pause' 
      playButton.innerHTML = "Pause"; 
     } else { 
      // Pause the video 
      video.pause(); 
      // Update the button text to 'Play' 
      playButton.innerHTML = "Play"; 
     } 
    }); 

    ... 

    // Update the seek bar as the video plays 
    video.addEventListener("timeupdate", function() { 
     // Calculate the slider value 
     var value = (100/video.duration) * video.currentTime; 
     // Update the slider value 
     seekBar.value = value; 
    }); 

    ... 

は、JSは主にここから取られる：http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

私が試してみました何：

video.addEventListener('loadedmetadata',function(){ 
     console.log(video.duration); //returns NaN 
    }); 

いくつかのjQuery

$(document).ready(function(){ 
    $("#video").on("timeupdate", function(event){ 
     onTrackedVideoFrame(this.currentTime, this.duration); 
    }); 
}); 

function onTrackedVideoFrame(currentTime, duration){ 
    $("#current").text(currentTime); 
    $("#duration").text(duration); 
} 

別の試み：これらのソリューションのも

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

<video preload="metadata"> 

どれも働いているように見えません。

私はこのquestionも見ました。投票された答えはテストされていません。

Answer 1

ビデオの長さを取得するには、ビデオソースのメタデータ部分が読み込まれるまで待つ必要があります（ビデオがエンコードされた方法によって大きく変わります - 理想的にはMOOVアトムを再配置する2パスエンコード迅速に抽出することができるように使用されています）。

ビデオオブジェクトのloadedmetadataイベントを聞くことで、コードを照会しても安全であることがわかります。

以下のコードでは、インラインJavaScript（またはdocument.onloadの場合があります）を使用してイベントハンドラを登録します。このイベントハンドラは、値が使用可能な期間を抽出する関数を呼び出します。値を知る必要のあるコードを実行する必要があります。

私はまた、ほとんどのシナリオではイベントが動作するためには必要ない、いくつかのブラウザ/デバイスのコンテンツをプリバッファリングするのに役立つように、個人的な好みのためにpreload="auto"を追加しました。

<video preload="auto" id="video" width="640" height="365" poster="https://68.media.tumblr.com/tumblr_oj7dx3dAJL1vf3pu7_smart1.jpg"> 
    <source src="https://www.tumblr.com/video_file/t:kuWOGAOEWjotDIJeZpO4yw/155341819278/tumblr_oj7dx3dAJL1vf3pu7/480" type="video/mp4"> 
</video> 

<script> 

var vid = document.getElementById("video" 
vid.addEventListener('loadedmetadata', getDuration, false); 

function getDuration() { 
    console.log(vid.duration) 
} 

</script>