How to Control YouTube AutoPlay and Play after another video end

API
JavaScript
發佈日期:   2014-04-14
更新日期:   2024-08-05
文章字數:   286
閱讀時間:   1 分
閱讀次數:  

今天被一個朋友問起如何控制embed的YouTube影片，讓他可以自動撥放也可以在播放完後讓另外一個embed的影片也播放。

這邊先介紹一下官方的API ─ Youtube IFrame API

What is Youtube IFrame API

Youtube iFrame API是Google官方提供的一組JavaScript Library讓我們可以輕鬆控制嵌入的影片，但不同於Flash 與 JavaScript player API都在網頁內嵌入一個Flash object的概念，IFrame API 使用 <iframe> tag ，在HTML5的支援下這提供了更穩固的播放基礎。

它目前的功能包括：

  • Play(include seeks to a specified time), Pause and Stop Video
  • Video information
  • Queueing functions
  • Quality、Mute、Volume、Screen Size Control
  • Can Get Player State
    • 1 – unstarted
    • 0 – ended
    • 1 – playing
    • 2 – paused
    • 3 – buffering
    • 5 – video cued

Hand on Lab

在開發上主要透過Create 一個YT.Player object的方式去操控處理，基本的操控如下:

JS Bin

接下來介紹如何使用這個API1幫我們完成在ㄧ個Player播放完影片後自動trigger另外一個player播放，範例如下：

JS Bin

如此一來透過這個API我們就可以很輕鬆的處理影片播放的任何需求了

作者: Blackie
連結: https://blackie1019.gitlab.io/2014/04/13/using-javascript-to-control-youtube-autoplay-and-play-after-another-video-end/
版權聲明: 本站所有文章除特別聲明外，均採用 CC BY 4.0 許可協議。轉載請註明來源 Blackie !
API
賞
 上一篇
JavaScript reserved word(保留字) JavaScript reserved word(保留字)
這禮拜在看以前的code的時候看到前人使用保留字的來宣告變數名稱的js code，可能當時的時空背景允許這樣的事情發生，但想到以後如果部門還有小朋友的話要告訴他們的正確的觀念所以寫了這篇來Memo一下。
2014-04-14 JavaScript
Basic JS
下一篇 
.NET MVC Multiple types were found that match the controller named 'XXX' .NET MVC Multiple types were found that match the controller named 'XXX'
解決重複註冊多個的Routing問題
2014-02-18 .NET
ASP.NET Web MVC/WebApi
  目錄