原文作者： Z同学
原文来源： Z同学
原文链接： https://zinyan.com/?p=286

介绍

我们如果想发布带音视频播放器的文章，主要不在于后台是否支持而是在于前端主题是否支持。

也就是说我们使用的主题能否支持播放的问题。

在主题作者的官网也有过介绍：🌈 Halo-theme-joe2.0 食用文档 (bbchin.com)

本篇主要在作者的介绍基础之上，进行扩展和实践的完整步骤。

1. 插入音乐播放

1.1 使用iframe 面板

joe2.0主题支持嵌入iframe。所以我们可以直接使用iframe标签进行音乐的播放。

1.在pc端找到你想嵌入的音乐，点击生成外链播放器：

然后我们可以配置iframe标签的相关属性。例如

然后将下面的HTML标签代码：

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

直接拷贝到博客文章中，就可以实现下面的效果了：（请不要使用代码块包裹，我上面只是一个示例）

（ps：如果出现比较高的空白，那么说明主题在识别iframe标签下有bug。）

1.2 使用joe2.0主题提供的joe-music标签

joe2.0主题文档中介绍已经集成了APlayer 然后扫描文章中的joe-music标签和joe-mlist标签。进行播放音频

官网介绍主要是通过网易云歌单和歌曲ID才能播放。

示例：

<joe-mlist id="6800335663"></joe-mlist> //播放歌单
 // 播放歌曲
<joe-music  id="1303046498"></joe-music>

那么问题来了。这上面的id是如何获取呢？

我尝试从pc中访问音乐或者歌单，抓取浏览器地址中的id值。例如：

但是界面上没有任何反应。不知道是配置有问题还是说id取错了值。
获取歌曲的播放id也是和歌单逻辑一样，链接地址中都存在该参数一样得到id值。
我尝试过多首歌曲和歌单，都无法播放。我不知道是主题的问题，还是说id外链不能播放的问题。
最后尝试iframe标签下是能够播放的。

（ps：如果出现了歌单，说明正常，如果没有出现说明主题有bug）

2. 插入视频

2.1 使用joe2.0主题提供的joe-dplayer 标签

我们可以直接使用joe-dplayer标签播放指定的视频，但是需要视频的完整下载地址：

<joe-dplayer src="https://xxx.mp4"></joe-dplyer>

我们还可以添加width 和height参数，来定义播放器的宽度 和高度。默认情况下宽度100%，高度50%

而针对bilibili的视频，作者提供了专门的joe-bilibili 标签。

bvid：视频的 id（必传）
page：视频的 page，即分页
width：阅读器宽度，默认为 100%
height：阅读器高度，默认 500px
//使用示例：

<joe-bilibili bvid="BV1iU4y1d7UX"></joe-bilibili>

根据介绍，实现的嵌入视频播放效果如下：

那么，这个播放器中的bvid是如何获取呢？很简单，就是播放视频中video后面的参数：

2.2 使用iframe 播放bilibili视频

如果觉得这种方式不满足，也可以使用bilibili提供的iframe进行播放。

直接获取分享内容中的嵌入代码功能，就能播放该视频了。

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

我们可以从这个iframe中看到bvid的值。
介绍到这里，相信大家应该都能够知道如何播放视频和音频了。