HTML5新功能:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
一、基本
(二)取得 vvt 字幕檔
 
(未顯示同用戶所作出之21次版本)
第 1 行: 第 1 行:
 
[[分類:HTML]]
 
[[分類:HTML]]
 +
==video==
 +
video 標籤 (tag) 是用來播放影片或影音串流。
 +
===一、相關的標籤與屬性===
 +
video 標籤的屬性 (attributes):
 +
#src: 影片的位址 (URL)
 +
#poster: 指定一個圖片位址,做為影片未開始播放之前的預覽圖
 +
#preload: 給瀏覽器是否該預載影片的提示。有這些值可以使用:
 +
#*none: 不要預載,因為使用者很可能不會播放該音訊,或你想多節省 server 頻寬
 +
#*metadata: 先下載影片的元數據資料 (像是片長)
 +
#*auto: 使用者很可能會播放該影片,可以先進行下載
 +
#autoplay: 布林 (boolean) 屬性,控制是否自動播放影片,預設是 false
 +
#loop: 布林 (boolean) 屬性,控制是否重複播放影片,預設是 false
 +
#muted: 布林 (boolean) 屬性,控制是否靜音,預設是 false
 +
#controls: 布林 (boolean) 屬性,指定是否顯示影音控制面板,由瀏覽器提供上面會有播放進度、暫停鈕、播放鈕、靜音鈕等,預設是 false
 +
#width: 一個數字,設定影片顯示區域的寬度,單位是像素 (pixel)
 +
#height: 一個數字,設定影片顯示區域的高度,單位是像素 (pixel)
 +
 +
video 的來源位址除了用 src 屬性指定,也可以在 <video> 標籤裡面用 <source> 標籤來設定,可以用多個 <source> 指定不同格式類型的影片來源,而瀏覽器自己會挑第一個有支援的格式來載入。
 +
 +
<source> 標籤的屬性:
 +
#src: 音訊位址 (URL)
 +
#type: 音訊的 MIME type,可能還會搭配有 codecs 指定編碼格式
 +
 +
使用範例:
 +
<pre><video controls>
 +
<source src='dogs.mp4' type="video/mp4; codecs='avc1, mp4a'"/>
 +
<source src='dogs.webm' type="video/webm; codecs='vp8.0, vorbis'"/>
 +
</video></pre>
 +
 +
video 裡面還可以用 &lt;track&gt; 標籤指定一個文字軌 - 基於時間的文字資訊檔 (timed text track),實際用途像是影片的字幕,可以有多個 &lt;track&gt; 指定不同的文字軌。
 +
 +
&lt;track&gt; 標籤的屬性:
 +
#src:文字軌的檔案位址,通常是一個 WebVTT 檔
 +
#srclang:該文字軌的語言,像是 en, fr 等
 +
#kind:定義該文字軌該如何被使用。可以有這些值:
 +
##subtitles:字幕檔,例如英文電影的中文字幕。預設值
 +
##captions:對內容的標注,適用於靜音或雜音過多等的情況
 +
##descriptions:對影片的介紹,給 screen reader 用
 +
##chapters:章節標題,在內容切換時使用
 +
##metadata:使用者看不到,給 JavaScript 用的
 +
#label:當列出可以用的 track 時,給瀏覽器用的 track 標題
 +
#default:設定為預設的文字軌
 +
使用範例:
 +
<pre><video controls poster='/images/sample.gif'/>
 +
<source src='sample.mp4' type='video/mp4'/>
 +
<source src='sample.ogv' type='video/ogv'/>
 +
<track kind='captions' src='sampleCaptions.vtt' srclang='en'/>
 +
<track kind='descriptions' src='sampleDescriptions.vtt' srclang='en'/>
 +
<track kind='chapters' src='sampleChapters.vtt' srclang='en'/>
 +
<track kind='subtitles' src='sampleSubtitles_de.vtt' srclang='de'/>
 +
<track kind='subtitles' src='sampleSubtitles_en.vtt' srclang='en'/>
 +
<track kind='subtitles' src='sampleSubtitles_ja.vtt' srclang='ja'/>
 +
<track kind='subtitles' src='sampleSubtitles_oz.vtt' srclang='oz'/>
 +
<track kind='metadata' src='keyStage1.vtt' srclang='en' label='Key Stage 1'/>
 +
<track kind='metadata' src='keyStage2.vtt' srclang='en' label='Key Stage 2'/>
 +
<track kind='metadata' src='keyStage3.vtt' srclang='en' label='Key Stage 3'/>
 +
</video></pre>
 +
 +
如果要使用字幕,「kind='subtitles'」「src='……….vtt'」「default=true」,三個屬性一定要設, srclang 、 label 屬性非必要。而且字幕檔目前只支援 vvt 格式,尚未支援 srt 格式。
 +
 +
 +
在 &lt;video&gt; 裡面 &lt;source&gt; 和 &lt;track&gt; 以外的內容會被當做成是 fallback 內容,給瀏覽器在資源載入失敗或不支援 &lt;video&gt; 標籤時顯示。
 +
 +
