SEO技术

SEO技术

Products

当前位置:首页 > SEO技术 >

如何让Smartideo WordPress插件支持B站BV号视频播放?

96SEO 2025-09-01 10:20 6


:为何需要让Smartideo插件支持B站BV号视频播放?

B站自2020年3月起,全面将视频链接ID由传统的“av”号升级为以“BV”开头的新格式。官方表示此举是为了保护稿件信息平安、容纳更多投稿并维护UP自主权益。但这一变动直接导致很多WordPress视频播放插件无法正常解析B站视频地址,其中就包括非常受欢迎的Smartideo插件。

由于Smartideo插件原有的正则表达式只能匹配“av”开头的数字ID, 复制粘贴带有BV号的视频链接时无法被识别,导致视频无法嵌入和播放。更糟糕的是 插件作者已多年未更新该插件,应对不断变化的视频站点支持不足,所以呢需要用户自行通过代码钩子进行修改,让插件支持B站最新的BV号。

如何让WordPress视频播放插件Smartideo 支持B站BV号

准备工作:理解Smartideo插件结构及WordPress钩子机制

要 Smartideo, 使其支持B站BV号,需要先了解两个关键点:

  • Smartideo源码结构:该插件核心在于iframe或嵌入代码。
  • WordPressWordPress提供了丰富的钩子API,包括动作钩子和过滤器。这里我们重点使用wp_embed_register_handler注册新的URL处理规则,实现对新URL格式的支持。

B站BV号格式解析与正则表达式编写

B站传统的视频链接形式为:

  • https://www.bilibili.com/video/av12345678

而升级后的新格式为:

  • https://www.bilibili.com/video/BV1xx411x7xQ

BV号由大写字母和数字组成, 长度固定但不规则,为了精准匹配,我们设计如下正则表达式:

#https?://?bilibili\.com/video/BV#i

说明:

  • #...#i: 正则定界符及不区分大小写标志。
  • ?: 匹配可选的“www.”前缀。
  • BV: 捕获关键部分,即“BV”后面跟随的一串字母数字组合作为视频ID。

步骤一:定位并备份Smartideo核心文件smartideo.php

- 登录你的WordPress后台服务器, 通过FTP或主机文件管理器找到Smartideo插件目录,路径通常类似于: /wp-content/plugins/smartideo/

- 找到smartideo.php文件,这个文件包含了主要的视频URL处理逻辑。请务必做好备份,以防误操作导致网站故障。

步骤二:添加BV号正则处理器注册代码

- 打开smartideo.php, 找到大约第87行左右的位置, 可以看到类似下面代码片段,这里是各种视频网站URL处理器注册位置:


wp_embed_register_handler( 'smartvideo_bilibili_av',
    '#https?://?bilibili\.com/video/av#i',
    array
);

- 在该位置下方添加对B站BV号新格式的支持,如下所示:


// 新增 Bilibili BV 视频识别规则
wp_embed_register_handler( 'smartvideo_bilibili_bv',
    '#https?://?bilibili\.com/video/BV#i',
    array
);

步骤三:新增处理函数实现解析与iframe嵌入功能

- 在同一文件中靠近其他处理函数的位置,添加如下函数,用于针对BV格式生成正确的视频嵌入代码:


public function smartideo_embed_handler_bilibili_bv {
    // 获取捕获到的视频ID
    $video_id = isset ? $matches : '';
    // 默认播放页面页码
    $page = 1;
    // 构建播放器iframe URL
    $iframe_src = "https://player.bilibili.com/player.html?bvid=BV{$video_id}&page={$page}";
    // 返回iframe标签HTML,宽度高度自适应,可
    $embed = '';
    return apply_filters;
}

代码解析:

  • $matches —— 从正则捕获组获取纯粹的视频编号;
  • $page —— 默认为1,如果需要多P分集可再做 ;
  • $iframe_src —— 使用官方播放器地址且传递
  • $embed —— 完整返回符合HTML5标准、响应式友好的iframe标签;
  • apply_filters用于兼容WP过滤器调用和后续拓展调用。

步骤四:测试功能—在文章中插入B站BV链接验证效果

- 完成以上修改并保存后 在WordPress后台新建或编辑一篇文章,只需直接插入带有完整.

- 发布或预览文章时检查页面是否成功加载出B站官方播放器并能正常播放对应视频。若显示异常,请确认之前代码准确无误且缓存已刷新。

BONUS技巧:兼顾AV旧版号码及更完善兼容性方案介绍

A. 一边保留原AV号码支持方法, 实现AV和BV共存播放能力:


// 原来的 av ID 正则保留,并用老方法处理:
wp_embed_register_handler( 'smartvideo_bilibili_av',
    '#https?://?bilibili\.com/video/av#i',
    array
);
// 新增 BV ID 支持:
wp_embed_register_handler( 'smartvideo_bilibili_bv',
    '#https?://?bilibili\.com/video/BV#i',
    array
);

B. 更完善的分页支持示例:


public function smartideo_embed_handler_bilibili_bv {
    $pattern_page = '##';
    preg_match;
    $page = isset ? intval : 1;
    $video_id = isset ? trim : '';
    if ) {
        return ''; // 未捕获到有效id,则返回空避免错误显示。
    }
    $src_url = sprintf, esc_attr);
    return sprintf('', esc_url_raw);
}

C. 如何 至移动端适配?

  • Smarteo默认响应宽度100%,但可以结合CSS媒体查询进一步微调高度与比例。比方说 根据设备屏幕宽度tag高度以保持16:9比例最佳观感;
  • MOBILE端检测可借助WP内置函数如wpt_is_mobile, 可在PHP层面条件判断不同版本播放器模板或尺寸;
  • XFrameOptions防御问题也需注意,如CDN反向代理环境可能影响播放器正常加载,需要排查HTTP头设置。

Troubleshooting 常见问题排查指导与优化建议

视频无法显示或黑屏问题解决方案:

  • 确认是否禁用了第三方脚本加载, 某些平安类插件可能拦截Iframe资源;
  • 检查浏览器控制台Console是否报错跨域请求、Mixed Content等平安警告; 若有,请确保网站运行HTTPS协议且引用资源协议一致;
  • 清理WP缓存及浏览器缓存, 刷新查看效果;
  • 尝试关闭其他可能冲突的JS库或插件排查冲突源;
  • 确认网络环境是否能访问bilibli官网外链资源,有地域限制需使用代理访问。
  • 如有必要,可尝试更新PHP版本至7.4及以上以提升兼容性和性能。

视频自动缩放与响应式优化小技巧:

  • - 使用CSS最大宽度限制, 比方说给父容器设置max-width:800px,一边给Iframe设定width:100%;height:auto;
  • - 设置CSS aspect-ratio 属性保证16:9比例,比方说:
  • - 配合JavaScript监听窗口resize事件高度也可实现更灵活交互体验,但多数情况下纯CSS即可满足需求。
  • 本文技术方案已,在主流PHP7.x环境以及WordPress最新版本中均能稳定运行。如果你遇到任何疑问或者想获取完整修改版源码,请留言交流!一边请关注备份和平安措施,以免因直接修改源码造成数据丢失!祝您打造出专业、高效、且兼容强大的WordPress视频播放网站!—技术专家敬上。



提交需求或反馈

Demand feedback