【结束】JS如何不通过input的onInputFileChange使用本地mp4文件并播放,nextjs下放入public文件的视频用video标签无法打开

本地不用input标签获取video视频并播放

浏览器没有像JAVA这些语言之类的IO

代码:

html 复制代码
<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就行

html 复制代码
<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>
相关推荐
weixin_472339463 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击4 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue5 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762906 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk8 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼8 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客8 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang
Liudef068 小时前
2048小游戏实现
javascript·css·css3