前提是可以訪問外網(wǎng)。
YouTube Iframe 提供了API可以控制視頻播放的控制。
在angular2項(xiàng)目中使用中也遇到了一些坑。
參考文檔：
Use YouTube iframe API with Angular2 and Typescript
官方文檔說明的是使用javascript的方法。
// 2. This code loads the IFrame Player API code asynchronously.var tag = document.createElement('script');
步驟也寫的特別清楚。
關(guān)于YouTube視頻需要說明的一點(diǎn),就是如果我們直接在iframe里調(diào)用視頻的話，需要注意的。
如圖下面，這是在YouTube上分享視頻，但是直接用這個地址是不對的
報錯
地址需要下面的樣子才可以?
https://www.youtube.com/embed/jdqsiFw74Jk
也就是在
https://www.youtube.com/embed/
后面加上視頻的ID
好了，下面就開始看怎么使用
使用
這是官方文檔的使用步驟。
1. 添加頁面元素
2. 往頁面動態(tài)添加script引用youTube Iframe API
3. 創(chuàng)建實(shí)例
? ? onYouTubeIframeAPIReady方法會在API完成的時候調(diào)用并創(chuàng)建實(shí)例。并且我們可以在實(shí)例中添加一些函數(shù)來檢測視頻的變化。
? ? 像官方文檔中的onPlayReady，onPlayrStateChange. 當(dāng)視頻觸發(fā)對應(yīng)的狀態(tài)時就會觸發(fā)相應(yīng)的函數(shù)。
? ? 當(dāng)然已經(jīng)創(chuàng)建實(shí)例了，我們可以通過實(shí)例對象來獲取相應(yīng)的數(shù)據(jù)和進(jìn)行相應(yīng)的操作。這些都可以在文檔里看到。
獲取數(shù)據(jù)
這里也能看出播放器的幾個狀態(tài)。
angular2里的應(yīng)用
記得在package.json里把@types/youtube加上 版本我用的 ‘0.0.29’
1、往頁面添加script實(shí)在ngAfterViewInit里添加
2、注冊onYouTubeIframeAPIReady方法可在onInit里通過如下方法。
然后就可以進(jìn)行我們的想要的操作了。
我做的時輪播圖里視頻如果播放或加載中，自動輪播停止，手動切換輪播，當(dāng)前視頻播放暫停播放暫?；蛲Ｖ梗］啿ァ?/p>
在這里面也遇到了個問題就是視頻播放傳到子組件的老是有反應(yīng)時間。然后鼠標(biāo)移開的時候又會觸發(fā)自動播放進(jìn)行判斷當(dāng)前播放狀態(tài)。所以播放狀態(tài)快速操作的話經(jīng)常會獲取不對。后來發(fā)現(xiàn)比較簡單的解決就是只要移開我就把timer清掉，不管是不是暫停。（下圖原來清除是在if語句內(nèi)），如果組件有change會調(diào)用autoplay。 因?yàn)閍utoplay里的timer啟動第一次也是等5秒，如果這5秒內(nèi)上一次的狀態(tài)執(zhí)行了就出錯了，所以先清掉定時器的狀態(tài)，重新開始定時器就好了。
