我希望用户能够上传视频,然后通过单击按钮将视频加载到标签中进行查看。
这是一个例子:
HTML:
function loadvideo() { video = document.getElementById('videoinput').files[0]; videoelement = document.getElementById('videopreview'); videoelement.src = video; ///I don't think this will work as we need to read the file first?? }
<html> <body> <input type="file" accept="mp4" id="videoinput"> <video id="videopreview"> <button onclick="loadvideo()">Load The Video</button> <script type="javascript src="myscript.js"> </body> </html>
document.getElementById('videoinput').addEventListener('change',
(e) => {
let fileInput = e.target.files[0];
let videoElement = document.getElementById('videopreview');
let reader = new FileReader();
reader.onload = function(e2) {
videoElement.src = e2.target.result;
videoElement.style.display = 'block';
};
reader.readAsDataURL(fileInput);
});
<input type="file" accept="video/mp4" id="videoinput">
<video id="videopreview" controls style="display:none;"></video>