解决video在ios中播放自动全屏问题

您所在的位置：网站首页 › 如何取消网页视频自动播放 › 解决video在ios中播放自动全屏问题

解决video在ios中播放自动全屏问题

2024-07-11 13:47| 来源: 网络整理| 查看: 265

前言：当video在ios上面点击播放会自动全屏播放，这个体验有点不好，因为上面有全屏播放提示，如果用户真的需要全屏可以自己点击全屏播放按钮，所以需要禁止video在ios系统自动全屏播放。

一、解决： ios中：

只需要在标签里面写上：webkit-playsinline='true' playsinline='true'

android中：

android端部分视频也会存在自动全屏问题，添加：x5-video-player-type="h5-page"

二、延伸： 1、标签定义：

标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。

支持的浏览器：Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持标签。

注：Internet Explorer 8 以及更早的版本不支持标签。

eg：

2、video属性：属性名具体介绍 src 要播放的视频的 URL poster 视频封面；没有播放时显示的图片，规定视频正在下载时显示的图像，直到用户点击播放按钮。 preoad 预加载。如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 autoplay 自动播放；视频在就绪后马上播放。 loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。 muted 如果出现该属性，视频的音频输出为静音。 controls 如果出现该属性，则向用户显示控件，比如播放按钮，浏览器自带的控制条 width 设置视频播放器的宽度 height 设置视频播放器的高度 3、poster的具体介绍：

poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。所有主流浏览器都支持 poster 属性。

如果未设置该属性，则使用视频的第一帧来代替。

注：测试了一下，android若设置该属性但未设置图片，是会显示第一帧，但ios不行，会显示空白

所以如果需要显示视频封面且适配俩端，不能只写，需要指定封面图片：

其中 url值描述URL指定图片文件的URL。可能值：

绝对URL - 指向另外一个站点URL (如：href="http://www.example.com/poster.jpg")

相对URL - 指向同个站点的URL (如： href="poster.jpg")

eg:

您的浏览器不支持 video 标签。

【本文地址】

解决video在ios中播放自动全屏问题

解决video在ios中播放自动全屏问题

今日新闻

推荐新闻