ios中关于video标签poster属性兼容问题(ios视频截帧)

ios中关于video标签poster属性兼容问题(ios视频截帧)

需求:视频需要展示封面,但是又不想将视频封面保存下来占用资源,需要将视频的第一帧作为视频封面正常显示即可
在ios系统中有个保护机制, 如果video标签未开始播放, 是不会去加载视频的.
video标签还未去加载视频, 就显示不出来视频首帧画面;
把video标签加上autoplay(自动播放)属性和muted(静音)属性, 就正常看到视频的画面了;
要想在video标签中显示首帧画面, 需要添加poster属性, 属性值应该是图片的url;或者直接使用img标签替代video的位置,当点击播放的时候再弹层展示需要播放的视频;

利用视频的自动播放和暂停来获取视频的首帧:让他自动播放,并在播放到100-200毫秒的时候主动暂停视频:监听视频的canplay事件并在里面暂停视频

<video autoplay muted playsinline preload="auto" :src="filePreviewObj.fileUrl" @canplay="canplay($event)" /> 

canplay方法处理

/* 视频播放 获取第一帧 */
canplay(event){
  setTimeout(() => {
    event.target.pause(); // 暂停播放视频 以此来获取封面
  }, 200);
};

参考链接:https://blog.csdn.net/qq_43886365/article/details/131722464

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值