I need to make a video page for my website which must contain a video from youtube (https://www.youtube.com/watch?v=bWPMSSsVdPk) and after this video ended I need to automatically display a second video (https://www.youtube.com/watch?v=0afZj1G0BIE) and the div with class content
This is my code so far:
<style>
.content {
display: none;
}
</style>
<div class="content">
<button>Show this button after first video ends</button>
</div>
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'bWPMSSsVdPk',
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');
}
}
</script>
I've found a solution for this but it seems that the sound of the second video is also playing in the same time with the first video...
<style>
.second-video {
display: none;
}
</style>
<div class="video-site">
<div class="first-video">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div id="player"></div>
</div>
<div class="second-video">
<div id="player2"></div>
</div>
</div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
var player2;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'qCDxEif_9js',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: '43jHG-yH9Gc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
$('.close').click(function(){
$('.first-video').hide(3000);
$('.second-video').fadeIn();
});
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$('.first-video').hide(3000);
$('.second-video').fadeIn();
}
}
</script>
There is no direct way as to how one can do this with the available set of parameters that a Youtube iframe Player API has. But you can try doing this.
Create a Playlist of the video's you want to play consecutively in the same order.
In the REST API call set the listType parameter as playlist.
Retrieve the playlistID of that particular playlist.
http://www.youtube.com/embed?listType=playlist&list=PLPLAYLISTID
Finally, set the autoplay parameter to 1 so that the video's in the playlist play automatically.
function onPlayerStateChange(event) {
if(event.data === 0) {
event.target.loadVideoById("0afZj1G0BIE");
}
}
That'll play your next video right after your first. However that also calls playVideo() which will be an issue for anyone watching on an Apple mobile device. Consider using cueVideoById() instead.
Related
I would like to know how can I change the source of iframe automatically when video ends.
I am using this script to generate iframe and the function onPlayerStateChange to detect when the video ends. I basically need to change the videoID after the video finishes playing.
My JS:
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: '640',
height: '390',
videoId: 'gPDcwjJ8pLg',
events: {
onStateChange: onPlayerStateChange
}
});
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
}
}
</script>
Thank you for any advice.
If you want to do this for several videos, you will need to generalize this. But I think this example (of an index.html file) should work:
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
player.loadVideoById('iRXJXaLV0n4');
}
}
</script>
Here is the jsFiddle: http://jsfiddle.net/lukeschlangen/dbrhgdkb/1/
This is a video that plays on my site but the user can't actually see it, they can only hear it. I want to create a button so that if the user want's to mute the video at anytime then they can just select that button and all sound on the site will stop but if they click it again then they should be able to hear it again. If your struggling to understand what I mean please post a comment as it would be really helpful. Thanks!
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '0',
width: '0',
videoId: 'a5SMyfbWYyE',
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');
}
}
First create a button in your html with an ID :
<input id="mute-toggle" type="button"/>
And get the ID with JQuery :
$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);
if(player.isMuted()){
player.unMute();
mute_toggle.text('volume_up');
}
else{
player.mute();
mute_toggle.text('volume_off');
}
});
I am trying to fade in an iframe containing a YouTube video when the video starts, and fade it out when it ends (before it shows the still image with the red player button in the middle). Right now, the video is stuck at opacity: 0. It's like the code isn't detecting the start of the video. Here is my code (most of it is from Google):
HTML
<iframe id="player"
width="560" height="315"
src="https://www.youtube.com/embed/-K2fShrbvfY?modestbranding=1&rel=0&controls=0&enablejsapi"
frameborder="0" allowfullscreen
></iframe>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.style.opacity = 1;
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
event.target.style.opacity = 0;
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
CSS
#player{
opacity: 0;
transition: all 1s;
}
I also tried document.getElementById('player').style.opacity = 1; instead of event.target.style.opacity = 1; , but it still does not fade the video in.
New code, thanks to help from below. However, I still get the YouTube water mark and the still image at the end.
<!DOCTYPE html>
<html>
<head>
<style>
#player {
display: none;
}
</style>
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
playerVars: {
modestbranding: 1,
rel: 0,
controls: 0,
showinfo: 0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
$('#player').fadeIn(function() {
event.target.playVideo();
});
}
// when video ends
function onPlayerStateChange(event) {
if (event.data === 0) {
$('#player').fadeOut();
}
}
</script>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<head>
<style>
#player {
display: none;
}
</style>
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
playerVars: {
modestbranding: 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
$('#player').fadeIn(function() {
event.target.playVideo();
});
}
// when video ends
function onPlayerStateChange(event) {
if (event.data === 0) {
$('#player').fadeOut();
}
}
</script>
</body>
</html>
However
You cannot remove the watermark
Reference YouTube API
modestbranding:
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
I can load and play Youtube Video via the iFrame API, but I can't figure out how to change the player parameter for the second video. I want no controls on the first video and then when user click on my custom Play Video, I want to play the second video with controls bar. I can set the playerVars on player initiation, but I don't know how to change it when the player is already loaded. Any ideas?
Thanks much.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'M7lc1UVf-VE',
playerVars: { 'autoplay': 1, 'controls': 0 },
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
function onPlayerReady {
var $btn = '<button id="play">Play Button</button>';
$('#nav').prepend($btn);
$('#play').click(function() {
player.loadVideoByUrl('http://youtu.be/GBHxL-LXJbs?controls=1');
});
}
I load and play a youtube video in a fancybox. It all works perfectly, except when I close the fancybox it starts the video again.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '480',
width: '853',
videoId: 'I76i-TCaUCY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if (event.data === 0) {
$.fancybox.close();
}
}
The user should be able to play it again if needed, so I can't delete it.
How do I play it for the first time only?
I don't know if there is an easier way, but this is how I have fixed it for my needs:
I added var played = false and:
// autoplay video
function onPlayerReady(event) {
//This ensures that it is autoplayed only once.
if (!played) {
event.target.playVideo();
played = true;
}
}
It now works as I was expecting.