布局调整:当前抖音直播搜索页(https://www.douyin.com/search/*)是单列瀑布流布局,需要改成九宫格(或可自定义列数的多宫格),让更多直播内容同时展示在可视区域。
自动播放优化:目前页面需要手动下拉到对应直播才会加载播放,希望实现「进入页面后自动播放所有可视区域内的直播」,且滚动时自动加载并播放新进入可视区域的内容,离开可视区域的直播自动暂停(减少资源占用)。
悬浮控制按钮:在每个直播窗口右上角或固定位置添加悬浮的「暂停 / 播放」按钮,点击可手动控制单个直播的播放状态,避免自动播放时需要点击进入直播间才能暂停的麻烦。
其他细节:
目前自己尝试研究了一下页面结构,但对抖音的接口加载逻辑和 DOM 操作不太熟悉,不知道如何绕过原页面的懒加载机制实现自动播放,也不清楚九宫格布局如何适配不同屏幕尺寸。如果有大佬做过类似功能,或者能提供核心思路(比如监听滚动事件、修改 CSS 布局、控制 video 标签播放状态等),非常感谢!