将上传的视频加载到html中

问题描述 投票:0回答:1

我希望用户能够上传视频,然后通过单击按钮将视频加载到标签中进行查看。

这是一个例子:

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>

javascript html html-input
1个回答
0
投票

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>

© www.soinside.com 2019 - 2024. All rights reserved.