Question

当html文档准备就绪时，我有一个问题是找出mp4视频文件的持续时间。我的代码：

(function ($, root, undefined) {        
    $(function () {
        'use strict';
        $(document).ready(function() {

                var duration = $("section:first-child() video").get(0).duration;  
                alert(duration);    

        });
    });
});

该脚本在firefox中运行，但在chrome中它返回一个NaN。我不是一个JavaScript专业人士，我使用wordpress HTML5空白主题。

感谢您的帮助和最诚挚的问候。

Answer 1

您需要预先加载视频元数据才能访问它们。然后，在loadedmetadata事件中，您可以访问duration，如下所示。

$(function() {
    var $video = $('#video_container').find('video');
    $video.on("loadedmetadata", function() {
    	$('#duration').text($video[0].duration);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video_container">
    <video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="metadata" controls="" width="400">
      <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
      <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
      <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

<div>Total duration : <span id="duration"></span></div>

Answer 2

你需要一个听众来获取视频的持续时间

var videoTime = 0;
var currentvideo = document.getElementById('video');
currentvideo.addEventListener('play', function() {
     videoTime= currentvideo.duration;
     console.info(videoTime) // get the duration
});

NaN在Javascript中获取持续时间

2 个答案: