Develop Reference

TypeError: player.currentTime is not a function error in videojs

I have a working player in videojs and I'm trying to get the current position of the progress bar, In the documentation provided by videojs they use myPlayer.currentTime() to get and set the time in seconds but it is not working for me.
My code:
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", {
host: "https://www.youtube.com",
/* no need to specify player
size here since it is handled
by the player-size div */
videoId: video_id,
playerVars: {
enablejsapi: 1,
playsinline: 1,
start: 0,
disablekb: 0
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
console.log("player state: " + player.getPlayerState());
if (player.getPlayerState() == 2){
console.log("STOPED AT:" + player.currentTime()); // This is where i want to log the current time of the playing video
}
}
function updateVideoId(video_id) {
player.loadVideoById(video_id, -1);
}
function stopVideo() {
player.stopVideo();
}
function onPlayerReady(event) {
document.getElementById("play").addEventListener("click", function() {
player.playVideo();
});
}
What am I doing wrong?

The code above is YouTube's API, not Video.js.
If you want to play a YouTube video in Video.js and use Video.js's API, you need to use the YouTube tech for Video.js

Javascript autoplay works on browser but not on iPad

I copied a code from a post here and modified it a little. The autoplay works fine (with javascript) on my computers, but not on iPad. I've been trying with autoplay: 1 inside onYouTubeIframeAPIRead but it doesn't help.
<!-- 1. The <iframe> (and video player) will replace this <div> tag.-->
<div id="player">
</div>
// 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', {
height: '100%',
width: '100%',
videoId: '<?php echo $video;?>',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
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) {
setTimeout(stopVideo, <?php echo $length*1000+2000;?>);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>

iOS blocks autoplay on videos that have audio tracks and are autoplayed through a handler that is not in the same direct context as a user interaction.
Relevant blog post: https://webkit.org/blog/6784/new-video-policies-for-ios/
You'll want to bind this to a handler and maintain the same overall context so that autoplay is allowed. I believe Chrome is also going to be implementing this policy very soon.

YouTube API to play random video from tag

I have YouTube API which I got from this link...
https://developers.google.com/youtube/iframe_api_reference
It's working okay, but I am looking for a way for it to play a random video based on a tag...is this possible? Is there a tutorial on it?
Here is my code
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<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', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
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) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>

Make Ajax function call to handle the request
function request_yt_videoID(vid)
{
// Some Code
player.loadVideoById(vid);
}
Visit Google Developer Site: https://developers.google.com/youtube/iframe_api_reference#loadVideoById

Youtube iframe player doesn't embed using Youtube's Player API

I am referring to the example code provided by Youtube seen below. The sample code is suppose to ....
The sample HTML page below creates an embedded player that will load a
video, play it for six seconds, and then stop the playback.
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "//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: 'u1zgFlCw8Aw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
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) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
Here's jsFiddle link for the code above.
Can you tell why this isn't working?

How can I play two Youtube videos without linking to a playlist?

I'm very new to Javascript. I'm embedding a youtube iframe here:
http://www.heartlandpokertour.com/indexbeta.php
Using this documentation:
http://code.google.com/apis/youtube/iframe_api_reference.html
I would like a second video to play, looped, after the first one is finished. I'm unable to set specific video parameters if I try and link/set the video id to a Youtube playlist.
I'm assuming I need to setup an event listener and function to trigger when YT.PlayerState.ENDED (or 0) is broadcast, but NO IDEA how to do this.
Update: Here is the current code I'm using for the player:
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '258',
width: '406',
videoId: 'MsTQNZmq5Pk',
playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
events: {
'onStateChange': onPlayerStateChange,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
player.videoId = 'c5dTlLk5_x8';
player.playVideo();
}
}
</script>

In the first code listing on the api website, this event might help you:
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
You could change it to something like this (not tested I'm afraid):
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
player.videoId = 'some id';
player.playVideo();
}
}
This would be the most logical in my opinion, but then again I'm not sure whether different videos can be played within one player instance. I've never come across your scenario I'm afraid.
Edit: You could try creating a new instance of the player. So basically you'd just create a new player, which will play the second video:
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.stopVideo();
player = new YT.Player('player', {
height: '258',
width: '406',
videoId: 'some id',
playerVars: { 'autoplay': 0, 'rel': 0, 'showinfo': 0, 'egm': 0, 'showsearch': 0, },
events: {
//'onStateChange': onPlayerStateChange, // not add this line because it would again create a new player after the second has stopped I guess!
}
});
player.playVideo();
}
}

I have got this working on my site, first you can stop the current video playing, then load in a new video with the loadVideoById() function from the Youtube API
function swapVideo() {
player.stopVideo();
player.loadVideoById(youtube_id);
}