Html5-Video标签以及字幕subtitles和captions的区别
<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文件)
asp.net web.config设置
<system.webServer>
<staticContent>
<remove fileExtension=".vtt" />
<mimeMap fileExtension=".vtt" mimeType="text/vtt" />
</staticContent>
</system.webServer>
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
Html5-Video标签以及字幕subtitles和captions的区别的更多相关文章
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- Web视频播放 之 【HTML5 Video标签】
一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- ie8及ie8以下支持html5 video标签
html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...
- 巧用transform实现HTML5 video标签视频比例拉伸
前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- [JavaScript] html5 video标签注意事项
Chrome 66 禁止声音自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例,桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在2018年 ...
- html5 video标签兼容性与自定义控件
Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...
随机推荐
- php无wsdl webservice服务用法
服务端: <?php class test { function add($a,$b) { return $a+$b; } } function getUserInfo($name) { ret ...
- 洛谷3778 [APIO2017]商旅
题目:https://www.luogu.org/problemnew/show/P3778 一看就是0/1分数规划.但不能直接套模板,因为有个商品种类的限制. 考虑从a买在b卖,商品种类根本没用,关 ...
- laravel 网站速率优化
https://segmentfault.com/a/1190000009954966
- mybatis+druid+springboot 注解方式配置多个数据源
1\数据库配置 #test数据源 spring.datasource.test.url=jdbc:mysql:///db?useUnicode= spring.datasource.test.user ...
- 如何查看自己的laravel版本
方法1: 使用php artisan --version ,只要能看懂这个命令的人一定已经具有初步的Laravel知识.再介绍一种不需要命令,直接去文件中去查看的方法. 方法2: 在项目文件中找ven ...
- RAC 11gR2模拟OCR和Votedisk损坏恢复过程
1)破坏前的ocr和votedisk信息检查 检查ocr自动备份 [root@rac1 ~]# ocrconfig -showbackup rac2 2013/10/13 09:45:30 /u01/ ...
- java里监听相关ActionListene的理解。========此代码是错误的,
package com.aa; import java.awt.Component; import java.awt.event.ActionEvent; import java.awt.event. ...
- 【原创】 HBase 配置指南
HBase 默认配置 Centos6.5下Hbase配置 官网配置文档:http://hbase.apache.org/book.html#_configuration_files 中文翻译转自: ...
- 关于 Mybatis的原生连接池 和 DBCP 连接池
一 遇到的问题: 项目用的play框架,数据库DB2, 持久化框架是Mybatis, 连接池用的是Mybatis原生的,遇到的问题是:有时候抛出如下异常: play.api.UnexpectedEx ...
- [置顶]
sscanf() - 从一个字符串中读进与指定格式相符的数据
在做一道九度上机题时,突然发现sscanf()函数非常有用,就顺便从网上搜集资料整理一下. sscanf() 的作用:从一个字符串中读进与指定格式相符的数据. 原型: int sscanf (cons ...