zyronon / douyin

Vue3 + Pinia 仿抖音,Vue 在移动端的最佳实践 . Imitate TikTok ,Vue Best practices on Mobile
https://dy.ttentau.top/
GNU General Public License v3.0
9.43k stars 2.59k forks source link

h5端不能自动播放 #63

Closed legolaserea closed 6 months ago

legolaserea commented 6 months ago

有两个常见的问题,虽然不太好解:

  1. h5端第一个视频不能自动播放,需要手动取消静音。往下滑的时候,有的视频也不能自动播放。
  2. 拖动进度条会引起首页swiper切换。
zyronon commented 6 months ago

1、第一个视频能自动播放,只是静音了而已。
如果不静音就不能自动播放了,这是浏览器限制,没办法。
用户与网页产生交互,就可以取消静音了,后续的视频也可以自动播放
手动取消静音这个是跟随的抖音的设计

2、那个是个兼容问题,因为我把swiper的事件从原来的touch事件,修改为pointer事件了。
但其他地方滑动还是用的touch事件,限止touch事件并不能阻止pointer事件传播,所以就会一起动。 为什么要用pointer事件?目前我在掘金写一系列关于这个项目的文章,每天都有人点star,用了pointer事件在PC上可以滑动了,可以预览大部分的功能。
但会导致的设置了overflow:auto的div,无法触发Pointer事件,我原来的首页刷新都失效了
所以后面等项目热度低了之后,我后面会把pointer事件改回touch事件,那样所有功能在手机上都能正常使用了,只是PC上无法正常用,现在还不打算改

legolaserea commented 6 months ago

我知道你是静音了,我意思是说你可以第一个视频设置为静音自动起播。但最主要的问题是用户发生交互后,取消静音后,往下滑动时,新创建的video有时仍然不能有声音自动播放。

zyronon commented 6 months ago

谢谢指出

有时不能自动播放,是我代码触发了停止播放,正在看这个问题 有时是抖音的视频地址被cancel了,这个没办法

legolaserea commented 6 months ago

这个是h5的限制,新创建的video要有声音播放都需要明确的用户行为触发,否则需要静音起播,但取消静音需要用户行为触发。我最近在解决这类问题,有兴趣的话一起交流啊。

zyronon commented 6 months ago

不是吧,是第一次有限制而已啊?产生交互之后就可以用代码取消静音了。我这个项目手动取消静音了之后,后面的视频都可以自动播放并且有声音啊

偶尔不能播放是我代码有问题,和视频链接被抖音中断了

可以一起交流,你方便的话可以加我微信zyrican