给视频加字幕HTML代码,给Html5视频播放器添加字幕
现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕。
往往我们还不得不通过js来做,着实是一件痛苦的事情。
现在IE10率先对HTML5 Video 字幕给与内置的支持,而且还支持多语言,可任意切换,真是太给力了。
示例代码如下:
通过两个标签分别指定了一个英文字幕文件、一个中文字幕文件,默认为中文字幕,用户可以切换,也可以由程序脚本切换。
IE10支持2种字幕文件格式:
WebVTT : Web Video Text Track (Web视频文本轨道)
TTML : Timed Text Markup Language (时序文本标记语言)
WebVTT
WebVTT是UTF-8编码格式的文本文件,内容示例如下:
WEBVTT
00:00:01.878 --> 00:00:05.334
曾经有一份真诚的爱情放在我面前,
00:00:08.608 --> 00:00:15.296
我没有珍惜,等我失去的时候我才后悔莫及,
人世间最痛苦的事莫过于此。 第一行必需是WEBVTT,接着空行,接下来是一行时间范围+一行或多行字幕内容+空行,一行时间范围+一行或多行字幕内容+空行,……
时间格式是HH:MM:SS.sss,时:分:秒.毫秒, 开始时间 --> 结束时间,-->的两边各有一个空格,这两个时间必需写在同一行。
时间都是相对于视频开始的时间间隔。
时间之后是字幕文本,时间和字幕文本之间不能有空行,字幕文本可以是一行或多行,字幕文本中不能有空行。WebVTT字幕文件的MIME类型约定是"text/vtt",需要在IIS或者Apache等Web服务器中配置.
TTML
TTML是xml格式的文件,内容示例如下:
曾经有一份真诚的爱情放在我面前,
我没有珍惜,等我失去的时候我才后悔莫及,
人世间最痛苦的事莫过于此。
结构很明确了,分别是tt标签,body标签,div标签,p标签,br标签,和HTML很像啊!p元素的begin/end属性指定了字幕的起止时间。
TTML文件的MIME类型约定为application/ttml+xml
通过在video标签内使用1个或多个track标签来指定1个或多个语言的字幕文件,每个track元素对应一个字幕文件。
track标签的属性主要有4个,如下表:
属性
描述
kind
定义字幕内容类型,只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
src
字幕文件的URL地址
srclang
字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。
label
字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。
default
指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕.
可以通过javascript方式访问每一个字幕元素,甚至其中的每一句台词。这一部分代码比较多,我就不展开了,有兴趣的可以自己看原文。
http://blog.csdn.net/cuixiping/article/details/7760845
给视频加字幕HTML代码,给Html5视频播放器添加字幕相关推荐
- html5视频播放器带ID跑马灯效果(视频防录屏)
通过接口配置获取观看者信息,将观看者信息随机显示于视频播放界面(可自定义位置.时间.时长.及颜色等),在不影响观看体验的同时,让视频具备指纹信息. ID跑马灯可快速追踪被盗视频出处,方便第一时间对录屏 ...
- html5视频播放器字幕,可访问的HTML5 Video视频播放器
by PayPal Accessibility 团队 它是什么? 一个轻量级的HTML5视频播放器,支持字幕和详细说明.有关详细信息,请阅读这篇博客. 注* Video元素的浏览器支持情况 产品特点 ...
- html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
- html5视频播放器代码实例(含倍速、清晰度切换、续播)
本文将对视频播放相关的功能进行说明(基于云平台),包括初始化播放器.播放器尺寸设置.视频切换.倍速切换.视频预览.自定义视频播放的开始/结束时间.禁止拖拽进度.播放器皮肤.控件按钮以及播放控制等. ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如 ...
- 15个最佳HTML5视频播放器
随着YouTube最近的一项政策变化,即要求创作者在获得广告收入之前必须达到10,000次观看,因此我们看到了YouTube黄金时代的落日. 现在,比以往任何时候都更需要推动创意者开发自己的视频平台并 ...
- HTML5视频播放器jQuery插件
HTML5 Video player jQuery plugin As you know – HTML5 <video> element is already supported by m ...
- 20200228视频播放器的字幕支持
20200228视频播放器的字幕支持 2020/2/28 28 10:35 以这个视频为例子: 赌城大亨II之至尊无敌 賭城大亨II之至尊無敵 (1992) magnet:?xt=urn:btih:e ...
- html5视频播放器 一 (改写默认样式)
一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...
最新文章
- 【经验】网络加速:pip
- 【FJOI2015】最小覆盖双圆问题
- Codeforces 947E/923E Perpetual Subtraction (线性代数、矩阵对角化、DP)
- 文件上传错误:Error setting expression 'uploadImage' with value '[Ljava.lang.String;@5ff8a691'...
- 传统企业如何在数字化时代实现进化?
- 静态代码块无法对静态变量赋值的原因
- linux发行版_2020年最漂亮的7个Linux发行版
- Android 自定义组合控件小结
- Codeforces Round #248 (Div. 2) B. Kuriyama Mirai's Stones
- 词法分析与语法分析简介
- 数据通信与计算机网络
- 光栅透过率计算 (Matlab)
- PWM波的原理和应用
- CollectionView的HeaderView头视图悬停
- 国际学校入学考试MAP语法测试题真题讲解
- NodeJS Addon开发
- CCF系列题解--2015年12月第三题 ASCII字符画
- 国外Windows主机的特点
- Settings provider system和global表格数据访问
- 智能服务机器人产品及解决方案