如何实现Hexo静态博客视频播放?
其实并不难,说一下我的想法:
博客文章一般是用Markdown来写的
Markdown 是一种用来写作的轻量级 标记语言
Markdown 优点
1.专注你的文字内容而不是排版样式,安心写作。
2.轻松的导出 HTML、PDF 和本身的 .md 文件。
3.纯文本内容,兼容所有的文本编辑器与字处理软件。
4.随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。
5.可读、直观、学习成本低。
因为这些优点,所以绝大多数博客系统都支持Markdown写的文件,也就是.md文件
** 但是MarkDown没有被标准化,其版本较多。**
除了一些通用的标记如标题,样式,列表等,每个平台都有自己特殊的标记
比如Hexo通过hexo-tag-dplayer
插件来实现播放视频:
GitHub:https://github.com/MoePlayer/hexo-tag-dplayer
安装插件npm install hexo-tag-dplayer --save
后
使用如下代码调用:
{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
这种方式虽然使用方便,但这样可移植性就非常差了,如果要把博客转移到其他平台非常不方便。
那么有没有其他办法呢?
我们知道.md文件是通过渲染生成HTML文件后再放上网页的,也就是说直接在md文件中写的HTML可以原样放上网页
怎么做呢?
使用准备
我们需要ckplayer网页播放器的ckplayer.js
和我写的gotoplayer.js
ckplayer.js下载地址:
gotoplayer.js
下载地址:
使用方法
- 首先调用两个JS
<script type="text/javascript" src="/js/ckplayer.js"></script>
<div class="videosamplex">
<script type="text/javascript" src="/js/gotoplayer.js"> </script>
或使用我的CDN调用两个JS
<script type="text/javascript" src="https://web-1253780623.cos.ap-shanghai.myqcloud.com/zhf-blog/js/ckplayer.js"></script>
<div class="videosamplex">
<script type="text/javascript" src="https://web-1253780623.cos.ap-shanghai.myqcloud.com/zhf-blog/js/gotoplayer.js"> </script>
** 注意:如果你不打算用我的CDN,那么请把两个文件放在博客目录下的source\js文件夹中 **
并且确保在执行hexo g
后在博客目录下的public\js中能找到这两个文件。
在引入两个JS后只需要在md文档中这么写:
<div class="videosamplex">
<video id="videoplayer"
src="插入的视频地址"></video>
</div>
<script>
gotoplayer("插入的视频地址");
</script>
就可以播放视频了
好处有啥?
- 只要引入JS,你可以在任何支持Markdown语法的博客中这么写
- 比使用
<video>
标签兼容性更好 - 比使用Hexo插件可移植性更好
- 兼容主流视频格式,建议使用MP4