传统的文字博客固然优雅，嵌入多媒体的博客甚至于具备阅读交互的博客，是技术党永恒的追求。本篇通过对markdown文档、html通用的多媒体嵌入方式的讨论，寻找适合Typecho博客的轻量化多媒体嵌入方式。
视频嵌入的基本方法
1. 基于html5mobileplayer的方法
传统的iframe框架最为方便，其定位的关键在于source路径。以b站为例，可以使用html5mobileplayer，替换bvid为对应视频的bvid。bvid可以通过右键视频复制播放地址直接截取获得。
<div class="iframe_div">
<iframe class="iframe_video" src="https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=BV1i4hZebEJW"></iframe>
</div>效果如下：
这里发现，默认iframe标签包裹的结构是无法设置居中的，需要在div标签下通过居中样式实现：
style="display: flex;justify-content: center;"这种方法只显示视频，没有跳转，也没有点赞、分享等功能信息。
2. 基于b站播放器的方法
<div class="iframe_div">
<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=478818261&page=1&danmaku=0&as_wide=1&high_quality=1"> </iframe>
</div>效果如下：
这种方式可以显示与 bilibili 网站中界面一致的视频界面，点击视频可以直接链接到 bilibli 网站。
如何定位视频源？
通过以上代码我们发现，关键在于寻找视频的定位源。以b站视频为例，分为3种定位方式：
1. bvid定位
第一种是类似 https://www.bilibili.com/video/BV1i4hZebEJW 这样的。
这里BV后面的 BV1i4hZebEJW 就是当前视频的 bvid。
2. aid定位
第二种是类似 https://www.bilibili.com/bangumi/play/ep733316?spm_id_from=333.337.0.0
- 这种样式无法直接获取 bvid
但可以在视频处右键，点击“复制视频地址(精准空降)”，从而得到类似https://www.bilibili.com/video/av478818261?t=205.6 的网址，这里 av 后面的 478818261 就是当前视频的 aid。
3. 一键获取嵌入代码
活了这么多年才知道，原来在b站电脑端，分享按钮下的“嵌入代码”，能够直接复制现成的嵌入代码。
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=112750307053450&bvid=BV1i4hZebEJW&cid=500001608863900&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>可以看到这里生成的代码，同样是基于b站播放器的嵌入方法。
嵌入视频的相关参数
参数 说明 page第几个视频，起始下标为 1 (默认值也是为 1)，即B站视频选集里的第几个视频。 as_wide是否宽屏：1 为宽屏，0 为小屏。 high_quality是否高清：1 为高清，0 为最低视频质量（默认）。不过由于B站对高清视频的限制，设置高清往往无效。 danmaku是否开启弹幕：1 为开启（默认），0 为关闭。 常用的是
as_wide参数，设置为宽屏后能少使用div参数调整大小音频嵌入——以网易云播放器为例
音频链接获取方法
传统的方法是在网易云歌单中选择“生成外链播放器”（如上图）。但尝试后，均显示由于版权保护，无法生成外链。
这里采用一种替代方法：
- 获取歌曲id：复制网易云歌曲播放网址，如https://music.163.com/#/song?id=1348568908得到id
- 通过音乐站的搜索知道，获取歌曲原链接地址：https://music.163.com/song/media/outer/url?id=
网易云音乐歌曲的ID数字.mp3 得到歌曲的链接：
https://music.163.com/song/media/outer/url?id=1348568908.mp3然而这样一来，只能访问跳转链接来进行查看，并且不支持https协议。
1. 基于video标签的嵌入方法
这里需要结合上述步骤获取的音频连接
<video controls height="100" width="100"> <source src="https://music.163.com/song/media/outer/url?id=1348568908.mp3"> </video>其中，controls属性打开控制台，还能直接在video标签内指定宽度高度。效果如下:
可以控制播放，但不够美观，始终有播放控制栏留有白色padding上边缘的问题。这里的白色上边缘问题是由什么造成的？还请各位读者不吝赐教
2. 基于audio标签的嵌入方法
<audio controls height="100" width="100"> <source src="https://music.163.com/song/media/outer/url?id=1348568908.mp3" type="audio/mpeg"> <embed height="50" width="100" src="https://music.163.com/song/media/outer/url?id=1348568908.mp3"> </audio>效果如下：
似乎与前一种方法并无二异，但没有了白色上边缘的问题。