H5 preview video before uploading (combined with video tag && h5 fileApi)

js code:

// hTML5 implements the upload file box in the form, preview the video before uploading, refresh the preview video, use the HTML5 File API,
// Create a url that can access the file, an empty video tag, the ID is video0, display the selected file in the video tag, and realize the video preview function.
// Need to choose a browser that supports HTML API.
         $("#video").change(function(){
             var objUrl = getObjectURL(this.files[0]) ;
             console.log("objUrl = "+objUrl) ;
             if (objUrl) {
                 $("#video0").attr("src", objUrl) ;
             }
         }) ;
         //Create a url that can access the file
         function getObjectURL(file) {
             var url = null;
             if (window.createObjectURL!=undefined) { // basic
                 url = window.createObjectURL(file) ;
             } else if (window.URL!=undefined) { // mozilla(firefox)
                 url = window.URL.createObjectURL(file) ;
             } else if (window.webkitURL!=undefined) { // webkit or chrome
                 url = window.webkitURL.createObjectURL(file) ;
             }
             return url ;
         }

html:

<video style="height:auto;" src="" id="video0" controls="controls"></video>
<input class="form-control" type="file" style="height:auto;"
id="video" name="video"/>

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325834491&siteId=291194637