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加速地址
使用方法
- 首先调用两个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
Hexo静态博客视频播放相关推荐
- python博客下载本地文件_Linux CentOS6安装Git、Node.js及Hexo静态博客安装和使用方法...
有些时候,我们有听到或者看到某个技术很希望自己也能尝试一下,即便我们没有项目需求,但接触过后以后还可以跟别人吹嘘这个技术我玩过,具体能否玩的精通都无所谓,至少我们可以体验到其中的乐趣.这不,这几天有接 ...
- 从零开始使用GitHub Pages搭建Hexo静态博客
本文主要讲述如何使用GitHub Pages/Coding/Vercel搭建Hexo静态博客,以及如何使用jsDelivr加速静态资源.如何使用LeanCloud国际版搭载博客评论,和如何使用PicG ...
- Hexo 静态博客 我的新博客
欢迎访问我的新博客: 内容持续更新 https://www.oikiou.top/ 静态网页 静态网页生成器 Jekyll(由 Github 构建的用于为其 Github 页面提供支持的 Ruby 生 ...
- 2021最新 阿里云Centos7+Nginx部署Hexo静态博客
[限时]1年86元,3年229元,用来建站和编程学习[限时领取阿里云2000元建站礼包] 前言 之前在服务器用WordPoress,Eblog程序搭建过个人博客,因为平时也不写什么,导致服务器过期也没 ...
- hexo静态博客修改侧边栏
hexo主题默认的侧边栏只有首页.归档.标签这几项.调研了几个比较优秀的博客之后发现,还需要添加关于.搜索.阅读.旅行等等几个侧边栏项目,那么如何在博客里面添加新的侧边栏项目呢? 原文:小宇的博客 添 ...
- 用户名或用户域名_给自己的Hexo+GitHub静态博客绑定自己的专属域名
前言 GitHub+Hexo静态博客详细教程,介绍:对比:部署:发布 - 听海的博客www.tsingsea.com 以上是Hexo+GitHub静态博客超级详细搭建教程的正文部分,也算是这个专题教 ...
- Hexo+GitHub静态博客系列1——三步快速搭建
前言 Hexo+GitHub静态博客搭建姿势千千万,各种教程也写烂 那么此搭建姿势就非主流些,侧重图形化操作,减少代码配置,适合新手快速搭建 说来本人也是臭毛病,wordpress.emlog等博客系 ...
- 使用 Gatsby.js 搭建静态博客 EX 使用语雀发布到博客
原文链接:https://ssshooter.com/2019-01... 偶然看到通过语雀 webhook 发布文章到 Hexo 静态博客,很方便,实现过程也很有意思.同样的原理可以运用到 Gats ...
- 在 Coding 上搭建 Hexo 个人博客!
前言 最近闲来没事干,想搭建一个自己的博客来玩玩,但是又不想出钱买域名和租服务器.正好最近很流行搭建一个静态博客(本人用的是 hexo),而且部署上 github.coding.GitGafe上面也很 ...
最新文章
- Access violation at address 0x77f96c94
- 效率系列(四) VS常用快捷键
- byte数组和hexstring互相转换
- 协鑫集成进军乌克兰光伏市场 切尔诺贝利望获重生
- lvm 逻辑卷的快照及备份 还原
- UILabel设定行间距方法
- 某角数卡发卡网程序V1.7.1版本开源源码
- 华为海思Hi1620芯片发布在即 7nm制程ARM架构最高可达3.0GHz
- 为什么薄膜干涉的厚度要很小_薄膜干涉的膜为什么不能太厚?
- 微信小程序-测试游戏生成六边多边形
- 智能优化算法:未来搜索算法-附代码
- kubernetes 删除容器 docker rmi Error response from daemon: conflict: container is using its referenced
- 【Python】高级函数
- Makefile教程
- xpath 解析离线网页解析本地网页解析本体html文件
- 可执行bin文件的制作
- Spring之声明式事务控制(九)
- RPL(5):RFC6550翻译(5)---ICMPv6 RPL控制报文
- png图片格式转换器_如何将图像转换为PNG格式
- 2021年最新最全Flink系列教程_Flink快速入门(概述,安装部署)(一)(JianYi收藏)
热门文章
- 更改DOS背景颜色和字体大小
- android手机底噪,[RK3399][Android7.1] 调试笔记 --- Codec播放音乐会有底噪
- vowifi android开关,如何配置VoLTE, ViLTE and VoWifi(IMS config for VoLTE, ViLTE and VoWifi)
- 所有白手起家的百万富翁都有他们能成功的原因
- 狄拉克δ函数,冲激响应
- 益生菌/合生制剂调理下,肠道菌群和免疫如何影响后代?
- Yelp Dataset
- Spark 3.2.0 版本新特性 push-based shuffle 论文详解(二)背景和动机
- GPS定位:坐标系转换导致定位不准确的问题处理
- 华为汽车再创奇迹,月订单可望破3万,将成特斯拉有力挑战者