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
Related
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>
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 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.
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!
I am trying to figure out a way to trigger a javascript modal popup/popover when a YouTube video finishes.
I first saw this achieved on UpWorthy.com. See this video for an example when the video ends: http://www.upworthy.com/bully-calls-news-anchor-fat-news-anchor-destroys-him-on-live-tv
I have enabled the javascript api by adding the JS parameter to the embed code (enablejsapi=1)
I am using this Simple Modal script to achieve the modal: http://www.ericmmartin.com/projects/simplemodal/
How do I get the end of the youtube video to trigger it?
Many thanks
<html>
<head>
<title>YT Test</title>
<script type="text/javascript">
<!--
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://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', {
height: '390',
width: '640',
videoId: 'ecccag3L-yw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) { /* do nothing yet */ }
// The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
// insert appropriate modal (or whatever) below
alert('I hope you enjoyed the video')
}
}
-->
</script>
</head>
<body>
<div id="player"></div>
</body>
<html>
Use the onStateChange event of the Youtube Player and check the current player state. If the state is YT.PlayerState.ENDED then you can trigger the modal dialog box.
From Youtube JavaScript player api reference document(with some modification)
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById(playerId);
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(newState) {
if(newState==YT.PlayerState.ENDED){
//OPEN Modal dialog box here
}
}