HTML5 video視頻字幕的運用和製造

2019年8月24日 95次阅读 来源: Z不懂

起首先看一下原生HTML5 video對字幕的支撐顯現狀況:

《HTML5 video視頻字幕的運用和製造》

<track>元素

HTML5許可我們運用<track>元素為視頻指定字幕。這個元素的種種屬性許可我們指定如許的東西，比方我們增加的內容的範例，它地點的言語，固然另有對包括現實字幕信息的文本文件的援用。

<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屬性在英語<track>元素上設置，向瀏覽器表明這是默許的字幕文件定義，當字幕翻開而且用戶沒有做出特定挑選時運用。

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

這個文件範例很簡樸，能夠本身手寫，也能夠運用張鑫旭先生開闢的webvtt.vtt文件天生器天生

字幕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上的屬性，<track>而是嘗試將瀏覽器的言語與字幕的言語相婚配

案例展現:demo

參考資料

假如以為還不錯，還請給我一個贊勉勵一下！

    原文作者：Z不懂
    原文地址: https://segmentfault.com/a/1190000014501596
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