<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

定义字幕内容类型,只能是这五种之一: subtitlescaptionsdescriptionschaptersmetadata.

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文件)

asp.net web.config设置

<system.webServer>
<staticContent>
<remove fileExtension=".vtt" />
<mimeMap fileExtension=".vtt" mimeType="text/vtt" />
</staticContent>
</system.webServer>

subtitles和captions的区别

  1. 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目的是帮助正常观众理解对话的语言)
  2. 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-Video标签以及字幕subtitles和captions的区别的更多相关文章

  1. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  2. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  3. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  4. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  5. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  6. 巧用transform实现HTML5 video标签视频比例拉伸

    前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...

  7. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. [JavaScript] html5 video标签注意事项

    Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...

  9. html5 video标签兼容性与自定义控件

    Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...

随机推荐

  1. php无wsdl webservice服务用法

    服务端: <?php class test { function add($a,$b) { return $a+$b; } } function getUserInfo($name) { ret ...

  2. 洛谷3778 [APIO2017]商旅

    题目:https://www.luogu.org/problemnew/show/P3778 一看就是0/1分数规划.但不能直接套模板,因为有个商品种类的限制. 考虑从a买在b卖,商品种类根本没用,关 ...

  3. laravel 网站速率优化

    https://segmentfault.com/a/1190000009954966

  4. mybatis+druid+springboot 注解方式配置多个数据源

    1\数据库配置 #test数据源 spring.datasource.test.url=jdbc:mysql:///db?useUnicode= spring.datasource.test.user ...

  5. 如何查看自己的laravel版本

    方法1: 使用php artisan --version ,只要能看懂这个命令的人一定已经具有初步的Laravel知识.再介绍一种不需要命令,直接去文件中去查看的方法. 方法2: 在项目文件中找ven ...

  6. RAC 11gR2模拟OCR和Votedisk损坏恢复过程

    1)破坏前的ocr和votedisk信息检查 检查ocr自动备份 [root@rac1 ~]# ocrconfig -showbackup rac2 2013/10/13 09:45:30 /u01/ ...

  7. java里监听相关ActionListene的理解。========此代码是错误的,

    package com.aa; import java.awt.Component; import java.awt.event.ActionEvent; import java.awt.event. ...

  8. 【原创】 HBase 配置指南

    HBase 默认配置   Centos6.5下Hbase配置 官网配置文档:http://hbase.apache.org/book.html#_configuration_files 中文翻译转自: ...

  9. 关于 Mybatis的原生连接池 和 DBCP 连接池

    一 遇到的问题:  项目用的play框架,数据库DB2, 持久化框架是Mybatis, 连接池用的是Mybatis原生的,遇到的问题是:有时候抛出如下异常: play.api.UnexpectedEx ...

  10. [置顶] sscanf() - 从一个字符串中读进与指定格式相符的数据

    在做一道九度上机题时,突然发现sscanf()函数非常有用,就顺便从网上搜集资料整理一下. sscanf() 的作用:从一个字符串中读进与指定格式相符的数据. 原型: int sscanf (cons ...