近期,我尝试录制了几条视频用于推广网站页面,本打算发网抖音、B 站和西瓜视频,结果发现西瓜已经被砍了,抖音也不太适合,最后只剩下 Bilibili 了。而且也只有它支持再嵌入到咱们的网页中,但 B 站的默认嵌入太丑了!
Bilibili 默认提供的嵌入代码如第一行所示,几乎没有任何参数,甚至连尺寸都未设置,呈现的是一个非常小的播放器,而且还默认自动播放,体验很差。通常我会在此基础上做一些调整,按需补充宽高参数,并在末尾加上 &autoplay=0
以关闭自动播放,如第二行代码。
// bilibili 默认代码
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113059762799357&bvid=BV1nMHNebE8P&cid=25683297836&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
// 我以前的修改版本
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=113059762799357&bvid=BV1nMHNebE8P&cid=25683297836&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="930" height="528"></iframe>
// 极简化播放器代码
<iframe src="//bilibili.com/blackboard/html5mobileplayer.html?isOutside=true&aid=113059762799357&bvid=BV1nMHNebE8P&cid=25683297836&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="930" height="526"></iframe>
最终呈现的效果还不错,由于尺寸是根据我自己的页面手动设定的,因此播放器刚好贴合,没有出现黑边,整体感比较协调。不过,播放器上元素实在太多,包括 B 站 LOGO、视频标题以及各种按钮等,略显杂乱。当然,最让人头疼的是,一不小心就容易误触,直接跳转到 B 站原页面!
前不久,我在缙哥哥博客上看到一个方法,可以通过修改嵌入代码中的参数,实现更简洁的 Bilibili 播放器效果。只需替换地址,并添加两个参数即可,其中:
- 播放器替换:
player.bilibili.com/player.html
替换为bilibili.com/blackboard/html5mobileplayer.html
- 可选参数 1:
hideCoverInfo=1
表示隐藏播放量等信息 - 可选参数 2:
danmaku=0
表示默认关闭弹幕
最终我使用上述第三段代码形成的效果如下,尽管画质似乎更烂了,至少页面清爽了不少!如何抉择看情况吧~
抖音也可以嵌入网页,画质要比B站好
developer.open-douyin.com/docs/resource/zh-CN/dop/develop/openapi/video-management/douyin/iframe-player/get-iframe-by-video