视频文件添加字幕

起因:最近看了下mdn的video文章,看到一个有趣的知识点,居然可以自己手动给视频添加字幕

视频文件添加字幕_第1张图片

先上代码:


    

主要依据的是video属性来的。

.vtt文件,可以有专门的网站转换字幕,这里我直接拿的官网文件

视频文件添加字幕_第2张图片

最重要的一问题,html直接在浏览器运行的时候,字幕是不展示的,百度了一下找到了解决问题:

vscode安装Live serve插件,然后右键选择open with LIve  serve 即可

视频文件添加字幕_第3张图片

 

你可能感兴趣的:(前端,javascript,开发语言)