0%

aliplayer实现文章里插入视频

添加文章 播放视频的主要原因是因为

如果想分享一个视频的话,直接发链接,估计很少有人会去看的

但如果放在文章页直接可以播放的话就不一样了…

开始

找到 hexo 根目录的 themes 文件夹,然后打开 next 文件夹

然后进入 \layout\_partials\head 这个文件夹,找到 head.swig这个文件

打开文件

引用

<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 文章名字 来新建

当然这是一个 md 文件

写入

在里面添加 html 标签并写入代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="player"></div>
<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>

然后保存退出就完事了

视频

尾巴

来源于 XLJ 的博客,点此查看原博文

----------------本文结束感谢阅读----------------
如果觉得文章好的话,就打个赏吧!
隐藏