檢視 HTML5新功能的原始碼

[[分類: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)


[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==
收納
===一、基本用法===
<pre>&lt;details&gt;
    &lt;summary&gt;標題&lt;/summary&gt;
    &lt;p&gt;內容，可以使用標籤(&lt;…&gt;)。&lt;/p&gt;
&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 實現各種交互效果]