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是是否显示控制栏