一、前言
事先声明，代码很烂，大佬们轻点喷，就是效果做出来了,可以在【菜单栏-看一会】预览效果哈，做这个的初衷就是学习和好看么，发现俺实在太菜，自己也没兴趣更加深入，但是做都做了，那就干完它，然后我这个模版有一部分还是为了适配了主题，但是改起来应该挺好改的，我是把一个template直接放在子主题了，当然，如果没有更新需求的话也可以直接放在主题里，使用就行了。
二、目标
我想要实现一个类似抖音的全屏竖屏视频浏览体验（我提的数据是我很喜欢的一个博主）：
- ✅ 上下滑动切换视频
- ✅ 视频自动播放 + 循环
- ✅ 支持静音/音量控制
- ✅ 支持键盘操作（↑↓ 空格）
- ✅ 支持懒加载 & 分页加载
- ✅ 适配移动端触摸操作
- ✅ 可集成进 WordPress 页面
❌未实现未加载完成加载封面
最终效果如下图：
三、思路与坑
一开始觉得把js，css拆出来会好点，最起码js只加载一次么，然后因为我直接在模版已经写了一部分，实现起来发现bug居多，实在对不起懒得解决，自己的网站随便搞搞得了，就不管了一个文件搞定也方便分享，然后就是数据从哪里来，哎，说到这里我就一把鼻涕一把泪，抖音的数据获取并不难，网上借鉴了两个项目，1是滑动播放器，2是直接可以调用的API的项目
这里主要还是继续讲API的事情，一开始我想着做个解析呗，输入用户的id直接解析列表然后播放，但是真的干干干，没必要，懒啊，解析逻辑、反爬处理、接口稳定性……一想就头大，就想着直接用人家的项目请求好自己需要的作品列表，mock一个列表数据然后直接给他塞进去。
缺点就是：
- 只能播放那些；
- 而且地址有失效的风险。
优点就是：
- 快；
- 请求本地的源文件，超快的。
于是乎，画风就变成了：
把项目 down 下来运行，改叭改叭，把数据清洗出一个 json 列表，搞定，直接在模版里面调用就行。（如果后续有时间的话，把项目引进来，做个下载数据列表的解析。）
但是还是有坑啊，抖音视频地址请求的时候有防盗链，不能加 Referer，这就有点扯了。
问了一些前端写得好的朋友，他们给我的方案就是：
video标签加referrerpolicy="no-referrer"
（不一定有效，浏览器可能会给你加上）- 可以用
fetch，fetch设置no-referrer，然后转换成blob填充video的src
（没用，因为会重定向，然后报跨域，可能是我技术不够） fetch + 服务器代理
（因为第一次请求的地址，格式固定，Nginx 反代 + 重定向拦截 + 添加固定格式 + 再代理，好丑陋啊，我去，而且走自己的服务器明显变慢，还耗费流量，影响体验）header中加<meta name="referrer" content="no-referrer">
缺点：跨域资源共享，资源加载问题，分析和跟踪，如果你请求别的接口也可能会因为没有referrer报错，但是我是这样实现的）
四、模版与资源分享
虽然是一坨狗屎，但是还是分享出来，如果能帮到兄弟姐妹也是一件好事
下载后放到把php文件放在主题template的pages文件夹下，也有可能叫page，实在不知道，就把主题压缩包解压一下搜一下关键词Template Name: ，然后看看主题的模版文件放哪里，然后再修改douyin-player-template.php中的，就是压缩包中js文件放置能请求到的地址
$videos_json_url = /* js文件放置请求地址 */; 最后就在页面新添加页面就好了
说在最后🐶，分享出来，不为别的，就为了让有同样想法的人少走点弯路，或者直接抄作业也行。如果你觉得有用，拿去改、拿去用，随便搞；如果觉得垃圾，那你说得对，我承认，欢迎指点，但别骂太狠，毕竟我只是个懒人，不是专业前端。
也感谢那些开源项目和愿意分享的大佬们，站在你们的肩膀上，我才得以用最糙的方式实现了最想要的效果。技术这东西，本来就是拿来解决问题的，不一定非得高大上，能跑就行。
另外提一嘴，目前模版里调用的 API 数据文件，是我本地采集后整理好的静态 JSON，暂时就放在我分享的压缩包里了。如果你也有类似需求，比如想换博主、想更新列表、或者不知道怎么采集数据，评论区留个言，我可以帮你抓一波。
实在不懂的也别怕，手把手教学我也乐意，反正都是折腾着玩，能帮上忙就当交个朋友了。
