http://MobileDev.TW

1. YouTube API http://MobileDev.TW
YouTube IFrame Player API
Ryan Chung
ryanchung@ncu.edu.tw
1
HTML5 Video 番外篇

2. YouTube API http://MobileDev.TW
想要解決的問題
• MTV Video前面故事很長，只想聽特定音樂片段
• 想要有自己的控制按鈕
• 畫面總是充滿著置入行銷連結
• 不想結束時看到一堆相關影片
2

3. YouTube API http://MobileDev.TW
在網頁上顯示一個YouTube影片
3

4. YouTube API http://MobileDev.TW
準備一個div與button
4

5. YouTube API http://MobileDev.TW
main.js 準備變數
5

6. YouTube API http://MobileDev.TW
當影片Iframe準備好時，設定播放器
6

7. YouTube API http://MobileDev.TW
播放器準備好，設定按鈕事件
7

8. YouTube API http://MobileDev.TW
不同的狀態，對應不同的動作
8

9. YouTube API http://MobileDev.TW
只想要播放特定片段
9

10. YouTube API http://MobileDev.TW
影片停止後，會從最前面開始播放…
遇到問題了…
10

11. YouTube API http://MobileDev.TW
影片結束時，按鈕可能還是Pause文字
按鈕的顯示
11

12. YouTube API http://MobileDev.TW
不想看到最上面的標題
12

13. YouTube API http://MobileDev.TW
每次影片結束時都會有一堆相關影片
13

14. YouTube API http://MobileDev.TW
影片播放時常有置入行銷連結
14