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

出自六年制學程
跳轉到: 導覽搜尋
video
video
第 1 行: 第 1 行:
 
[[分類:HTML]]
 
[[分類:HTML]]
 
==video==
 
==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)
 +
  
 
[https://www.omdte.com/三套可以編輯-srt的軟體,製作影片字幕時使用/ 三套可以編輯-srt的軟體,製作影片字幕時使用/],其中的 SubtitleEdit 可以轉 vvt 。
 
[https://www.omdte.com/三套可以編輯-srt的軟體,製作影片字幕時使用/ 三套可以編輯-srt的軟體,製作影片字幕時使用/],其中的 SubtitleEdit 可以轉 vvt 。

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

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)


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

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