0%

Next添加视频播放组件

player

添加文章页的 player 播放视频的主要原因是因为,如果想分享一个视频的话,直接发链接,估计很少有人会去看的,但如果放在文章页直接可以播放的话就不一样了…

为什么写只 next 的?
由于个人精力有限,如果把每个模板都写出来教程那肯定写不出来
那我用的是其他模板怎么办?
很简单,比葫芦画瓢

如果你是在不想自己添加或者,不会的话,可以付钱找 XLJ 添加

开始

首先我们找到我们 hexo 根目录的 themes 文件夹,然后打开 next 文件夹.
然后进入 \layout\_partials\head 这个文件夹,找到 head.swig 这个文件,打开.

打开之后会看到一堆 swig 结构,和 html 很相似
我们找到 <meta charset="UTF-8"> .
在它的下面添加

导入

1
2
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.7/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.7/aliplayer-min.js"></script>

容器

之后我们 hexo new index.md
在里面添加 html 的标签

1
<div id="player"></div>

控制

最后我们再标签下面添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var player = new Aliplayer({
"id": "player",
"source": "视频地址(绝对地址)",
"width": "100%",
"height": "500px",
"autoplay": true,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"controlBarVisibility": "hover",
"useH5Prism": true
}, function (player) {
console.log("The player is created");
}
);
</script>

这样就实现了视频播放的 player 播放器.

视频

结束

如果还有什么问题欢迎提出