国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

HTML5 video視頻字幕的使用和制作方法

2024-08-26 00:20:40
字體:
來源:轉載
供稿:網友

HTML5允許我們使用 元素為視頻指定字幕。這個元素的各種屬性允許我們指定這樣的東西,比如我們添加的內容的類型,它所在的語言,當然還有對包含實際字幕信息的文本文件的引用。

<video id="video"  controls>    <source src="./step.mp4" type="video/mp4">    <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default>    <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt">    <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt"> </video>

track的屬性介紹:

  • kind被賦予一個值subtitles,表示文件包含的內容的類型
  • label被賦予一個值,指示該字幕集所用的語言 - 例如English或Deutsch- 這些標簽將出現在用戶界面中,以允許用戶容易地選擇他們想要看到的字幕語言。
  • src 在每種情況下都會分配一個指向相關WebVTT字幕文件的有效URL。
  • srclang 指示每個字幕文件的內容所在的語言。
  • 該default屬性在英語 元素上設置,向瀏覽器表明這是默認的字幕文件定義,當字幕打開并且用戶沒有做出特定選擇時使用。

WebVTT 字幕文件

包含實際字幕數據的文件是遵循指定格式的簡單文本文件,在這種情況下是Web視頻文本軌道(WebVTT)格式。該==WebVTT插入規范仍在開發中==,但它的==主要部分是穩定的==,所以我們今天可以使用它。

視頻提供商(如Blender Foundation)以其視頻的文本格式提供字幕和副標題,但通常采用SubRip Text(SRT)格式。可以使用在線轉換器(如srt2vtt)將這些轉換為WebVTT。

文件格式規范:

文件的后綴名為 ==.vtt==

==.vtt==文件的MIME type是text/vtt

在Chrome和Firefox瀏覽器下,.vtt字幕是可以無障礙加載顯示的,但是對于IE10+瀏覽器,雖然也支持.vtt字幕,但是卻需要定義MIME type,否則會無視WebVTT格式。比較簡單方式就是在字幕所在文件夾下面添加個.htaccess文件,里面寫上AddType text/vtt .vtt。

//文件開頭下必須先聲明 ==WEBVTT==
WEBVTT
// 起始時間  -->  結束時間,單位為毫秒
00:00:00.001 --> 00:00:03.000
// 對應上面的時間顯示字幕,可以單獨設置樣式,aa類似class類名
<v aa>九幽陰靈1111</v>
00:00:03.001 --> 00:00:06.000
<v bb>諸天神魔2222</v>
00:00:06.001 --> 00:00:09.000
以我血軀3333
00:00:09.001 --> 00:00:12.000
奉為犧牲4444
00:00:12.001 --> 00:00:15.000
三生七世5555

字幕css樣式設置

::cue偽元件的關鍵是靶向個別文本軌道線索用于定型的,因為它的任何限定球桿匹配。只有少數CSS屬性可以應用于文本提示:

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background 速記性能
  • outline 速記性能
  • font 速記屬性
  • line-height
  • white-space

==注意::: cue的線索樣式目前適用于Chrome,Opera和Safari,但尚未在Firefox上使用。==

WebVTT還支持一些HTML標簽進行樣式控制,常見的有聲音 ==v== 標簽,顏色 ==c== 標簽,加粗==b==標簽,傾斜==i==標簽,下劃線==u==標簽,還有==ruby==和==lang==標簽等。

//設置字幕的樣式video::cue{    background-color:transparent;    color:white;    font-size:20px;    line-height: 100px;}// 設置單行字幕的樣式 video::cue(v[voice=aa]){    color:green;}video::cue(v[voice=bb]){    color:rgb(0, 26, 128);}

瀏覽器兼容

IE

默認情況下,Internet Explorer 10+字幕是啟用的,并且默認控件包含一個按鈕和一個菜單,該菜單提供與我們剛剛構建的菜單相同的功能。該default屬性也受支持。

==注意:除非您定義MIME類型,否則IE將完全忽略WebVTT文件。這可以通過將.htaccess文件添加到包含的相應目錄輕松完成AddType text/vtt .vtt==

蘋果瀏覽器

Safari 6.1+對Internet Explorer 10+具有類似支持,顯示帶有不同可用選項的菜單,并增加了一個“自動”選項,允許瀏覽器進行選擇。

Chrome和Opera

這些瀏覽器也有類似的實現:默認情況下,字幕是啟用的,默認控制集包含一個'cc'按鈕,可以打開和關閉字幕。Chrome和Opera忽略元素default上的屬性, 而是嘗試將瀏覽器的語言與字幕的語言相匹配

總結

以上所述是小編給大家介紹的HTML5 video視頻字幕的使用和制作方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持!


注:相關教程知識閱讀請移步到HTML教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 公安县| 涿鹿县| 黄浦区| 瑞丽市| 陵水| 潮安县| 班玛县| 合川市| 敦煌市| 万盛区| 宜丰县| 邵东县| 海口市| 浪卡子县| 泊头市| 嵩明县| 荥阳市| 通榆县| 仲巴县| 广昌县| 湖北省| 潜山县| 曲麻莱县| 厦门市| 安宁市| 巴中市| 德阳市| 五台县| 永嘉县| 南昌市| 且末县| 元朗区| 鄂温| 河池市| 桐柏县| 含山县| 沐川县| 遂溪县| 阳高县| 和林格尔县| 固始县|