前提是可以访问外网。

YouTube Iframe 提供了API可以控制视频播放的控制。

在angular2项目中使用中也遇到了一些坑。

参考文档：

官方文档

Use YouTube iframe API with Angular2 and Typescript

demo

官方文档说明的是使用javascript的方法。

// 2. This code loads the IFrame Player API code asynchronously.var tag = document.createElement('script');

步骤也写的特别清楚。

关于YouTube视频需要说明的一点,就是如果我们直接在iframe里调用视频的话，需要注意的。

如图下面，这是在YouTube上分享视频，但是直接用这个地址是不对的

报错

地址需要下面的样子才可以 

https://www.youtube.com/embed/jdqsiFw74Jk

也就是在

https://www.youtube.com/embed/

后面加上视频的ID

好了，下面就开始看怎么使用

使用

这是官方文档的使用步骤。

1. 添加页面元素

2. 往页面动态添加script引用youTube Iframe API

3. 创建实例

    onYouTubeIframeAPIReady方法会在API完成的时候调用并创建实例。并且我们可以在实例中添加一些函数来检测视频的变化。

    像官方文档中的onPlayReady，onPlayrStateChange. 当视频触发对应的状态时就会触发相应的函数。

    当然已经创建实例了，我们可以通过实例对象来获取相应的数据和进行相应的操作。这些都可以在文档里看到。

获取数据

这里也能看出播放器的几个状态。

angular2里的应用

记得在package.json里把@types/youtube加上 版本我用的 ‘0.0.29’

1、往页面添加script实在ngAfterViewInit里添加

2、注册onYouTubeIframeAPIReady方法可在onInit里通过如下方法。

然后就可以进行我们的想要的操作了。

我做的时轮播图里视频如果播放或加载中，自动轮播停止，手动切换轮播，当前视频播放暂停播放暂停或停止，正常轮播。

在这里面也遇到了个问题就是视频播放传到子组件的老是有反应时间。然后鼠标移开的时候又会触发自动播放进行判断当前播放状态。所以播放状态快速操作的话经常会获取不对。后来发现比较简单的解决就是只要移开我就把timer清掉，不管是不是暂停。（下图原来清除是在if语句内），如果组件有change会调用autoplay。 因为autoplay里的timer启动第一次也是等5秒，如果这5秒内上一次的状态执行了就出错了，所以先清掉定时器的状态，重新开始定时器就好了。