在文章中嵌入视频和音乐

有时会有在文章中嵌入视频或者音频的需求，所以提前折腾下，记录下如何操作以及相关代码，方便后续的参考或者使用。

嵌入b站视频

要将b站的视频嵌入很简单，电脑网页版 打开视频后，点击 分享按钮 就可以看到 嵌入代码 选项，点击就可以复制相关代码了，然后直接在 编辑器 或者 HTML 中粘贴即可使用。

但是官方给的代码有很多问题，比如默认自动播放、弹幕默认开启，点击视频一些区域直接跳转官网，视频宽高比不合适等。

所以需要改进官方代码，有两种方案：

1. 优化原有代码

官方代码

<iframe src="//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修改后

<iframe src="//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1&high_quality=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

代码讲解

BILIBILI 地址PC端参数
    &high_quality=1   (1=最高画质 0=最低画质注：此项已失效)
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)
iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页

视频效果预览

2. 强制使用移动端播放器进行优化

将原代码

<iframe src="//player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

改为

<iframe src="//www.bilibili.com/blackboard/html5mobileplayer.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

即将 //player.bilibili.com/player.html 换成了 //www.bilibili.com/blackboard/html5mobileplayer.html

常用参数

是否自动播放(默认否)：autoplay
默认弹幕开关(默认开启)：danmaku
是否默认静音(默认否)：muted
一键静音按钮是否显示(默认不显示)：hasMuteButton
视频封面下方是都显示播放量弹幕量等信息(默认显示)：hideCoverInfo
是否隐藏弹幕按钮（默认不隐藏）：hideDanmakuButton
是否隐藏全屏按钮(默认显示)：noFullScreenButton
是否开始记忆播放(默认开启)：fjw
默认开始时间(单位秒，默认0)：t
是否显示高清(默认否)：highQuality（已验证无用，因为除了参数外它还判断了网址是否来自 bilibili）

视频效果预览

嵌入网易云音乐

要将b站的视频嵌入很简单，网页打开音乐详情页后，就可以看到 **生成外链播放器**，点击就可以复制相关代码了，然后直接在 编辑器 或者 HTML 中粘贴即可使用。

比如下方复制的代码

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1974443813&auto=1&height=66"></iframe>

官方代码效果预览（关闭自动播放）

width 和 height 分别控制播放器的宽度和高度，auto 控制歌曲是否自动播放，自适应宽度只需要把代码中的 width 改成 100%。

代码如下：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="//music.163.com/outchain/player?type=2&id=1974443813&auto=0&height=66"></iframe>