<pre><video controls>
 +
<source src='dogs.mp4' type="video/mp4; codecs='avc1, mp4a'">
 +
<source src='dogs.webm' type="video/webm; codecs='vp8.0, vorbis'">
 +
<p>你的瀏覽器不支援 HTML 5 video</p>
 +
</video></pre>
 +
 +
===二、取得 vvt 字幕檔===
 +
*[https://www.omdte.com/三套可以編輯-srt的軟體,製作影片字幕時使用/ 三套可以編輯-srt的軟體,製作影片字幕時使用/],其中的 SubtitleEdit 可以轉 vvt 。
 +
*簡單的 srt 與 vtt 互轉
 +
**vtt 轉 srt
 +
**#手動轉檔
 +
**##文字檔中刪去開頭的 WEBVTT
 +
**##改副檔名為 srt
 +
**#線上轉檔
 +
**##[http://yes.nctu.edu.tw/Open/Text/vtt2srt.aspx http://yes.nctu.edu.tw/Open/Text/vtt2srt.aspx]
 +
**##[https://www.happyscribe.co/subtitle-tools/convert-vtt-to-srt https://www.happyscribe.co/subtitle-tools/convert-vtt-to-srt]
 +
**##[https://subtitletools.com/convert-to-srt-online https://subtitletools.com/convert-to-srt-online]
 +
**##[https://gotranscript.com/subtitle-converter https://gotranscript.com/subtitle-converter]
 +
**[https://atelier.u-sub.net/srt2vtt/ 簡單的 srt 轉 vtt 線上轉檔]
 +
 
==details,summary==
 
==details,summary==
 
收納
 
收納
===一、基本===
+
===一、基本用法===
 
<pre>&lt;details&gt;
 
<pre>&lt;details&gt;
 
     &lt;summary&gt;標題&lt;/summary&gt;
 
     &lt;summary&gt;標題&lt;/summary&gt;
     &lt;p&gt;內容,可以使用的&lt;p&gt;標籤。&lt;/p&gt;
+
     &lt;p&gt;內容,可以使用標籤(&lt;&gt;)。&lt;/p&gt;
 
&lt;/details&gt;</pre>
 
&lt;/details&gt;</pre>
 +
<ol>
 +
<li>只會顯示了 &lt;summary&gt; 標籤中的內容,其他都預設隱藏了;</li>
 +
<li>&lt;summary&gt; 標籤前面出現了一個小三角,尖端向右;</li>
 +
<li>點擊一下小三角,尖端變成向下,原本隱藏的內容顯示出來了;</li>
 +
<li>再一次點擊,內容又會隱藏收起,箭頭方向還原。
 +
</ol>
 +
 +
====(一)open====
 +
<pre>&lt;details open&gt;
 +
    &lt;summary&gt;這是摘要2&lt;/summary&gt;
 +
    這裡&lt;details&gt;標籤設置了HTML布爾屬性open,因此,預設是展開狀態。
 +
&lt;/details&gt;</pre>
 +
====(二)省略&lt;summary&gt;====
 +
如果省略&lt;summary&gt;標籤,則&lt;details&gt;元素會在內部自動創建一個&lt;summary&gt;內容,預設的文案是「詳細信息」。
 +
 +
===二、進階用法===
 +
#自定義 details 在瀏覽器內的 UI
 +
#處理 Chrome 瀏覽器下點擊時 outline 輪廓等體驗
 +
#details 元素行為的各種交互效果
 +
#*「更多」展開與收起效果
 +
#*點擊顯示懸浮菜單,自定義下拉框等效果
 +
#*多項折疊效果
 +
#*帶 slideUp / slideDown 效果的多項折疊菜單
 +
#*多級嵌套的樹形菜單
 +
 +
參考資料
 +
#[https://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/ 借助 HTML5 details,summary 實現各種交互效果]

2022年10月7日 (五) 10:17的最新修訂版本

video

video 標籤 (tag) 是用來播放影片或影音串流。

一、相關的標籤與屬性

video 標籤的屬性 (attributes):

  1. src: 影片的位址 (URL)
  2. poster: 指定一個圖片位址,做為影片未開始播放之前的預覽圖
  3. preload: 給瀏覽器是否該預載影片的提示。有這些值可以使用:
    • none: 不要預載,因為使用者很可能不會播放該音訊,或你想多節省 server 頻寬
    • metadata: 先下載影片的元數據資料 (像是片長)
    • auto: 使用者很可能會播放該影片,可以先進行下載
  4. autoplay: 布林 (boolean) 屬性,控制是否自動播放影片,預設是 false
  5. loop: 布林 (boolean) 屬性,控制是否重複播放影片,預設是 false
  6. muted: 布林 (boolean) 屬性,控制是否靜音,預設是 false
  7. controls: 布林 (boolean) 屬性,指定是否顯示影音控制面板,由瀏覽器提供上面會有播放進度、暫停鈕、播放鈕、靜音鈕等,預設是 false
  8. width: 一個數字,設定影片顯示區域的寬度,單位是像素 (pixel)
  9. height: 一個數字,設定影片顯示區域的高度,單位是像素 (pixel)

video 的來源位址除了用 src 屬性指定,也可以在 <video> 標籤裡面用 <source> 標籤來設定,可以用多個 <source> 指定不同格式類型的影片來源,而瀏覽器自己會挑第一個有支援的格式來載入。

<source> 標籤的屬性:

  1. src: 音訊位址 (URL)
  2. type: 音訊的 MIME type,可能還會搭配有 codecs 指定編碼格式

使用範例:

<video controls>
	<source src='dogs.mp4' type="video/mp4; codecs='avc1, mp4a'"/>
	<source src='dogs.webm' type="video/webm; codecs='vp8.0, vorbis'"/>
</video>

video 裡面還可以用 <track> 標籤指定一個文字軌 - 基於時間的文字資訊檔 (timed text track),實際用途像是影片的字幕,可以有多個 <track> 指定不同的文字軌。

<track> 標籤的屬性:

  1. src:文字軌的檔案位址,通常是一個 WebVTT 檔
  2. srclang:該文字軌的語言,像是 en, fr 等
  3. kind:定義該文字軌該如何被使用。可以有這些值:
    1. subtitles:字幕檔,例如英文電影的中文字幕。預設值
    2. captions:對內容的標注,適用於靜音或雜音過多等的情況
    3. descriptions:對影片的介紹,給 screen reader 用
    4. chapters:章節標題,在內容切換時使用
    5. metadata:使用者看不到,給 JavaScript 用的
  4. label:當列出可以用的 track 時,給瀏覽器用的 track 標題
  5. default:設定為預設的文字軌

使用範例:

<video controls poster='/images/sample.gif'/>
	<source src='sample.mp4' type='video/mp4'/>
	<source src='sample.ogv' type='video/ogv'/>
	<track kind='captions' src='sampleCaptions.vtt' srclang='en'/>
	<track kind='descriptions' src='sampleDescriptions.vtt' srclang='en'/>
	<track kind='chapters' src='sampleChapters.vtt' srclang='en'/>
	<track kind='subtitles' src='sampleSubtitles_de.vtt' srclang='de'/>
	<track kind='subtitles' src='sampleSubtitles_en.vtt' srclang='en'/>
	<track kind='subtitles' src='sampleSubtitles_ja.vtt' srclang='ja'/>
	<track kind='subtitles' src='sampleSubtitles_oz.vtt' srclang='oz'/>
	<track kind='metadata' src='keyStage1.vtt' srclang='en' label='Key Stage 1'/>
	<track kind='metadata' src='keyStage2.vtt' srclang='en' label='Key Stage 2'/>
	<track kind='metadata' src='keyStage3.vtt' srclang='en' label='Key Stage 3'/>
</video>

如果要使用字幕,「kind='subtitles'」「src='……….vtt'」「default=true」,三個屬性一定要設, srclang 、 label 屬性非必要。而且字幕檔目前只支援 vvt 格式,尚未支援 srt 格式。


在 <video> 裡面 <source> 和 <track> 以外的內容會被當做成是 fallback 內容,給瀏覽器在資源載入失敗或不支援 <video> 標籤時顯示。

<video controls>
	<source src='dogs.mp4' type="video/mp4; codecs='avc1, mp4a'">
	<source src='dogs.webm' type="video/webm; codecs='vp8.0, vorbis'">
	<p>你的瀏覽器不支援 HTML 5 video</p>
</video>

二、取得 vvt 字幕檔

details,summary

收納

一、基本用法

<details>
    <summary>標題</summary>
    <p>內容,可以使用標籤(<…>)。</p>
</details>
  1. 只會顯示了 <summary> 標籤中的內容,其他都預設隱藏了;
  2. <summary> 標籤前面出現了一個小三角,尖端向右;
  3. 點擊一下小三角,尖端變成向下,原本隱藏的內容顯示出來了;
  4. 再一次點擊,內容又會隱藏收起,箭頭方向還原。

(一)open

<details open>
    <summary>這是摘要2</summary>
    這裡<details>標籤設置了HTML布爾屬性open,因此,預設是展開狀態。
</details>

(二)省略<summary>

如果省略<summary>標籤,則<details>元素會在內部自動創建一個<summary>內容,預設的文案是「詳細信息」。

二、進階用法

  1. 自定義 details 在瀏覽器內的 UI
  2. 處理 Chrome 瀏覽器下點擊時 outline 輪廓等體驗
  3. details 元素行為的各種交互效果
    • 「更多」展開與收起效果
    • 點擊顯示懸浮菜單,自定義下拉框等效果
    • 多項折疊效果
    • 帶 slideUp / slideDown 效果的多項折疊菜單
    • 多級嵌套的樹形菜單

參考資料

  1. 借助 HTML5 details,summary 實現各種交互效果