导入视频文件并播放(HTML)

Question

如何在中导入文件并使用video元素播放它？

我想导入一个视频文件(在页面上(，然后会弹出一个视频元素。

<input type="file">
<h3>What would be imported video:</h3>
<video width="320" height="176" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>

如果你有任何问题，请告诉我。

提前感谢！

Answer 1

只是通知您，BigBuckBunny.mp4是一个巨大的视频，需要大量的计算机CPU才能加载。

下面的代码为您提供了一个接受mpeg、mp4、mp2和avi的<input type=file>输入。你可以让它接受任何东西，或者任何MIME类型的视频
它将视频作为Blob，将Blob传递给FileReader，并将其作为数据URL读取。然后，它在视频中添加了一个<source src="the_url">。

function loadVideo() {
// 'input' is the <input> element
// 'video' is the <video> element
// 'fs' is a FileReader, to read 'input'
const input = document.getElementById("input"),
video = document.getElementById("video"),
fs = new FileReader;
// Executes when finished reading; it's asynchronous
fs.onload = () => {
// Update video src to the Data URL
video.innerHTML = `<source src="${fs.result}">nYour browser does not support HTML5 videos.`;
}
// Data URL is data:video/mpeg,base64;AAAAA.....
fs.readAsDataURL(input.files[0]);
}

Upload video: <input id="input" type="file" accept=".avi, .mpeg, .mp2, .mp4" onchange="loadVideo()">
<hr>
<video id="video" controls width="320"></video>

编辑@tinker9

谢谢！如何使mov文件也能使用此功能？在accept属性中添加.mov不起作用
[评论链接]

1. 尝试将accept属性设置为.avi, .mpeg, .mp2, .mp4, .mov
2. 尝试删除accept属性
3. 检查浏览器是否支持.mov文件
4. 检查您要上传的.mov文件是否编码正确并且可以播放