【标签bug】video标签部分mp4文件在ios中无法自动播放的问题

这篇具有很好参考价值的文章主要介绍了【标签bug】video标签部分mp4文件在ios中无法自动播放的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


在安卓端和h5页面调试端,video标签下的mp4格式文件均可以播放,但是video标签部分mp4文件在ios中无法自动播放的问题,搜了很多资料有如下解决方案

前端解决

<video :src="item.url" muted autoplay loop preload
       x5-video-player-fullscreen="true"
       x5-playsinline
       playsinline 
       webkit-playsinline></video>

前四个属性:
muted:静音播放,一般浏览器chrome为例,用户需要在页面上操作一次,才能播放视频,不允许用户进入后直接显示声音
autoplay:自动播放
loop:循环播放
preload:预加载播放,默认属性值auto。来缓存大体积文件的。它有三个可选值:“none” 不缓存、“auto” 缓存、“;metadata” 只缓存文件元信息
后面四个属性,是查阅资料时看到的前端解决方案,笔者添加完后四个属性,ios便可以播放了
x5-video-player-fullscreen=“true”:全屏设置,设置为 true 是默认全屏播放,ios网页中播放视频默认全屏
playsinline=“true” webkit-playsinline="true 解决ios自动播放全屏问题
x5-video-player-type=“h5” x5-video-player-fullscreen=“true” 解决安卓同层级播放

后端解决

1.场景描述
服务端上传MP4视频文件,iOS客户端通过URL播放该视频文件。
2.问题描述
安卓手机可以正常播放视频,iOS手机无法播放,且PC段safari浏览器也无法播放。
3.问题分析
(1)通过内网ip地址播放MP4文件可以播放,使用外网域名无法播放MP4文件。
(2)使用外网域名获取MP4文件路径通过了Nginx代理。
(3)safari不支持整个文件流,服务器必须支持分段请求。
(4) safari对于文件流的请求需要包含一个请求头Range, 和一个响应头Content-Range,通过Nginx代理后没有返回Range的相关信息。
4.解决方案
首先要配置Nginx支持Range标签返回,添加 add_header Accept-Ranges bytes这一行即可:
server {
listen 80;
location ~xxx{
add_header Accept-Ranges bytes;
}
启用以后,iOS请求MP4视频文件后,Nginx会返回含有Range相关的信息。

在搜索资料的时候发现iOS无法播放MP4视频文件的解决方案 mp4视频iphone播放不了怎么办博主的文章,此篇后端解决方案来源该文章文章来源地址https://www.toymoban.com/news/detail-456450.html

到了这里,关于【标签bug】video标签部分mp4文件在ios中无法自动播放的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript基于MediaRecorder录制mp4视频或webm视频并下载,JavaScript实现对video标签进行录制mp4视频或webm视频和下载

    本章实现网页video标签录制mp4视频或webm视频并下载。 视频录制这种计算密集型任务比较重,比较适合放在后台进行实现,本章适合前端任务不太重的短时间视频录制,长时间录制建议还是走后台录制并提供下载地址给网页前端即可。 所以本章只适用于短时间的视频录制并下

    2024年02月06日
    浏览(42)
  • unity上传大文件(例如.mp4视频/png图片)优化部分,采用文件流方式

    1.unity客户端     2.服务器端   3.注意: 需要结合上一篇文章,目前亲测可以上传800M的视频,不到6秒还是挺快的!  

    2024年02月16日
    浏览(59)
  • 谷歌chrome浏览器无法自动播放video标签视频的问题

    问题根源详见: Chrome中的自动播放政策  https://developer.chrome.com/blog/autoplay/  The Autoplay Policy launched in Chrome 66 for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome. For the Web Audio API, the autoplay policy launched in Chrome 71. This affects web games, some WebRTC appli

    2024年02月11日
    浏览(99)
  • video标签设置了autoplay,自带音频的视频在谷歌浏览器仍无法自动播放

    原因分析:谷歌浏览器可以自动播放视频,不能自动播放音频。如果视频中自带音频就会导致该视频无法自动播放。 解决办法:在video标签加上静音属性muted,自带音频的视频就可以自动播放了,但是该视频无声音。 备注:1、这是谷歌浏览器自身的问题。2、Safari浏览器可正

    2024年02月12日
    浏览(64)
  • video.js 视频截图、录制、自定义全屏,hls、flv、mp4视频播放

    功能 video.js内嵌 截图、录制功能 (图片、视频会下载到本地) 自定义全屏 播放hls、flv、mp4 功能集合成Vue组件 参考 video.js components RecordRTC demo video 截图并下载 video.js添加自定义组件的方法 使用RecordRTC对video视频进行录制 播放hls、flv、mp4 安装 引入 html 引入组件(视频地址使

    2023年04月08日
    浏览(46)
  • 哔哩哔哩缓存转码|FFmpeg将m4s文件转为mp4|PHP自动批量转码B站视频

    打开ffMpeg官网 选择window=Windows builds from gyan.dev 打开https://www.gyan.dev/ffmpeg/builds/ 这里是上面提取的下载链接如果过期不能用自己去官网下 上面下载的FFmpeg是绿色软件,下载解压到你的常用软件安装目录即可,然后进入bin复制全路径配置下系统环境变量即可 https://github.com/PHP-F

    2024年02月14日
    浏览(60)
  • Ubuntu无法播放MP4视频

    经过查询资料,尝试了以下方法: 执行完上述代码,视频可以播放,但是视频文件的右下角仍然带有锁的图标,在程序中运行,程序不报错,但视频播放不了,程序自动退出。 经过查询资料,需要解锁, 将filename替换为带解锁的文件路径即可,执行完该条命令后,视频文件

    2024年04月14日
    浏览(70)
  • flutter iOS 视频mov格式转MP4格式

    今天在写项目的时候,突然发现iOS 里面的有些视频格式是mov的格式,这就导致在视频播放组件无法播放的问题,期间试过替换视频格式,但是又不想存储文件的中间路径,最终想到我使用过视频压缩的功能,就直接在这个压缩的基础上去做了更改,下面是最终代码。 上面的

    2024年02月03日
    浏览(48)
  • mp4视频无法播放的解决方法

    mp4视频是我们日常工作生活中经常会遇到的视频格式,但如果遇到重要的mp4视频无法播放了,该怎么办呢?有 mp4视频无法播放的解决方法 吗?下面小编为大家整理了这个问题产生的原因以及相应的解决方法,让我们看一看。 什么情况下会导致mp4视频无法播放呢? 1:视频文件未

    2024年02月09日
    浏览(74)
  • MP4视频无法在H5网页中播放

    MP4视频在本地可以播放,但是在html5的video多媒体标签不能正常播放,不显示图像,其实是编码的原因,虽然格式是MP4,但是html5只支持H.264的编码格式。 关于html5的video标签知识: html4协议做网站时我们在网页播放视频使用flash播放,要么就是嵌入式页面实现 html5网页可以使用

    2024年04月16日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包