Develop Reference

Autoplay Embedded YouTube videos in the background?

I have a website with embedded YouTube videos. I'm using the YouTube player API to embed my videos, and the player is set to autoplay when the page loads. I've set a listen event to redirect to the next video once the current embedded video has finished playing (I need to redirect to a new physical page rather than load the next video into the existing iframe created by the API as each page contains information/comments specific to that video).
This all works perfectly, but only if you have the tab open. If you're listning to the videos in the background (they're just audio recordings set to a static image, there's nothing to actually watch), the page will redirect fine after the current video finishes, but the YouTube video will not start playing until you click into the tab. As soon as you do click into the tab, the autoplay kicks in and the video starts. But I need the videos to play automatically whether the tab is open or not. Any ideas?
I've experimented with JWplayer, and the redirect/autoplay works perfectly, but that would mean having to host the videos myself, and I'd rather host on YouTube. I've also noticed that YouTube.com doesn't have this problem. It will load the next video page in a playlist and autoplay whether the tab is open or not.
This problem only occurs in Chrome, Firefox and Opera, but not in Edge or IE.
Thanks.
<div id="yt-player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady(){
player = new YT.Player('yt-player',{
height:'433',
width:'770',
videoId:'xxxxxxxxxxx',
playerVars: { 'autoplay': 1, 'controls': 1, 'html5': 1 },
events:{
'onReady':onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event){
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0 && $("#autoplayCB").is(':checked')) {
window.location="/nextvideo.htm";
}
}
</script>

I've come across this problem. I found that you must create the player first, then to change the video you use loadVideoById.
https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions
The problem here is that you must make the list of videos yourself, or find some way of getting the list of videos into a javascript array and call the next one when the current video ends. You will need to build a manual playlist.
The only other caveat is that you must let the video load the first time you're on the page, opening it in a new tab without giving the tab focus will prevent it from initialising until you do so.

How to create a clickable timestamp link on an embedded youtube video with javascript?

I would really like to have clickable time links on my website that will jump to specific times within my embedded youtube video. I know that this is possible within youtube itself (built in function on youtube where you just put the time you want in the format (0:00) and users can click it to jump to that point).
I was wondering if it is possible to mimic this function somehow with embedded youtube videos and javascript?

You can use the Youtube iFrame API. There is a function to get the current timestamp:
player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note
that getDuration() will return 0 until the video's metadata is loaded,
which normally happens just after the video starts playing.
Use them like so:
ytplayer = document.getElementById("youtube_player");
ytplayer.getCurrentTime();

Pause youtube and vimeo programatically and detect if a video is playing

I have a slider which allows video embeds ( currently by pasting in iframe code from youtube/vimeo etc). The problem I have is that the video needs to pause the slider when the user clicks the video play button and also pause the video when the slider moves to the next frame.
It seems that I will need to use the vimeo and youtube API's to get access to the information and control I want. I have looked through the API's and I think I can probably get this happening; however my problem is that from what I've seen so far the youtube API tends to work off the video ID, whereas the Vimeo API seems to work with iFrames, but I need to have a consistent input for end users in that I want to say "Paste the video ID here" OR "Paste the Iframe here" OR "Paste the video URL here" ... I don't want to have to ask them for an ID from youtube for one video and an Iframe from Vimeo for the next one.
I know how to manipulate the data to make the two consistent but I'd rather avoid that if at all possible. What is the best approach to get programatic access to Youtube and vimeo so that I can achieve access to play and pause and know whether a video is playing or not.

there is a small widget on https://github.com/dachcom-digital/jquery-video with which you can archive the things you're asking for.
You can ask the user for the video ID and render some HTML container. Then you apply the widget and can pause, play, etc. the videos with one consistent API.
Hope this helps.

Insert add video before main video with YouTube API

I have a page that displays YouTube videos using the YouTube API. For each video I have a specific 30 second add video that I would like to play before the main video. Is there a way to do this through the YouTube API or plain javascript/jquery?

All you need to do is embed the ad first, then when it's done playing, hide it and show the main video.
First, detect when the ad is done playing with the Youtube API player.getPlayerState() function. This returns a zero when the video is ended.
Then, hide the embed with Javascript and show the main video.

HTML5, Video and Javascript: using video timeline to control page behavior

I'm having the following problem: i have to show a video inside a page, but it needs to alternate with page content. Everytime the video stops playing, i have to show a div or something. After a few seconds, that div goes away and the video starts playing again. Alternating between normal content and video.
Is this possible with HTML5 and JS? Any ideas on how to do it?

Consider implementing Popcorn.js. It's part of Mozilla's Popcorn project.
The demo on the front page shows a div with changing HTML content depending on the time code of the video.
Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web

Bind an event when the video stops (addEventListener( "ended", function(){ ... }, false)) to show the div, start a timer after which the div hides and video starts playing again.