【发布时间】：2017-11-02 10:01:44
【问题描述】：
我正在使用来自此链接 https://github.com/ArunMichaelDsouza/ng-youtube-embed 的 ng-youtube-embed 插件。我的网站中安装了 flex 滑块。视频显示在 flex 滑块 div 中。请看附件enter image description here
当我播放视频然后点击轮播中的其他视频时，之前播放的视频不会暂停。我在下面附上了我的html代码：-
`
<flex-slider slider-id="slider" flex-slide="item in videos track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<ng-youtube-embed
video="item.id"
videoid = "myvideo"
autoplay="false"
color="white"
width="1280px"
height="650px"
disablekb="true"
modestbranding="true"
end="400"
enablejsapi="true"
onready="playerReady"
onstatechange="stateChanged"
>
</ng-youtube-embed>
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider class="stop" slider-id="carousel" flex-slide="item in videos track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<md-card>
<img ng-src="https://img.youtube.com/vi/{{item.id}}/hqdefault.jpg" class="md-card-image"/>
<md-content>
<md-card-title>
<md-card-title-text><span class="md-headline">{{item.title}}</span></md-card-title-text>
</md-card-title>
<md-card-content>
{{item.description}}
</md-card-content>
</md-content>
</md-card>
</li>
</flex-slider>
</div>
</div>
</div>`
这是我的控制器：-
function HomeController(api,$rootScope,$scope,$state,$cookies,$window,ngYoutubeEmbedService)
{
var slider, // Global slider value to force playing and pausing by direct access of the slider control
canSlide = true; // Global switch to monitor video state
// Load the YouTube API. For some reason it's required to load it like this
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Setup a callback for the YouTube api to attach video event handlers
window.onYouTubeIframeAPIReady = function(){
// Iterate through all videos
$('.flexslider iframe').each(function(){
// Create a new player pointer; "this" is a DOMElement of the player's iframe
var player = new YT.Player(this, {
playerVars: {
autoplay: 0
}
});
// Watch for changes on the player
player.addEventListener("onStateChange", function(state){
switch(state.data)
{
// If the user is playing a video, stop the slider
case YT.PlayerState.PLAYING:
slider.flexslider("stop");
canSlide = false;
break;
// The video is no longer player, give the go-ahead to start the slider back up
case YT.PlayerState.ENDED:
case YT.PlayerState.PAUSED:
slider.flexslider("play");
canSlide = true;
break;
}
});
$(this).data('player', player);
});
}
// Setup the slider control
slider = $(".flexslider")
.flexslider({
animation: "fade",
easing: "swing",
slideshowSpeed: 6500,
animationSpeed: 900,
pauseOnHover: true,
pauseOnAction: true,
touch: true,
video: true,
controlNav: true,
animationLoop: true,
slideshow: true,
useCSS: false,
// Before you go to change slides, make sure you can!
before: function(){
if(!canSlide)
slider.flexslider("stop");
}
});
slider.on("click", ".flex-prev, .stop, .flex-next", function(){
canSlide = true;
$('.flexslider iframe').each(function(){
$(this).data('player').pauseVideo();
console.dir(player.trackingVideoId);
});
});
$scope.videos = [
{image: 'assets/images/slides/dream.jpg', id : 'BdN_-EyB224', title:'Blockchain', description: 'Over the past decade, an alternative digital paradigm has slowly been taking shape at the edges of the internet.'},
{image: 'assets/images/slides/dare.jpg', id : '-38uPkyH9vI', title:'Crowd Funding Explained', description: 'See how to tap the power of the crowd for creative projects (Crowd Creativity), to collect and..'},
{image: 'assets/images/slides/explore.jpg', id : 'y2Lk8TExz6w', title:'Oyo:India\'s Youngest Billionaire!', description: 'At age of 17 Ritesh Agarwal Founded Oyo Rooms, but he had his own struggles. '},
{image: 'assets/images/slides/explore.jpg', id : 'xjDV4EiLiuY', title:'Funded in 60 Mins', description: 'From "Kickstarted" (bitly.com/kckstrtd), the documentary about crowdfunding, comes "Funded in 60 Seconds."'},
{image: 'assets/images/slides/innovate.jpg', id : 'BLpPdJ5V3UA', title:'Crowdfunding Tips ', description: 'Learn how to reach your fundraising goal from Justin Massion, marketing director behind the successful crowdfunding campaign "Space Command" which raised $221K.'},
{image: 'assets/images/slides/explore.jpg', id : 'xjDV4EiLiuY', title:'Funded in 60 Mins', description: 'From "Kickstarted" (bitly.com/kckstrtd), the documentary about crowdfunding, comes "Funded in 60 Seconds."'},
{image: 'assets/images/slides/innovate.jpg', id : 'BLpPdJ5V3UA', title:'Crowdfunding Tips ', description: 'Learn how to reach your fundraising goal from Justin Massion, marketing director behind the successful crowdfunding campaign "Space Command" which raised $221K.'},
{image: 'assets/images/slides/explore.jpg', id : 'xjDV4EiLiuY', title:'Funded in 60 Mins', description: 'From "Kickstarted" (bitly.com/kckstrtd), the documentary about crowdfunding, comes "Funded in 60 Seconds."'},
{image: 'assets/images/slides/innovate.jpg', id : 'BLpPdJ5V3UA', title:'Crowdfunding Tips ', description: 'Learn how to reach your fundraising goal from Justin Massion, marketing director behind the successful crowdfunding campaign "Space Command" which raised $221K.'}
];
}
这种逻辑有时会起作用。 大多数时候我在控制台中收到以下错误。检查附加的图像enter image description here
我希望暂停当前播放的视频。我做错了什么？
【问题讨论】：
标签： angularjs youtube flexslider