Question

问题：我只有一个视频源（mp4），因为我正在尝试向tumblr视频添加自定义控件。

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

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

JSFIDDLE 1 ，只有一个mp4作为来源（因此无效）。

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

这些解决方案似乎都没有奏效。

我也在SO上看过这个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>

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

1 个答案: