I would like to display an image with a play button, as soon as someone clicks the image I create a youtube player play it. As soon as someone clicks on the "pause" button I would like to hide the player and show the image again.
Is there some kind of callback I can use? I tried to use the onStateChange callback
onStateChange: function (event) {
if (event.data === 2) {
// logic to hide it
}
}
The problem is: this event is fired when someone changes the time as well, so as soon as a user left click the timeline the video signals to "pause" and becomes hidden. Can I somehow check if the video is just buffering/changing the position instead of pausing actively by a user?
Hopeing this to work...
</script>
<div class="module module-home-video">
<span class="module-strip">Latest Product Video</span>
<div id="video"></div>
</div>
<script>
var player, playing = false;
function onYouTubeIframeAPIReady() {
player = new YT.Player('video', {
height: '360',
width: '640',
videoId: 'RWeFOe2Cs4k',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
console.log(playing)
if(!playing){
alert('hi');
playing = true;
}else{
playing = false;
}
}
</script>
Related
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
I am using the Youtube API in order to generate a video using the following example:
HTML:
<div id="player"></div>
Javascript:
<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) {
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>
This code is based on the following question:
How to detect when a youtube video finishes playing?
The only difference is that I have deleted the "onPlayerReady" function since I don't want this video to be autoplayed automatically. So, I would like this video to be played using an external link using the following Javascript:
$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#player")[0].src += "&autoplay=1";
ev.preventDefault();
});
});
And the following HTML code:
<a id="play-video" href="#">Play Video</a>
When executed, the video plays when the link is clicked. However, at the end of the video, an alert should popup notifying that the video ended.
This alert ONLY shows up if the video is played from the default Youtube play button in the center of the video. However, if played through the "play-video" link it the alert doesn't show up.
Any ideas of what I could be missing?
Thanks!
For checking if the video has finished playing, you can do this.
player.addEventListener("onStateChange", function(state){
if(state === 0){
// video has finished playing
}
});
Try this.
$(document).ready(function() {
$('#play-video').on('click', function(ev) {
$("#player")[0].src += "&autoplay=1";
onYouTubePlayerAPIReady();
ev.preventDefault();
});
});
Hey what you can do is call player's inbuilt api playVideo() method on your play video link. Refer Youtube API guide.
What I have changed is your play video link click listener to this and it gives me expected result as you would require.
$('#play-video').on('click', function(ev) {
if(player){
player.playVideo();
}
ev.preventDefault();
});
Please find demo for the same https://codepen.io/samarthsinha/pen/ZKBBqM
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'm using the following code (written by my friend, I'm a beginner in JS) to create several iframes with different youtube videos, which I can then link to from within the text with the seekTo(t) function –
var players = [];
function onYouTubeIframeAPIReady() {
YTready()
}
function createPlayer(ref, divID, videoID) {
players[ref] = new YT.Player(divID, {
height: '360',
width: '640',
videoId: videoID,
events: {}
});
}
function jumpToTimecode(ref,t){
for(var i=0;i<players.length;i++){
if(i!=ref){
players[i].stopVideo()
}
}
players[ref].seekTo(t)
players[ref].playVideo()
}
It includes a way to stop all other videos once the user clicks on the link. What I'd like to do is add a function that would do the same thing (stop all other videos on the page) if the user simply clicks the play button on one of the youtube players.
I was thinking of defining an 'onStateChange': onPlayerStateChange event in the createPlayer function, and then adding a function that upon any of the players changing their state to playing // if (event.data == 1) // would loop through all the players and stop any which were not the one which was clicked. I'm not sure, though, how to reference the player which was clicked (as it could be any of them, so I don't know its 'ref' value in advance).
Or is this the wrong way to approach this?
Any help would be very much appreciated.
Okay, I solved this (with my friend's help).
function onPlayerStateChange(event) {
if(event.data == 1) {
var ref = event.target.f.id
for(var i=0;i<players.length;i++){
if(players[i].f.id != ref){
players[i].stopVideo()
}
}
}
}
with the event.target.f.id being the unique id given (by me) to the player as it's created.
I'm building a website for my client who wants YouTube embedded video with external control. This is the code.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
playerVars: {rel: 0},
videoId: 'myvideoid',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(event.data === 0) {
player.stopVideo();
}
$(document).ready(function() {
$( '.play-btn' ).on( 'click', function() {
if ($('.video').hasClass('mobile')) {
}
else {
player.seekTo(0, true);
player.playVideo();
}
});
This works fine on modern browsers, but on IE9 I have a problem: video starts playing when clicked. However, when video reaches it's end and I press external button again, I get "Error occurs" message and only video sound starts to play.
Any idea what might cause this?
EDIT
onError event gives error code 5, which is, as I've understood, HTML5 related. Error also occurs at the end of the video, not at the beginning, as I first thought.
Removing unnecessary stopVideo() function solved the problem. The video was already stopped at the end, when the function was called and apparently that caused the error.
This solved the problem in both IE9 and IE10.