Halo 博客框架内容中,发布音视频内容的介绍
原文作者: 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的值。
介绍到这里,相信大家应该都能够知道如何播放视频和音频了。