February 3, 2022

添加本地视频到hugo博客

html5-mobile-app-native-hybrid-pros-cons

以前我在博文《hugo添加短代码》这篇博文说过,可以通过相应文件的视频网站短代码模板引入,再从相应的视频网站url的id短代码来套取放到博客上,从而实现第三方网站视频在文章中出现。这也算是hugo博客的一大特色。但是有些时候,第三方网站审核视频,比如B站,如果你投稿的视频不是符合B站“正能量”主题,很大可能会上传因为版权问题,含露骨视频等其它原因而遭到删除,严重的可能连上传都看不到。当然。你也可以套国外视频网站短代码引入,比如油管,vimeo等,但是问题是这必须得借助魔法功能才能实现,博主当然更愿意本地视频套在博客上,无需借助其它第三方的视频网站就能在博客上在线播放了。

有没有办法解决呢?办法当然是有的。你可以用diygod开发的Dplayer播放器套件来实现。当然,也可以通过搭建视频床(其实就是原来的图床来实现)。因为Dplayer的视频本地播放导入对于新手有些难以理解,所以可以简单粗暴的通过上传到视频床来实现本地视频在博客上在线播放了,这里我用到的还是腾讯云COS。

1.cos的具体设置

依次打开对象存储》存储桶列表创建》创建存储桶:

image-20220203142853215

创建存储桶1.基本信息地域选择(当然是物理位置最近的),名称随你填,访问权限公读私写(注意防盗链,后面会用到的)。

image-20220203151634370

1.1.高级可配选项配置只要服务端为SSE-COS就行了。

image-20220203153351853

1.2.最后配置完成,创建。

cos

创建完成,会出现刚刚搞好的存储桶,点击进入,设置权限防盗链:打开防盗链状态,类型是“白名单”,空referer选择“拒绝”,referer填你网站的域名和对应IP:

image-20220203154312947

2.上传视频文件到COS存储桶

可以看到有一个“上传文件”选项,上传一个视频文件试试。

image-20220203155427167
上传,可能要等一会儿
image-20220203155645453

上传好后,点击“详情”,可以看到一个视频对象地址url,这个就是要配置的了:

image-20220203160338208

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

横滨

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

©阿波尔的博客2019-2024