当HTML5是唯一的源时，自定义mp4视频控件无法工作。

Question

问题:我只有一个视频源(mp4)，因为我试图将自定义控件添加到tumblr视频中。

如果只有mp4作为源，则video.duration作为NaN返回。

作为一个测试，当使用3个源(mp4/webm/ ogg )时，它可以工作，因此video.duration只能从wemb或ogg返回。

JSFIDDLE 1只有一个mp4作为源(因此不能工作)。

具有3个源文件的JSFIDDLE 2正在工作。

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>

联署材料：

    // 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">

这些解决办法似乎都没有奏效。

我也看过这个关于SO的问题。有一个未经检验的投票答案。

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>