按自己的節奏看影片，看清圖片細節
作者：toewpq約 1 分鐘閱讀更新於 最近一次變動
修改前
按自己的節奏看影片，看清圖片細節<img src="/edgepress/revisions/image.51e291e65dc6b9c5.gif" alt="按自己的節奏看影片，看清圖片細節" loading="lazy" width="640" height="400" />
修改後
按自己的節奏看影片，看清圖片細節<img src="/edgepress/revisions/image.da5382978c5b7462.gif" alt="按自己的節奏看影片，看清圖片細節" loading="lazy" width="640" height="400" />
修改前
Plyr 與 hls.js 本機打包，畫廊只掛載選中的附件，切換時釋放之前的播放。接入網站提供資源網址、同意設定與主題配色，元件本身不負責發表或儲存。
修改後
Video.js 10 HTML 元件與 hls.js 本機打包，畫廊只掛載選中的附件，切換時釋放之前的播放。接入網站提供資源網址、同意設定與主題配色，元件本身不負責發表或儲存。
進度條獨立一行，目前時間與總時長放在一起。拖曳跳到實際播放位置。示範會停留顯示跳轉後的時間，以及已選中的 2 倍速，讓播放變化看得清楚。
按自己的節奏看影片，看清圖片細節<img src="/images/previews/media-videojs10.da5382978c5b7462.gif" alt="按自己的節奏看影片，看清圖片細節" width="640" height="400" />
需要細節時，再開啟原圖
卡片和貼文先請求最佳化預覽，點擊詳情圖後才開啟完整原圖。可以放大、拖曳查看，關閉叉號位於圖片之外，返回後焦點回到原來的圖片。
元件負責互動，網站負責內容
Video.js 10 HTML 元件與 hls.js 本機打包，畫廊只掛載選中的附件，切換時釋放之前的播放。接入網站提供資源網址、同意設定與主題配色，元件本身不負責發表或儲存。