embeddable.on('click', function (e) {
// Some embeds are placed inside links.
if (!player) {
e.preventDefault()
}
player = youtubePlayer(embeddable[0], {
height: '100%',
width: '100%',
videoId: videoId,
playerVars: {
autoplay: 1,
controls: 0, // no controls
rel: 0, // do not show related videos after the video finishes
showinfo: 0, // do not show video title etc in the frame
iv_load_policy: 3, // disable annotations
modestbranding: 1, // hide youtube logo
start: start,
end: end
}
})
player.on('stateChange', function (e) {
if (e.data === 0) {
player.destroy();
player = null
}
})
})
onYouTubeIframeAPIReady() {
for (let [key, item] of videoIds.entries()) {
let player = YouTubePlayer('player-' + key, {
videoId: item
});
player.on('stateChange', (event) => {
if (!stateNames[event.data]) {
throw new Error('Unknown state (' + event.data + ').');
}
if (stateNames[event.data] == stateNames[2]) {
$('[id^="player-'+ key +'"]').parent('.embed-responsive').removeClass('active');
}
if (stateNames[event.data] == stateNames[3]) {
$('[id^="player-'+ key +'"]').parent('.embed-responsive').addClass('active');
}
});
this.players.push(player);
}
}
componentDidMount () {
this.player = YoutubePlayer(this.refs.player, {
playerVars: this.props.configuration
});
this.bindEvent();
this.diffState({}, this.props);
}
.on('render', function(el, scope, attrs){
var sel = el.getAttribute('id');
var opts = {
width: el.getAttribute('width'),
height: el.getAttribute('height'),
videoId: el.getAttribute('src')
};
youtube(sel, opts, function(){
});
});
createPlayer = () => {
// do not attempt to create a player server-side, it won't work
if (typeof document === 'undefined') return;
// create player
const playerOpts = {
...this.props.opts,
// preload the `videoId` video if one is already given
videoId: this.props.videoId,
};
this.internalPlayer = youTubePlayer(this.container, playerOpts);
// attach event handlers
this.internalPlayer.on('ready', this.onPlayerReady);
this.internalPlayer.on('error', this.onPlayerError);
this.internalPlayer.on('stateChange', this.onPlayerStateChange);
this.internalPlayer.on('playbackRateChange', this.onPlayerPlaybackRateChange);
this.internalPlayer.on('playbackQualityChange', this.onPlayerPlaybackQualityChange);
};
// Invoked before the initial rendering.
componentWillMount() {
const playerTag = document.getElementById('detail-player');
// Player height and width come from data attributes of playerTag
this.player = youtubePlayer('detail-player', {
height: playerTag.dataset.height,
width: playerTag.dataset.width,
});
this.player.on('stateChange', (event) => {
const playlist = this.props.playlist;
const playing = this.props.playing;
const playingIndex = playlist.findIndex((x) => x.id === playing);
// Play a next video automatically when the previous video ended.
if (event.data === PlayerState.ENDED) {
// All methods of youtube-player return Promise.
this.player.getVolume()
.then(volume => {
if (volume !== playlist[playingIndex].volume) {
playlist[playingIndex].volume = volume;
}
return Promise.resolve(this.player);
})
.then(() => {
const playIndex = playlist.findIndex((x) => x.id === playing);
const nextPlayingMusic = playlist[(playIndex + 1) % playlist.length];
this.props.onNextMusic(nextPlayingMusic.id, playlist, true);
});
// When player started after the first video is added to empty playlist.
} else if (event.data === PlayerState.NOTSTART) {
if (!this.prepared && playlist.length > 0) {
this.player.cueVideoById(playlist[0].videoId);
this.player.setVolume(playlist[0].volume);
this.prepared = true;
}
}
});
// Cue the first video of playlist when the page is loaded.
if (!this.prepared && this.props.playlist.length > 0) {
this.player.cueVideoById(this.props.playlist[0].videoId);
this.player.setVolume(this.props.playlist[0].volume);
this.prepared = true;
}
}