使用angularJS自定义轮播幻灯片

时间:2016-05-06 07:45:08

标签: angularjs twitter-bootstrap youtube-api

我正在尝试使用youtube api和旋转木马播放多个视频。在这里,我想根据视频更改幻灯片。我制作了样品小提琴

 var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
            alert('done');
        }
    }

http://jsfiddle.net/XxPzW/138/

在上面的小提琴中,youtube url是硬编码的,但在我的情况下,我会为每条记录获取URL。当我点击AUTOPLAY按钮时,它将相应地播放所有视频。我对playAll视频的 onPlayerStateChange 进行了一些更改。当我播放所有视频时,幻灯片内容没有变化。我希望我的问题很清楚。

0 个答案:

没有答案