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"/>