技术栈:vue
项目需求:在页面上 存在一个播放器( video 标签)和多个按钮(每个按钮包含一个对象,里面存储视频源,封面等信息)。点击按钮将对应的视频展示在播放器。
BUG (仅出现于 iso 下 uc 浏览器):
- 播放时不能 inline,原因 video 标签会被 uc 劫持,进行全屏播放。
我在 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 也没有效果 ]
请大佬们指点一二。
不胜感激!