html5 viedo视频标签在手机上无法正常播放解决方法

最新推荐文章于 2023-12-08 16:01:47 发布
最新推荐文章于 2023-12-08 16:01:47 发布
阅读量9.7k 收藏 2
点赞数 1
文章标签： html5 viedo 无法正常播放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/querystringcom/article/details/51545632
版权
本文介绍了如何解决HTML5 video标签在IIS服务器上无法正常播放的问题，主要原因是MIME类型未正确配置。通过详细步骤指导如何添加MP4、ogg及webm等视频格式的支持。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

为使用HTML5 viedo 标签无正常播放视频呢？

原因是IIS的MIME中未注册MP4、ogg、webm相关类型，导致IIS无法识别

1、在IIS中双击MIME类型的图标

2、右键-》添加 IIS不认识的新类型

3、添加新类型的扩展名和类型标识 比如： 扩展名填写 .mp4 , MIME类型填写 viedo/mp4 

.ogv  viedo/ogg

.webm viedo/webm


querystringcom
关注
手机 html自动播放视频格式,Video 在网页和移动端无法自动播放问题？?
weixin_42118056的博客
06-01 2108
标签介绍 标签定义视频，比如电影片段或其他视频流。支持三种视频格式：MP4、WebM、Ogg。是 H5 的新标签，使用如下：//autoplay表示视频自动播放，controls表示显示视频控制器，loop表示循环播放您的浏览器不支持 video 标签。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。Element谷歌IE火狐safariopera4.09.03.54.010.5提示和...
给video标签加一些属性，微信调用h5原生video
weixin_43960538的博客
12-23 846
给video标签加一些属性，调用h5原生video <video class="video-source"     width="100%"   height="240px"  /*如果有封面，请设置高度*/     controls  /*这个属性规定浏览器为该视频提供播放控件*/   &nb
H5页面在手机浏览器上无法播放视频或无法切换视频源的解决方案
旷古的寂寞的博客
01-28 1万+
一、视频无法播放问题 最近做了个播放MP4视频的网页，发现PC端能正常播放视频，但是部分手机浏览器，例如UC浏览器，播放视频要么一直转圈加载，要么报-9324,19000错误。 查了很多资料，基本都是说video标签的参数配置不对或者浏览器版本不兼容，没啥用。 最后发现问题出在网络协议上，H5做的页面在部分手机端的浏览器上只能用http或者websocket协议传输视频数据，不能用https协议。 解决方案就是在video标签中使用完整的http视频链接，即使用http前缀的绝对路径。 <
解决html5中的video标签，ios系统中无法播放使用
ass_ace
08-11 7007
1.先是从前端的角度去考虑，如何让safari浏览器兼容video，并支持播放（未找到解决的方法）。 2.经多次查找网上信息，发现使用后台能解决该问题，解决点在HTTP协议的响应头里面（Accept-Ranges）。 3.safari浏览器，在打开视频的时候，先是发送一个请求探测文件的大小，之后再多次发送请求分段获取数据流的数据（个人理解大概是分段下载，Accept-Ranges）。 4.想要解决这种问题要考虑两个方面： a.需要根据请求内容的不同做出不同的响应，第一次探测请求需要返回200，后面
移动端H5的Video标签无法播放在线视频的问题
热门推荐
做GIS梦的人
10-11 3万+
在做一个视频项目时，在android和ios使用video标签播放视频，均失败。代码如下： 最后经过长时间测试终于解决 你的浏览器不支持H5播放器 这样之后，在ios和android都可以播放了
html5苹果手机视频不自动播放,HTML5 解决苹果手机不能自动播放音乐问题
weixin_29720641的博客
05-30 593
这篇文章给大家介绍html5解决苹果手机不能自动播放音乐问题，解决方法如下一段代码:引用：function autoPlayAudio() {wx.config({// 配置信息, 即使不正确也能使用 wx.readydebug: false,appId: '',timestamp: 1,nonceStr: '',signature: '',jsApiList: []});wx.ready(fun...
基于端到端深度学习的自动驾驶：AirSim教程（包含Ubuntu18.04下配置AIrsim仿真环境解决方案）
Wincher's blog
01-31 3043
这是微软自动驾驶食谱的第一个教程（目前共两个）。之前看到过，这里记录一下。 https://github.com/microsoft/AutonomousDrivingCookbook 前言 在本教程中，将学习如何使用AirSim仿真环境收集的数据来训练和测试自动驾驶的端到端深度学习模型。将训练一个模型，学习如何通过山脉/景观地图的一部分，在AirSim使用一个单一的正面面对网络摄像头（webcam）采集到的画面作为输入去操纵汽车。这样的任务通常被认为是自动驾驶的“你好世界”， 教程结构 用Keras框
手机视频链接失效html5,HTML5视频验证错误
weixin_35924719的博客
07-01 614
我有以下的标记，使用VideoJS播放器(我可以包括的js也一样，如果有必要)来实现：HTML5视频验证错误 ，这是目前没有HTML验证，具有以下错误消息：第152行，第82列：元素源不允许作为此上下文中元素视频的子元素。 (抑制来自该子树的进一步错误)...可以使用元素源的上下文：作为媒体元素的子元素，在任何流内容或跟踪元素之前。元素视频的内容模型：如果元素具有src属性：零个或多个轨...
解决h5的video标签，android、pc客户端播放正常，iphone无法播放
xuepuhao的博客
10-25 8789
在做html5时插入一个视频播放标签video后，测试时android、PC客户端播放正常，唯独ios无法播放。 找了很多办法，把视频转换成mp4各种格式；更换了好几个播放器，发现还是行不通。 之前的做法是，请求一个视频链接，然后默认返回一整个视频文件，此时服务端的做法默认为网页请求的是整个文件。而对于safari来说，他不是一次性请求全部文件的（不论osx还是ios），一般首先会请求0-1字...
html5手机移动端视频播放代码插件
12-06
html5手机移动端视频播放代码插件是一款非常好用的移动端视频播放，视频的默认图和宽度高度可以随意修改。
用HTML5写的视频，在IOS应应用中可以打开，在安卓应用中打不开。
wanglufei_1992的博客
12-14 2788
最近在写一个视频电商，看着挺简单，写起来发现没想象的那么简单。遇到的小问题就是一些样式问题，最大的问题是写好的视频打包后，在安卓应用里无法播放。我一直认为是打包的问题，因为我的页面用手机的浏览器可以播放，打包的说是我的事，经过一番争论，从我这开始找问题，发现原来是因为，安卓不支持HTML5的source src属性。头大的问题没想到是因为这么个小问题。原来是这样写的： <video>
html5中插入视频无效原,h5视频播放踩坑记录
weixin_42423817的博客
06-04 573
随着抖音、快手这类的视频类app的火爆，移动端h5视频类应用也随之兴起，使用video播放的场景也越来越多，本篇文章主要例举了移动端视频播放的一些场景和个人在开发过程中遇到的一些问题，希望在看过这篇文章后，能对开发者在移动端使用video播放时快速开发减少踩坑全屏播放视频的全屏播放是移动端一个很常见的场景，因此我们需要对video设置全屏播放，全屏播放用到的方法是requestFullscreen...
android html5 video 格式,关于H5 video在移动端播放问题
weixin_35173650的博客
05-25 3622
常见问题和解决方案：1、video添加自动播放属性autoplay，无法正常播放视频。解决方案：需要在video标签中添加muted属性但是设置muted之后，它规定视频的音频输出时应该被 静音。2、在一些安卓浏览器播放视频的时候，不能在H5页面播放视频，系统会自动接管视频。解决方案：添加内联播放属性；如果需要在H5页面内播放视频，需要在video标签加上webkit-playsinline，在一...
html手机看不了图片怎么回事,手机微信看不了图片，也播放不了视频是怎么回 – 手机爱问...
weixin_31688465的博客
06-04 544
2018-04-07手机微信无法播放视频错误43怎么办原因及解决方法如下：(一)视频格式不支持可以查看一下微信朋友圈的视频格式是什么，手机是否支持，若不支持，可以考虑下载安装一个相应的视频播放器。(二)视频文件损坏可能微信朋友圈所发的特定的视频，本身已经是损坏的文件，因为无法查看，只能看看别的视频能否正常播放。 (三)微信软件问题可以考虑先清除手机缓存，在手机应用市场等地方搜索新版的微信，找...
爱奇艺html5无效,爱奇艺无法投屏怎么办？爱奇艺投屏失败的多种解决方法
weixin_42443651的博客
06-09 1759
爱奇艺投屏功能是可以将手机和电脑端的视频投到屏幕大的电视上面，这样可以更好的看视频，毕竟电视想要看自己想要看到视频有些麻烦，存在着太多的操作，而投屏可以让我们随心所欲的观看自己想要看的节目。但是最近有些小伙伴发现爱奇艺投屏找不到设备以及爱奇艺投屏失败等问题，爱奇艺投屏失败怎么办？爱奇艺投屏找不到设备怎么解决？下面小编为大家带来解决方案。软件名称：爱奇艺app for iPhone v10.8.5 ...
html无法正常显示图片或者视频等的原因分析
长高
02-24 3171
html的使用src无法正常显示图片或者视频等的原因 如下，这是我网页文件存放的位置，大家能看到我的图片是跟网页存放在同一个根目录下那么再看看代码，实现效果图。 代码区域 <img src="2.jpg" height="250" width="250"/> <img src="2-2.jpg"/> <img src="2-3.jpg"/> 效果图 请仔细观...
手机端网页视频不显示缩略图HTML,移动端H5视频页面部分体检兼容问题
weixin_32676541的博客
06-22 2217
视频页面部分体检兼容问题：H5的技术已整体趋于成熟，但在视频播放方面，如果跟PC端的Flashplayer对比的话，功能就显的非常简单了。如果要让视频支持在手机端(主要是iPhone)播放的话，需要了解下面这些内容。1：视频格式必需是mp4的，iphone不支持flv，如果是Hls视频，格式应该是m3u8，不支持rtmp协议的播放；2：H5不能把多个mp4合并成一个视频播放(像ckplayer在P...
ios和安卓手机端使用video标签播放失败的问题
weixin_45935149的博客
12-08 1万+
安卓和浏览器适配做得很好，只需要设置好文件类型和，最后返回文件的二进制流即可。但是ios客户端还需要设置文件大小才能正确播放。我只做了MP4格式的视频，其他格式的视频暂时还没有试过，百度看了下，其他视频文件可能会涉及到视频编码的问题。在手机端上播放视频，流量很贵，像我的做法的话都是一次性返回整个文件的二进制流，这样过于暴力，后续优化的时候，可能要设置另外的响应头，进行分段返回。比如响应头中是获取文件的部分内容。分段返回文件二进制流的实现方式。
video overlay
兰尘墨世
06-03 4676
<br /><br />首先介绍一下video overlay，vieo overlay不同于video capture，是指不需要对video信号的帧进行copy，直接将视频信号转化成显卡的VGA信号或者将捕获到的视频帧直接存放在显卡的内存中，具体过程就是将视频帧直接写入framebuffer中，不需要经过android 平台的处理。实际上看过FSL的camera preview过程之后就知道，它就是直接将视频数据 写入framebuffer，而没有经过android的surfaceflinger的处理。
vue2使用viedo标签实现视频播放，动态路径视频不播放且黑屏怎么解决
最新发布
12-05
在Vue2中使用video标签实现视频播放时，如果遇到动态路径视频不播放且黑屏的问题，可以尝试以下几种解决方法： 1. **检查视频路径**：确保视频路径正确，并且视频文件可以通过浏览器直接访问。可以通过在浏览器中直接输入视频URL来验证。 2. **使用正确的视频格式**：确保视频格式被浏览器支持。常见的视频格式包括MP4、WebM和Ogg。可以在video标签中指定多个source，以确保兼容性。 3. **设置视频属性**：确保video标签的controls、autoplay、loop等属性设置正确。例如，controls属性用于显示视频控制栏，autoplay属性用于自动播放视频。 4. **跨域问题**：如果视频文件存放在不同的域，可能会遇到跨域问题。确保服务器配置了正确的CORS头，允许跨域访问视频文件。 5. **预加载视频**：使用preload属性预加载视频内容。preload属性可以设置为"auto"、"metadata"或"none"，其中"auto"表示自动预加载视频。 以下是一个示例代码，展示了如何在Vue2中使用video标签播放动态路径的视频： ```html <template> <div> <video :src="videoSrc" controls autoplay preload="auto" @error="handleError" ></video> <p v-if="error">视频加载失败，请检查视频路径或网络连接。</p> </div> </template> <script> export default { data() { return { videoSrc: 'https://example.com/path/to/video.mp4', error: false }; }, methods: { handleError() { this.error = true; } } }; </script> <style scoped> video { width: 100%; height: auto; } </style> ``` 在这个示例中，`videoSrc`是动态的视频路径，`controls`属性用于显示控制栏，`autoplay`属性用于自动播放视频，`preload="auto"`属性用于预加载视频内容。`@error="handleError"`用于处理视频加载错误，并在视频加载失败时显示错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值