如何使用css,把div设置为一个椭圆容器,在做html页面开发时,我们一般都是使用div来做容器的,如果你需要一个椭圆形的容器,我们可以使用div来实现的,下面来看一下。......
html5实现带字幕的视频
今天讲讲怎么用HTML5来播放视频。并在视频播放的同时把字幕文件同时显示出来。注意这里的字幕与视频是不同的文件。还可以设置不同的字幕文件,如英文的,中文的等。
工具/原料
- video.js
方法/步骤
从结果来说明:
先来看关键性看代码:
首先导入videojs库相应的文件;
link rel='stylesheet' type='text/css' href='./video-js.min.css'>
link rel='stylesheet' type='text/css' href='./video.min.js'>
然后把要播放的视频文件用video标签包含进来。
video id="my_vidoe" class="video-js vjs-default-skin" controls preload="none" width="400" poster="./1.png" data-setup="{}"> source src="../video/1.mp4" type='video/mp4' /> track kind="subtitles" src="./1_chn.vtt" srclang="zh-CN" label="简体中文" />/video>
效果如下图。
videojs库下载:
videojs是一个兼容html5的视频播放工具。使用起来非常方便。大家可以通过百度搜索一下就可以下载,并看到它对应的API文档等信息。本文中只介绍了最基本的使用方法,来达到播放带字幕的视频。
使用前,先按照步骤1中的那样导入CSS与JS文件。如果有更高级的需求,可以查找它的相关文档。
代码功能说明:
video id="my_vidoe" class="video-js vjs-default-skin"controls preload="none" width="400"poster="./1.png"data-setup="{}">
source src="../video/1.mp4" type='video/mp4' />
track kind="subtitles" src="./1_chn.vtt" srclang="zh-CN" label="简体中文" />
/video>
video标签代码:
controls:表示显示视频播放控件;
preload:是否预加载,为了不造成流量的浪费,这里设置为none;
poster:视频未加载时显示的图片。如果不指定,则视频在开始时为一片黑,直到视频开始播放时才有图像显示。
source标签代码:
src:指明视频所在路径
type:指定视频的格式
track标签代码:
kind:subtitles 字幕
captions 标题,音效及其他音频信息。
descriptions 视频的文本描述。
chapters 章节导航
metadata 元数据
src:指定资源URL
srclang:资源的语言
label:元素的标签
.vtt文件格式说明:
vtt文件全称为WebVTT 文件,是一个以 UTF-8 为编码,以.vtt为文件扩展名的简单文本文件。
WebVTT的文件头如下示例(以WEBVTT开头):
WEBVTT
100:00:00.160 --> 00:00:18.930
嘿,这是创建一个业务
200:00:18.930 --> 00:00:20.490
和你爱的生活。
.vtt文件的生成与转换:
对于视频文件,可以自己做成。也可以在网络上去找到相关的资源。
如果实在找不到.vtt文件的资源,也可以下载srt等格式的字幕文件,然后通过在线工具进行转换即可。
作成HTML其它部分:
核心的代码有了后,再把HTML的头部与Body加入进来。就可以实现出步骤1中的字幕视频的效果了。如果你还下载了不同语言版本的字幕文件,你还可以做一个下拉框,通过JS来动态的实现多语言字幕的切换功能。
视频播放的注意事项:
由于视频有可能是容量较大的文件,所以在WEB加载时最好不要自动加载视频文件。因为有些用户可能是通过手机流量来浏览你的网站的。不要给你的用户造成不必要的麻烦。
注意事项
- 如果有用请投票加收藏哦。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!
标签: HTML
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具,MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具,MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗?MAKA(中文:码卡)作为中国最早推出移动端卡片式交互模式的创新者,随着HTML5技术的日渐成熟......
2023-03-16 435 HTML