如何通过按钮添加视频并结合textarea实现字幕添加

云上老周

2026-7-8

视频加载与字幕添加功能开发

我正在开发与textarea相关的功能，需要将字幕内容填入标注为body的textarea中，再把字幕添加到视频内。目前已实现通过按钮加载视频的功能，相关代码如下：

已实现的视频加载代码

HTML 代码

<video id="video-player" controls autoplay pause volume fullscreen></video>
</div>
<br>
<div id="fileLoadDiv">
  <input id="fileInput" type="file" onchange="loadFile(event)" style="display: none;" />
  <input id="fileLoadButton" type="button" value="加载视频文件" onclick="document.getElementById('fileInput').click()" />

JavaScript 代码

const videoPlayer = document.getElementById('video-player');

function loadFile(event){
    videoPlayer.src = URL.createObjectURL(event.target.files[0]);
}