input选择视频或图片本地预览问题

图片目前可以用两个方法，示例是vue代码，原生用的话需要小改下

预览图片 1
    <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon">
    <img :src="imgUrl" src=""> 
 
    chooseImgInput(event) { //选择图片加载到图片裁剪工具里
        var that = this;
 
        var files = document.getElementById("filepicker").files[0];
        this.fileName = files.name;
 
        var reader = new FileReader();
        reader.readAsDataURL(files);
            reader.onload = function(e) {
            that.visible = true;
            that.imgUrl = this.result;
        }
 
    },
 

预览图片 2
    <input id="filepicker" @change="chooseImgInput" type="file" class="upload_icon">
    <img :src="imgUrl" src=""> 
 
    chooseImgInput(event) {
        var files = document.getElementById("filepicker").files[0];
        var url = URL.createObjectURL(files);
        this.imgUrl = url;
    },
 

预览视频 
    <input type="file" id="filepicker" accept="video/mp4" @change="chooseVideoInput" class="uploadVideo_input">
    <video id="video" poster="封面图路径" :src="video_url" :controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"></video>
 
    chooseVideoInput(event) {
        var files = document.getElementById("filepicker").files[0];
        var url = URL.createObjectURL(files);
        this.video_url= url;
    },
 
    
    :controls="controls" x5-playsinline="" playsinline="" webkit-playsinline preload="auto"
    //这几个属性是解决原生视频video标签在ios手机上自动去安平播放的问题，controls是是否显示控制栏
 
--------------------- 
作者：jw19950424 
来源：CSDN 
原文：https://blog.csdn.net/jw19950424/article/details/79974589 
版权声明：本文为博主原创文章，转载请附上博文链接！