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.
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/
I've been struggling with this for some days now. I use the function below to control a youtube video embedded with an iframe. The initialize function works properly. The problem is the onPlayerStateChange function. I'm trying to control the pause and play using the same button but it doesn't seem to run properly. It doesn't pause the video and the video itself cracks(plays at a very slow rate).
var player, time_update_interval = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('videod', {
playerVars: {
color: 'white'
},
events: {
'onReady': doThisFirst,
'onStateChange': onPlayerStateChange
}
});
}
function doThisFirst(){
updateTimerDisplay();
clearInterval(time_update_interval);
time_update_interval = setInterval(function () {
updateTimerDisplay();
}, 1000);
$('#volume-input').val(Math.round(player.getVolume()));
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) { // If video is playing…
var stop = document.getElementsByClassName('playButton');
stop[0].click(player.pauseVideo());
}
else{ // If video – pause
var start = document.getElementsByClassName('playButton');
start[0].click(player.playVideo());
}
}
I am developing an website where my client wants to be able to play an youtube video when he clicks an image and when the video finishes, the video disappears and the same image reappears again.
For example, view the website below and click the image on the home page.
https://www.oldbankruptcypapers.com/
You can use the youtube Iframe API (https://developers.google.com/youtube/iframe_api_reference) to resolve this.
Here is the example script:
$('#yourImage').on('click', function () {
var player = new YT.Player('yourDivToAppendVideo', {
// height: '1080',
// width: '1920',
videoId: 'putVideoIdHere',
playerVars: {
'autoplay': 1,
'controls': 0,
'showinfo': 0,
// and other options
},
events: {
'onReady': function (event) {
// Write your logic to HIDE the image here
event.target.playVideo(); // play video
},
'onStateChange': function (event) {
if (event.data == YT.PlayerState.ENDED) {
// Write your logic to UNHIDE the image here
}
}
}
});
}
You can follow below approach to achieve that :
When you click on the image, hide it and make your player container div visible. Bind onStateChange event of your YT Player to check for video ending and then hide the player or remove it and make your image visible.
Below is the code snippet :
<img src="http://d3gnp09177mxuh.cloudfront.net/tech-page-images/java.png" id="javaImg">
<div id="playerContainer">
<div id="player" width="300" align="left" height="238" style="margin-right:30px;"></div>
</div>
$("#javaImg").click(function(){
if($("#player").is("div"))
{
$(this).hide();
player = new YT.Player('player', {
height: '335',
width: '596',
playerVars: { 'controls': 1,'autohide':1},
videoId: 'r59xYe3Vyks',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
else {
player.autohide=1;
player.playVideo();
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").remove();
$("#playerContainer").append('<div id ="player" width="300" align="left" height="238" style="margin-right:30px;"></div>');
$("#javaImg").show();
}
}
});
I have also created a fiddle, https://jsfiddle.net/qLzpg27g/
From the API :
function onPlayerStateChange(event) {
if(event.data === 0) {
//replace video with image
}
//status states from API
// -1 – unstarted
// 0 – ended
// 1 – playing
// 2 – paused
// 3 – buffering
// 5 - Video Cued
https://developers.google.com/youtube/iframe_api_reference#Retrieving_video_information
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've spent the day banging my head on this. I've made some good progress, but this last part has me stuck.
I'm using YouTube's API. I have a listener event configured, and the video autoplays, and autocloses on completion. All of that works great.
What I want to do is have more than one video on a single page (5, actually) assigned by DIV. Is there a way to do that with this code?
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '488',
width: '800',
videoId: '49QKXdRTX-A',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").hide();
}
}
Additionally, it's worth mentioning that I will have a couple of these videos auto-show another DIV on completion, so something like this:
function onPlayerStateChange(event) {
if(event.data === 0) {
$("#player").hide();
$("#gallery-main").show();
ANY help would be greatly appreciated. Thanks!