本地不用input标签获取video视频并播放
浏览器没有像JAVA这些语言之类的IO
代码：
<div>
<video id="video_id" width="750" height="500" controls>
Your browser does not support the video tag.
</video>
</div>
<script>
function show() {
fetch("file:///E:/video/test1.mp4")
.then(response => {
return response.arrayBuffer()
})
.then(ab => {
const vdo = URL.createObjectURL(
new Blob([ab], { type: "video/mp4"}),
)
document.getElementById("video_id").src = vdo
})
.catch(err => console.log(err));
}
show()
</script>
命令行执行：
看情况需要给浏览器指定访问本地文件权限--allow-file-access-from-files
powershell 执行chrome:
Start-Process "C:\allUserApplication\portableApp\PortableApps\GoogleChromePortable\App\Chrome-bin\chrome.exe" -ArgumentList '"C:\Users\mammon\Desktop\anyt.html" --allow-file-access-from-files --disable-web-security'
nextjs下放入public文件的视频用video标签无法打开
我遇到的问题是浏览器不支持，我的浏览器是Chromium，版本 ： 131.0.6778.33（正式版本） （64 位），它支持webm格式，增加个source就行
<video controls width="600" height="300">
<source src="/video/test1.mp4" type="video/mp4" />
<source src="/video/test1.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
