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是是否顯示控制欄