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

2022年10月6日 (四) 17:14的修訂版本

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>

三套可以編輯-srt的軟體，製作影片字幕時使用/，其中的 SubtitleEdit 可以轉 vvt 。

簡單的 srt 與 vtt 互轉

• vtt 轉 srt
  1. 文字檔中刪去開頭的 WEBVTT
  2. 改副檔名為 srt
  3. http://yes.nctu.edu.tw/Open/Text/vtt2srt.aspx
  4. https://www.happyscribe.co/subtitle-tools/convert-vtt-to-srt
  5. https://subtitletools.com/convert-to-srt-online
  6. https://gotranscript.com/subtitle-converter
• 簡單的 srt 轉 vtt 線上轉檔

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 實現各種交互效果