Hexo视频播放

如何实现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下载地址：

• 官网：http://www.ckplayer.com/
• 我的CDN加速地址

gotoplayer.js下载地址：

• 我的CDN加速地址

使用方法

1. 首先调用两个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>

就可以播放视频了

好处有啥？

1. 只要引入JS，你可以在任何支持Markdown语法的博客中这么写
2. 比使用<video>标签兼容性更好
3. 比使用Hexo插件可移植性更好
4. 兼容主流视频格式，建议使用MP4

打赏