video视频相关问题：火狐浏览器报错“没有找到支持的视频格式和MIME类型”

最新推荐文章于 2024-08-16 14:43:42 发布

lu??xing

最新推荐文章于 2024-08-16 14:43:42 发布

阅读量2w

点赞数 2

分类专栏：问题文章标签： html js javascript

本文链接：https://blog.csdn.net/lu_zhanzhan/article/details/119387441

版权

问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.需求：上传 .mp4 格式的视频到服务器，然后获取展示到前台页面。

2.遇到的问题：在谷歌浏览器上能正常显示视频，但是在火狐浏览器不能显示视频，提示：“没有找到支持的视频格式和MIME类型”，如下:

在这里插入图片描述

3.解决过程：

第一步：直接百度搜索“没有找到支持的视频格式和MIME类型”，基本上都是说的是要在服务器里IIS的MIME添加 .mp4的文件格式。
第二步：排查到底是服务器的问题还是前端代码的问题：
（1）在前端代码里直接添加一个测试视频，不使用上传到服务器的视频；然后运行代码，看看是否能在火狐浏览器正常查看视频。
（2）如果这里能正常查看视频，则需要进一步排查。！！！！！！本文后面的内容就不用往下读了，没啥用。（我进行到这一步的时候火狐浏览器就不能正常查看视频，所以直接说我错误的地方）。
第三步：我这里直接上传的测试视频都不能在火狐浏览器查看，接下来打断点一步一步看代码。
直接上代码：
之前的代码：

<body>
	<div>
		<video id="mVideo" src="" controls>
		</video>
	</div>
	<script>
		$(function(){
			//这里有一个请求，获取到了视频的地址 videopath（相关代码已省略）
			$("#mVideo").attr("src",videopath);
		});
	</script>
</body>

（1）我的测试视频是111.mp4,用测试视频排查时的代码如下：

<body>
	<div>
		<video id="mVideo" src="" controls>
		</video>
	</div>
	<script>
		$(function(){
			//关了相关请求，直接走测试视频
			$("#mVideo").attr("src",“111.mp4”);
		});
	</script>
</body>

（2）我这里有一个很奇怪的现象，就是打断点的时候火狐浏览器能正常显示视频并且能播放；当不开 F12 走断点的时候，还是提示那个错误。
（3）所以我就不在方法里添加src,直接在video里边加上测试视频，代码如下：

<body>
	<div>
		<video id="mVideo" src=“111.mp4” controls>
		</video>
	</div>
	<script>
		$(function(){
			//关了相关请求，直接走测试视频
			//$("#mVideo").attr("src",“111.mp4”);
		});
	</script>
</body>

（4）结果：在火狐浏览器上可以正常看视频。

第四步：找到了问题所在，修改前端代码

<body>
	<div id="a">
	</div>
	<script>
		$(function(){
			//这里有一个请求，获取到了视频的地址 videopath（相关代码已省略）
			var videoStr = '<video id="mVideo" src=“'+videopath+'” controls></video>';
			$("#a").html(videoStr);
		});
	</script>
</body>