Html5-Video标签以及字幕subtitles和captions的区别
2016-03-08 19:52
716 查看
<video id="mainvideo" src="video.mp4" type="video/mp4"controls autoplay loop> <track src="en_track.vtt" srclang="en" label="English" kind="caption" default> <track src="cn_track.vtt" srclang="zh-cn" label="简体中文" kind="caption"> </video>
or
<video width="640" height="480" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" /> </video>
track标签的属性主要有4个,如下表:
属性 | 描述 |
---|---|
kind | 定义字幕内容类型,只能是这五种之一: subtitles, captions, descriptions, chapters, metadata. |
src | 字幕文件的URL地址 |
srclang | 字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。 |
label | 字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。 |
default | 指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕.(chrome浏览器不支持) |
• 如果没有指定类型,默认为字幕(subtitles)。
• 如果类型是字幕(subtitles),需要指定srclang。
• 不能有两个相同类型(king)的轨道有同一个标签(label)
WebVTT字幕文件的MIME类型约定是"text/vtt",需要在IIS或者Apache等Web服务器中配置
TTML字幕文件的MIME类型约定为application/ttml+xml
SRT字幕文件,application/x-subrip或者text/plain (注意chrome浏览器不支持srt文件)
subtitles和captions的区别
Captions are intended for deaf and hard-of-hearing audiences. The assumed audience for subtitling is hearing people who do not understand the language of dialogue.(Captions 目的在于听力障碍的观众,subtitles目的是帮助正常观众理解对话的语言)
Captions are usually in the same language as the audio. Subtitles are usually a translation.(Captions 语言和对话通常是同一种,Subtitles通常是对话语言翻译)
插件mediaelementJS: https://github.com/johndyer/mediaelement (支持srt和vtt格式字幕,且kind=subtitles,不支持captions)
参考
http://joeclark.org/access/resources/understanding.html
https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
相关文章推荐
- HTML5 API --- 页面可见性改变(visibilitychange)事件
- html5新增的标签
- HTML5-企业宣传6款免费源码尽在h5edu.cn
- html5+css3进度条倒计时动画特效代码【推荐】
- HTML5 New Feature Series: Web Workers
- HTML5新特性之Web Workers
- html5篇——新增表单元素和表单属性
- HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)
- HTML5外包
- 2015 年最棒的 5 个 HTML5 框架
- 2015 年最棒的 5 个 HTML5 框架
- html5的新增的标签和废除的标签
- 【HTML5初涉】新增主体结构元素和非主体结构元素
- 【HTML5初涉】H5与H4的区别
- 多文件上传插件Stream,解决不同浏览器上传文件的插件,是Uploadify的Flash版和Html5版的结合,带进度条,并支持html5断点续传,拖拽等功能
- HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)
- 移动前端头部标签(HTML5 head meta)
- HTML5的video标签,视频在网页播放没有画面只有声音,支持的格式,MP4,
- 2015 年最棒的 5 个 HTML5 框架
- HTML5 canvas绘制雪花飘落动画(需求分析、知识点、程序编写分布详解)