[个人配置] 博客园文章实现插入 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 标签即可,需要修改 labelsrclang、去掉 default
博客园因为跨域问题,导致无法显示字幕。

image-20220327052420897

PS: 博客园在这方面比CSDN方便很多,CSDN要求审核和原创性


效果展示


文件存储

阿里云镜像OSS,可以使用图床Picgo,存储视频和字幕

image-20220327043001611

image-20220327043115355

posted @ 2022-03-27 14:49  小能日记  阅读(47)  评论(0编辑  收藏  举报