通过js获取视频长度

目的

  借助于duration属性获取音视频文件时长

可行性

视频/音频（audio/video）在加载过程中，会触发一系列事件，不断完善文件的信息，监听指定的事件，获取文件的新属性。
触发的顺序如下：

1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough

实施

基本选择框：

 <div  class="form-group col-sm-12">
		<label class="control-label">获取时长1。。。。</label>
		<input class="form-control" type="file" id="test" onchange="getTime()">
</div>

获取方式：
第一种，监听onloadedmetadata ：

function getTime() {
    var file = document.getElementById("test").files[0];
    var video = document.createElement('video');
    video.preload = 'metadata';

    video.onloadedmetadata = function () {
        var url = video.src
        if (url.startsWith("blob:")) {
            url = url.substr(5);
        }
        window.URL.revokeObjectURL(url);
        var duration = video.duration;
        console.log("视频长度为：" + duration);
    }
    video.src = URL.createObjectURL(file);
}

第二种，监听oncanplay属性：

function getTime() {
    var file = document.getElementById("test").files[0];
    var video = document.createElement('video');
    video.src = URL.createObjectURL(file);
    video.oncanplay = function () {
        var duration = video.duration;
        var hour = parseInt(duration / 3600);
        var minute = parseInt(duration % 3600 / 60);
        var sec = parseInt(duration % 60);
        console.log("视频长度为：" + duration + "   " + hour + ":" + minute + ":" + sec);
    }
}

第三种，监听ondurationchange属性：

 function getTime() {
        var file = document.getElementById("test").files[0];
        var video = document.createElement('video');
        video.src = URL.createObjectURL(file);
        video.ondurationchange= function () {
            var duration = video.duration;
            var hour = parseInt(duration / 3600);
            var minute = parseInt(duration % 3600 / 60);
            var sec = parseInt(duration % 60);
            console.log("视频长度为：" + duration + "   " + hour + ":" + minute + ":" + sec);
        }
    }