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

介绍

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

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

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

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

1. 插入音乐播放

1.1 使用iframe 面板

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

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

1.png

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

2.png

然后将下面的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值。例如:
5.png

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

(ps:如果出现了歌单,说明正常,如果没有出现说明主题有bug)

2. 插入视频

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

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

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

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

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

bvid:视频的 id(必传)
page:视频的 page,即分页
width:阅读器宽度,默认为 100%
height:阅读器高度,默认 500px
//使用示例:

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

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

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

3.png

2.2 使用iframe 播放bilibili视频

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

4.png

直接获取分享内容中的嵌入代码功能,就能播放该视频了。
<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的值。
介绍到这里,相信大家应该都能够知道如何播放视频和音频了。
最后修改:2022 年 12 月 31 日
如果觉得我的文章对你有用,别忘了点赞或赞赏,让我知道路上有你陪伴。