开源Typecho抖音播放器插件
AI摘要:开源抖音播放器插件,通过正则表达式匹配抖音链接并替换为iframe播放器,支持自定义尺寸和居中显示,仅替换渲染时链接,不影响原始内容。安装简单,配置灵活,适用于Typecho平台。
前段时间,开源了一个Bilibili播放器插件,原理也是非常简单。这次看到抖音也可以视频分享,那就也做一个抖音的播放器插件吧。
原理非常简单,使用正则表达式匹配抖音的链接,然后替换成 iframe 播放器就可以了。
使用的时候更简单了,根本不用短代码,直接把视频链接扔进去就可以了,这样一来即便是禁用了插件,也可以正常的跳转到视频地址。
演示
功能特点
- 自动识别Typecho转换后的抖音视频链接
- 将链接替换为抖音官方播放器
- 支持自定义播放器尺寸
- 居中显示视频播放器
- 仅在渲染时替换,不影响原始内容
安装方法
- 将整个
DouYinPlayer文件夹上传到Typecho的usr/plugins/目录下 - 登录Typecho后台,进入"控制台" -> "插件"
- 找到"抖音视频播放插件",点击"启用"
- 启用后,在插件设置中配置播放器尺寸
配置选项
| 参数用途 | 参数名 | 默认值 | 使用方法 |
|---|---|---|---|
| 视频宽度 | width | 100% | 例如:100%, 800px |
| 视频高度 | height | 720px | 例如:720px, 500px |
使用方法
在文章中直接粘贴抖音视频链接,例如:
https://www.douyin.com/video/7554555892894436666 [王叨叨视频](https://www.douyin.com/video/7554555892894436666) [王叨叨视频][3] [3]: https://www.douyin.com/video/7554555892894436666- Typecho会自动将链接转换为
<a>标签,插件会检测并替换为播放器 - 播放器将使用您在插件设置中配置的默认尺寸,并居中显示
如何获取抖音链接
在电脑端浏览器打开抖音,然后在需要分享的视频上面右键--->进入详情
然后浏览器会打开新的窗口,新窗口的 url 链接就是视频的地址。
示例
原始链接:
https://www.douyin.com/video/7554555892894436666Typecho转换后:
<a href="https://www.douyin.com/video/7554555892894436666">https://www.douyin.com/video/7554555892894436666</a>插件处理后:
<p style="display: flex;justify-content: center;">
<iframe width="100%" height="720px" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" src="https://open.douyin.com/player/video?vid=7554555892894436666&autoplay=0" referrerpolicy="unsafe-url"></iframe>
</p>注意事项
- 插件仅处理
<a>标签格式的抖音视频链接 - 插件仅在渲染时替换链接,不会修改原始文章内容
- 禁用插件后,视频将恢复为原始链接形式
- 播放器使用抖音官方嵌入代码,确保最佳兼容性
反馈与支持
目前插件还没有做更多的样式优化,只是简单的播放,后续需要针对移动端和PC端做响应式处理。
如果您遇到任何问题或有改进建议,请通过以下方式联系:
下载
插件已经放在了:https://github.com/wangdaodao/TypechoPlugins
喜欢的可以给一个星星。


可以
高产叨叨
这种是不是像 b 站一样,有清晰度限制?
蛮高产的~
非常非常简单,正则匹配就完事了,后面样式还没去做优化改进呢