具体代码

<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。
博客园因为跨域问题，导致无法显示字幕。

image-20220327052420897

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

效果展示

文件存储

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

image-20220327043001611

image-20220327043115355

版权声明：本文为小能的博客 CanAngle's Blog原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/linxiaoxu/p/16061808.html