我用的video的方式实现的

html

<label id="labelr" class="pop_file file_cont" for="pop_video">
    <div class="pfevi">
        <div><i class="iconfont icon-tianjia1"></i></div>
        <div>点击上传视频</div>
    </div>
    <video id="videoId"></video>
    <input style="display: none;" id="pop_video" type="file" accept="audio/mp4,video/mp4" v-on:change="uploadFile($event,'2')" name="fileTrans" ref="file" value="" />
</label>

css

.pop_file {
    width: 370px;
    height: 188px;
    margin-bottom: 30px;
    display: block;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(153, 153, 153, 1);
    background: rgba(247, 247, 247, 1);
    position: relative;
}
.pop_file video {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

js

uploadFile: function(ev, typer) {
    var that = this;
    var filesId = document.getElementById('pop_video');
    var videoId = document.getElementById('videoId');
    var url = getFileURL(filesId.files[0]); //把当前的 files[0] 传进去
    if(url) {
        videoId.src = url;
    }
    function getFileURL(file) {
        var getUrl = null;
        if(window.createObjectURL != undefined) { // basic
            getUrl = window.createObjectURL(file);
        } else if(window.URL != undefined) { // mozilla(firefox)
            getUrl = window.URL.createObjectURL(file);
        } else if(window.webkitURL != undefined) { // webkit or chrome
            getUrl = window.webkitURL.createObjectURL(file);
        }
        return getUrl;
    }
    var duration = videoId.duration;
    if(Math.floor(duration) > 60) {
        that.$layer.msg('视频不能大于60秒');
    }
}