[前端求助] ios 下使用 UC 浏览器 video 标签播放问题?

发布于 2022-09-12 13:23:41 字数 650 浏览 26 评论 0

技术栈:vue

项目需求:在页面上 存在一个播放器( video 标签)和多个按钮(每个按钮包含一个对象,里面存储视频源,封面等信息)。点击按钮将对应的视频展示在播放器。

BUG (仅出现于 iso 下 uc 浏览器):

  1. 播放时不能 inline,原因 video 标签会被 uc 劫持,进行全屏播放。
  2. 我在 vue 的 data 上定义了一个对象 curVideoItem 用来存储当前正在播放的数据信息。video 标签上的 src 是通过 curVideoItem 里面的 src 动态获取( vue 双向绑定)。切换视频的方法实现如下(首先将下一个要播放的视频的对象赋值给 curVideoItem, 然后在 nextTick 方法中执行 video.play()),此时会发生 bug (并非每次都出现)

    • [a. 播放器不会读取到下一个视频的 src,依然使用当前播放的的 src,这里我尝试使用 setTimeout 方法,延迟 1000ms 后调用 play 方法,效果得到明显改善,但是某些时刻仍会出现 bug;
    • b.在切换视频时经常出现缓存,例:当前视频播放到 3s,我切换其他视频后仍然从 3s 处进行播放。我在切换时设置 video.currentTime=0 也没有效果 ]

请大佬们指点一二。
不胜感激!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

凉城 2022-09-19 13:23:41

1、贴一下video的属性代码,基本就这两个参数,如果不行,那就是浏览器劫持了,没办法

playsinline="true"
webkit-playsinline="true"

2、在切换视频的时候需要先暂停再去切换,数据loaded之后再设置 currentTime

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文