关于javascript：控制Bxslider中的youtube视频自动播放并在完成后滑动到下一张幻灯片

Control the youtube video in Bxslider to autoplay and slide to next slide after it finished

我正在尝试在 iframe 中控制 youtube 视频。 Bxslider 结构的视频。我将滑块设置为自动启动，其中包含一个 iframe 视频。

我想做的是当 "currentSlide" 是视频幻灯片时，自动播放它并在视频完成后转到下一张幻灯片。所以冻结幻灯片直到视频结束。

我已经尝试过，但它只在第一次加载时起作用，当滑块回到第一张幻灯片时，视频和滑块本身都不再自动播放/冻结。问题是没有错误消息..

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

// Load YouTube Frame API
(function(){
var s = document.createElement("script");
s.src ="http://www.youtube.com/player_api";
var before = document.getElementsByTagName("script")[0];
before.parentNode.insertBefore(s, before);
})();

var mainslider = $('#main-slider').bxSlider({
speed: 1000,
mode: 'fade',
pager: false,
auto: true,
autoControls: true,
infiniteLoop: true,
// pause: pause,
adaptiveHeight: true,
onSlideBefore: function() {

},
onSliderLoad: function() {
console.log('Slider loaded');
slideInit();
},
onSlideAfter: function() {
currentPos();
}
});

function slideInit() {
var currentNum = mainslider.getCurrentSlide();
console.log('slide:' + currentNum);
if ($('#main-slider li').eq(currentNum).find('iframe').length > 0) {
var getFrame = $('#main-slider li').eq(currentNum).find('iframe').attr('id');
console.log('video id:' + getFrame);
onYouTubeIframeAPIReady(getFrame);
console.log('data sended');
}
}
//Get Video frame
function currentPos() {
var currentNum = mainslider.getCurrentSlide();
console.log('slide:' + currentNum);
if ($('#main-slider li').eq(currentNum).find('iframe').length > 0) {
var getFrame = $('#main-slider li').eq(currentNum).find('iframe').attr('id');
console.log('video id:' + getFrame);
onYouTubeIframeAPIReady(getFrame);
console.log('data sended');
}
}

function onYouTubeIframeAPIReady(id) {
player = new YT.Player(id, {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

function onPlayerReady(event) {
event.target.playVideo();
console.log('player triggered');
}

function onPlayerStateChange(event) {
console.log('play Status::::::::' + event.data);
if (event.data == YT.PlayerState.ENDED && !done) {
var start = document.getElementsByClassName('bx-start');
start[0].click();
console.log('slider-started');
} else if (event.data == YT.PlayerState.PLAYING) {
var stop = document.getElementsByClassName('bx-stop');
stop[0].click();
console.log('slider-stopped');
} else if (event.data == YT.PlayerState.CUED) {
event.target.playVideo();
console.log('come here cued');
}
}

http://codepen.io/wushan/pen/VvyEGa

让它工作，看看这个 CodePen

我更改了以下内容：

1
2
3

function onPlayerStateChange(event) {
console.log('play Status::::::::' + event.data);
if (event.data == YT.PlayerState.ENDED && !done) {

/*~~~~~~~~~~~~~~~~~~~~~~~~~删除~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~

** var start = document.getElementsByClassName('bx-start');

** 开始[0].click();

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~*/

1
2
3

//ADD bx.stopAuto();
console.log('slider-started');
} else if (event.data == YT.PlayerState.PLAYING) {

/*~~~~~~~~~~~~~~~~~~~~~~~~~删除~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~

** var stop = document.getElementsByClassName('bx-stop');

** 停止[0].click();

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~*/

1
2
3
4
5
6
7

//ADD bx.startAuto();
console.log('slider-stopped');
} else if (event.data == YT.PlayerState.CUED) {
event.target.playVideo();
console.log('come here cued');
}
}