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

Released 2017/09/14

JS Code:

HTML5 Implement the Upload file box in the form, preview the video before uploading, refresh the preview videos, use the HTML5 file API,Create a URL that can be accessed to the file, an empty video tag, an ID of video0, and display the selected file in the video tag to achieve a preview function.You need to select a browser that supports HTML APIs. $("#video"). Change (function){var objurl = Getobjecturl (this.files[0]);Console.log ("Objurl =" +objurl);if (Objurl) {$ ("#video0"). attr ("src", objurl); } }) ;Create a URL that can be accessed to the filefunctionGetobjecturl (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.create Objecturl (file); } return URL;}                  

Html:

<video style="Height:auto", "src=" "id=" Video0 "controls=" Controls "></class=" Form-control "type=" file "style=" Height:auto; " id="video" Name="video"/>          

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