侧边栏壁纸
博主头像
Z同学博主等级

工作磨平激情前,坚持技术的热忱。 欢迎光临Z同学的技术小站。 分享最新的互联网知识。

  • 累计撰写 274 篇文章
  • 累计创建 55 个标签
  • 累计收到 74 条评论

Halo 博客内容中,发布音视频内容的介绍

Z同学
2022-03-22 / 4 评论 / 2 点赞 / 382 阅读 / 1,968 字
温馨提示:
本文最后更新于 2022-03-25,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

介绍

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

也就是说我们使用的主题能否支持播放的问题。例如本站当前使用的joe2.0主题就支持插入音视频。

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

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

1. 插入音乐播放

1.1 使用iframe 面板

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

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

image-20220322153848962

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

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

image-20220322152958690

但是界面上没有任何反应。不知道是配置有问题还是说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后面的参数:

image-20220322161359556

2.2 使用iframe 播放bilibili视频

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

image-20220322161525681

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

<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的值。

介绍到这里,相信大家应该都能够知道如何播放视频和音频了。但是我想播放网易云的mv和qq音乐该怎么办呢?

2

评论区