开源Typecho抖音播放器插件

AI摘要:开源抖音播放器插件,通过正则表达式匹配抖音链接并替换为iframe播放器,支持自定义尺寸和居中显示,仅替换渲染时链接,不影响原始内容。安装简单,配置灵活,适用于Typecho平台。

前段时间,开源了一个Bilibili播放器插件,原理也是非常简单。这次看到抖音也可以视频分享,那就也做一个抖音的播放器插件吧。

原理非常简单,使用正则表达式匹配抖音的链接,然后替换成 iframe 播放器就可以了。

抖音自己会根据容器的宽度来判断移动端或者电脑端,跟了下代码,发现730px是他的临界值,所以样式也会基于这个宽带做适配。

使用的时候更简单了,根本不用短代码,直接把视频链接扔进去就可以了,这样一来即便是禁用了插件,也可以正常的跳转到视频地址。

演示

功能特点

  • 自动识别Typecho转换后的抖音视频链接
  • 将链接替换为抖音官方播放器
  • 居中显示视频播放器
  • 仅在渲染时替换,不影响原始内容

安装方法

  1. 将整个DouYinPlayer文件夹上传到Typecho的usr/plugins/目录下
  2. 登录Typecho后台,进入"控制台" -> "插件"
  3. 找到"抖音视频播放插件",点击"启用"

使用方法

  1. 在文章中直接粘贴抖音视频链接,例如:

    https://www.douyin.com/video/7554555892894436666
    
    [王叨叨视频](https://www.douyin.com/video/7554555892894436666)
    
    [王叨叨视频][3]
    
    [3]: https://www.douyin.com/video/7554555892894436666
  2. Typecho会自动将链接转换为<a>标签,插件会检测并替换为播放器
  3. 播放器将居中显示

如何获取抖音链接

在电脑端浏览器打开抖音,然后在需要分享的视频上面右键--->进入详情

抖音链接

然后浏览器会打开新的窗口,新窗口的 url 链接就是视频的地址。

示例

原始链接:

https://www.douyin.com/video/7554555892894436666

Typecho转换后:

<a href="https://www.douyin.com/video/7554555892894436666">https://www.douyin.com/video/7554555892894436666</a>

插件处理后:

<div class="typecho-douyin-video">
  <div class="typecho-douyin-video-wrapper">
    <iframe width="100%" height="100%" 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>
  </div>
</div>

注意事项

  • 插件仅处理<a>标签格式的抖音视频链接
  • 插件仅在渲染时替换链接,不会修改原始文章内容
  • 禁用插件后,视频将恢复为原始链接形式
  • 播放器使用抖音官方嵌入代码,确保最佳兼容性

反馈与支持

如果您遇到任何问题或有改进建议,请通过以下方式联系:

下载

TypechoPlugins
TypechoPlugins
Owner:wangdaodao
Watch:6
Star:6
Fork:2
Typecho plugins

喜欢的可以给一个星星。

已有 28 条评论

  1. 刘郎 刘郎 [路⼈]
    回复

    这功能不错 不过要是能在自己的博上刷抖音 或刷其他视频 想想也挺不错呢

    1. 王叨叨 王叨叨 [作者]
      回复

      哈哈,只是分享,没办法刷抖音视频

    1. 王叨叨 王叨叨 [作者]
      回复

      欢迎使用

  2. 我是军爸 我是军爸 [路⼈]
    回复

    这个有没有wordpress版本的插件呢

    1. 王叨叨 王叨叨 [作者]
      回复

      没有,因为我不用wp,所以这块没有做适配

  3. 老张博客 老张博客 [路⼈]
    回复

    实用的功能!备用

    1. 王叨叨 王叨叨 [作者]
      回复

      目前抖音分享还是不那么方便,但是清晰度我感觉比b站的要好

  4. 网友小宋 网友小宋 [路⼈]
    回复

    所以直接合并不就行了。

    1. 王叨叨 王叨叨 [作者]
      回复

      合并倒是没问题,不过显得有点冗余,而且后面如果再增加其他平台的视频,更不方便维护了,并且这种合并也违背了设计中的单一性原则,按需去使用就好。

  5. 崔话记 崔话记 [路⼈]
    回复

    漂亮 这样子就不用再去下载视频 再存到服务器上 增加负担 这个太有用了

    1. - - [路⼈]
      回复

      才发现 信息没填 但是 第一反应就是框里有信息了 就没确认对不对

  6. 崔话记 崔话记 [路⼈]
    回复

    这种简单替换,放到主题里更省事了,感觉更高效一点,前提是没想着换主题

    1. 王叨叨 王叨叨 [作者]
      回复

      插件更通用一些,我目前主题里面的功能基本上都摘出来弄成插件了,只有少量定制型的放主题里面了。

  7. 回复

    好久没用typecho,十年前用着免费主机为了网站加载速度快, 特意用的typecho轻量化

    1. 王叨叨 王叨叨 [作者]
      回复

      十年前用的wp,后来发现太吃服务器了,就换成te了,目前来看该有的功能也都有了

  8. 灰常记忆 灰常记忆 [路⼈]
    回复

    哈哈 这个插件还蛮不错的 typecho很多要自己折腾

    1. 王叨叨 王叨叨 [作者]
      回复

      看到啥就折腾啥,不过自己用的不太多

  9. 花非花 花非花 [朋友]
    回复

    先来个星标,说不定哪天就用上了

    1. 王叨叨 王叨叨 [作者]
      回复

      今天把样式也稍微调整一下,不过感觉还是差点意思

    1. 王叨叨 王叨叨 [作者]
      回复

      欢迎使用,就是目前样式还没想好怎么优化

  10. 夏末 夏末 [朋友]
    回复

    高产叨叨

    1. 王叨叨 王叨叨 [作者]
      回复

      之前看有人做,但是貌似没人发布,原理很简单,顺手就做了

  11. 小十 小十 [好友]
    回复

    这种是不是像 b 站一样,有清晰度限制?

    1. 王叨叨 王叨叨 [作者]
      回复

      目前为止没发现,和我用手机客户端效果没啥区别。

  12. acevs acevs [路⼈]
    回复

    蛮高产的~

    1. 王叨叨 王叨叨 [作者]
      回复

      非常非常简单,正则匹配就完事了,后面样式还没去做优化改进呢

添加新评论