Plyr 播放器使用筆記:控制項、取值、事件、改樣式、外部平台影片

Plyr 播放器使用筆記:控制項、取值、事件、改樣式、外部平台影片

本篇大綱:本篇要解決的問題。建立影片播放器及控制項、開啟所有控制項、新增字幕檔、新增多種畫質選擇、提示 Tooltip、中文化介面、時間軸加上段落標記。取值:影片總時長、當下秒數。監聽事件:播放、暫停。修改樣式。外部平台影片:Youtube、Vimeo。

滿版圖片背景、影音背景

滿版圖片背景、影音背景

本篇大綱:本篇要解決的問題、滿版背景圖、滿版影音背景。最近遇到頁面的第一屏是滿版影片當背景的設計稿,原本以為只是偶爾有的樣式,後來看到朋友做別的案子時也有一樣的設計,才想把這次寫滿版影片的方式給筆記起來。

Youtube Iframe API 常用功能

Youtube Iframe API 常用功能

本篇大綱:影片愈來愈重要的這時代,前端會遇到嵌 Youtube 的相關需求。基本使用:嵌入影片 + 自動播放。1 HTML 中放一個 div,由 JS 去嵌入。2 HTML 裡直接放個 iframe。自製 Youtube 播放器。監聽 Youtube 播放狀態。Demo、原始碼。

Let's Write

前端工程師 August 的學習筆記 — solving problems, in simple ways.

Follow us Telegram GitHub