iOS端一次视频全屏需求的实现苹果全屏视频

转载

kekenai 2024-01-29 11:23:45

文章标签 iOS端一次视频全屏需求的实现视频全屏移动端移动端视频 文章分类 iOS 移动开发

移动端全屏视频

尺寸选择(竖屏)

建议选择750×1334，或者640×1136（根据设计稿宽度选择），视频尺寸比例根据iphone678屏幕比例

最好使用750×1334，或者640×1136（但仍不完美，iphoneX等机型会出现上下黑边，华为EMUI系统出现底部虚拟键盘时视频会出现左右黑边）
可以针对屏幕比例不同要求，做出不同尺寸视频来进行兼容处理
视频背景颜色建议采用黑色，这样会减少很多适配问题

视频内联

$video.setAttribute('webkit-playsinline', true);
$video.setAttribute('playsinline', true);
// 把video标签设置内联属性，这样css样式就会生效

ios微博及ios9以下不支持视频内联属性playsinline，视频无法内联

import enableInlineVideo from 'iphone-inline-video';  //  引入
enableInlineVideo($video);            // 使用

对于内联无效，浏览器强制接管视频播放的情况，无法处理兼容（需要对应浏览器的视频白名单）

上下左右有黑边

视频上下有黑边，明确是不是视频尺寸不够长度？左右黑边是不是不够宽度？

很多浏览器对视频大小有不能超过视窗的限制，导致上下或者左右会有黑边
所以使用750×1334 或者640×1136尺寸（但仍不完美，iphoneX等机型会出现上下黑边，华为EMUI系统出现底部虚拟键盘时视频会出现左右黑边）

横屏切换提示

@media screen and (orientation: portrait) {
  // 竖屏样式
}
@media screen and (orientation: landscape) {
  // 横屏样式
}

也可以通过监听orientationchange事件进行处理，注意兼容性。

字幕位置适配

视频居中显示的
注意保证小屏可以显示字幕，大屏就没问题，缺点是不同屏幕字幕位置变化较大
视频顶部对齐显示的
注意保证小屏可以显示字幕，大屏就没问题，缺点是不同屏幕字幕位置变化最大，这样可以针对小屏和大屏手机设置不同的字幕位置来减小字幕差别大问题，但同时增加了字幕配置时间和代码逻辑处理时间，同时注意大屏小屏判断界限的适配。
视频底部对齐显示的
字幕只要定好在底部的位置，所有屏幕尺寸字幕位置一致，字幕位置变化最小，注意小屏视频的顶部裁剪和大屏顶部黑边问题

自动播放

手机不支持自动播放，需要用户来触发。不能使用touchstart事件来触发视频播放，要使用click或者touchend事件，并且在事件中不要使用定时器来触发视频play方法，尽量直接执行play。

错误代码：

// 错点：play放到定时器里面
__play() {
    setTimeout(() => {
      $video.load();
      $video.play();
    }, 500);
} 
$start.addEventListener('click', () => {
    this.play();
 });

// 错点：绑定touchstart
__play() {
   $video.load();
   $video.play();
} 
$start.addEventListener('touchstart', () => {
    this.play();
 });

视频码率

480p(标清)：分辨率 640× 480，码率768kbps；
720p(高清)：分辨率 1280×720，码率1.5Mbps；
1080p(超清)：分辨率 1920* 1080，码率3Mbps；

考虑到移动端网络，建议码率在544～768之间，如果对清晰度有特殊要求，选择码率1.5Mbps，不要选择码率3Mbps，并做好弱网问题处理。

常见问题

播放器开始时出现三角控件

视频初始宽高设置为1px,监听 timeupdate事件，延迟特定秒数之后再设置正常宽高，视频结束前几秒，删除视频节点或者提前跳转页面（无法兼容视频最高层级情况）

ios微博存在播放控件

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
  opacity 0
  pointer-events none
  width 5px
}

背景音乐问题

尽量说服产品不要使用背景音乐，ios背景音乐可以正常播放，但是声音播放往往会延后，延后时间不定，有的会特别长。安卓无法在播放视频的同时播放音乐，所以安卓听不到背景音乐。降级处理，针对安卓使用带背景音乐的视频。

弱网场景处理

针对网络差，可以加一个加载中的提示，或者做一个缓冲中的图片或者动画
在视频的下一层级设置加载提示，避免一直黑屏没有提示问题
网络差时，视频很可能加载失败，监听视频error事件，做出加载失败的处理

微信播放完视频有广告，且无法退出

问题：微信，QQ内点击播放视频，弹出一个新的视频播放层，播放完视频，会出现视频推荐广告，不自动进入答题页面，需要手动点击左上角返回，进入答题页面

机型：荣耀V10，荣耀8/9/10，华为Mate8/9/10，VIVO X9，VIVO X20，OPPO R11，MI 6/8等等

解决：H5同层播放器仅限腾讯系的产品

$video.setAttribute('x5-video-player-type', 'h5');
$video.setAttribute('x5-video-player-fullscreen', 'true');

产生新问题

视频播放中点击左上角返回按钮，返回页面，操作无效
因为全屏视频项目不会加controls属性，所以播放中途点击返回之后点击页面操作无效。解决方法是给video加click事件，点击执行视频play方法。
大部分安卓机会出现页面播放前变大，结束后变小
目前没有解决办法
特殊机型MI 8 SE X5 视频播放完毕后底部有白边
监听resize或者监听使用H5同层播放器的进入、退出事件进行特殊处理（没实践）