[个人配置] 博客园文章实现插入 HTML5 视频播放、同步字幕(跨域问题未解决)
具体代码
<video id="video" width="100%" controls preload="metadata">
<source src="https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/03/20220327041305_1 numpy - pandas 有什么用 -教学教程-.mp4" type="video/mp4">
<track label="Chinese" kind="subtitles" srclang="cn" src="https://xiaonenglife.oss-cn-hangzhou.aliyuncs.com/static/pic/2022/03/20220327040347_test.vtt" default>
您的浏览器不支持 HTML5 video 标签。
</video>
需要最新浏览器支持,字幕可以增加多个,复制 track
标签即可,需要修改 label
、srclang
、去掉 default
。
博客园因为跨域问题,导致无法显示字幕。
PS: 博客园在这方面比CSDN方便很多,CSDN要求审核和原创性
效果展示
文件存储
阿里云镜像OSS,可以使用图床Picgo,存储视频和字幕