以前我在博文《hugo添加短代码》这篇博文说过,可以通过相应文件的视频网站短代码模板引入,再从相应的视频网站url的id短代码来套取放到博客上,从而实现第三方网站视频在文章中出现。这也算是hugo博客的一大特色。但是有些时候,第三方网站审核视频,比如B站,如果你投稿的视频不是符合B站“正能量”主题,很大可能会上传因为版权问题,含露骨视频等其它原因而遭到删除,严重的可能连上传都看不到。当然。你也可以套国外视频网站短代码引入,比如油管,vimeo等,但是问题是这必须得借助魔法功能才能实现,博主当然更愿意本地视频套在博客上,无需借助其它第三方的视频网站就能在博客上在线播放了。
有没有办法解决呢?办法当然是有的。你可以用diygod开发的Dplayer播放器套件来实现。当然,也可以通过搭建视频床(其实就是原来的图床来实现)。因为Dplayer的视频本地播放导入对于新手有些难以理解,所以可以简单粗暴的通过上传到视频床来实现本地视频在博客上在线播放了,这里我用到的还是腾讯云COS。
1.cos的具体设置
依次打开对象存储》存储桶列表创建》创建存储桶:
创建存储桶1.基本信息地域选择(当然是物理位置最近的),名称随你填,访问权限公读私写(注意防盗链,后面会用到的)。
1.1.高级可配选项配置只要服务端为SSE-COS就行了。
1.2.最后配置完成,创建。
创建完成,会出现刚刚搞好的存储桶,点击进入,设置权限防盗链:打开防盗链状态,类型是“白名单”,空referer选择“拒绝”,referer填你网站的域名和对应IP:
2.上传视频文件到COS存储桶
可以看到有一个“上传文件”选项,上传一个视频文件试试。
上传,可能要等一会儿
上传好后,点击“详情”,可以看到一个视频对象地址url,这个就是要配置的了:
3.获取HTML5文件url并添加视频
表格
参数名 | 默认值 | 描述 |
---|---|---|
id | 必填 | 唯一id |
scr | 必填 | 视频url |
controls | 必填 | 允许用户控制视频播放 |
controlslist | 选填,nodwonload | 显示控件 |
preload | 选填,autoplay | 最佳体验方式 |
allowfullscreen | 选填 | 显示能否全屏 |
position | 选填 | 文档流 |
width | 选填 | 视频显示区域宽度 |
poster | 选填 | 视频海报封面 |
参数名 | 默认值 | 描述 |
---|---|---|
type | 必填 | 视频属性(video/MP4.video/avi.video/mov等) |
muted | 选填 | 音频设置 |
loop | 选填 | 返回开始播放 |
autoplay | 选填 | 自动播放 |
以上面的视频为例:
<video id="video" controls="" controlslist="nodownload" preload="none" allowfullscreen="true" position= "absolute" width="100%" poster="封面URL">
<source id="mp4" src="对象地址URL" type="video/mp4" >
</video>
本实例视频是日本tbs纪录片 《三岛由纪夫VS东大全共闘》 第二段,也是我认为三岛由纪夫和东大全共斗左翼学生辩论最精彩的一段。
参考:1.Dplayer2.MDN Web Docs