Autoplay Embedded YouTube videos in the background? - javascript

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.

Related

How can i pause dynamically appended videos?

I am making a project using jquery in which a chat thread has to be created, i am having the following code in my project that pauses all the videos except the one that is playing. This works totally fine until and unless i append a new video in my chat thread.
$("video").on("play",function(e)
{
var $allVideos = $('video');
$allVideos.not(this).each(function()
{
this.pause();
});
});
For example, i am currently playing a video in a chat thread and i am going to upload another video, while i am on the preview div inside bootstrap4 modal that autoplays the video, the one currently playing in the chat thread pauses and the one inside the preview div starts playing automatically. But when i append this preview video in my chat thread and trigger play buttons on this just appened video and the previous video that was paused, they both start playing simultaneously despite of the fact that i am having the code to manage this.
I see i need to pass some selector with on method like
$("body").on("play","video",function(e){});
but then i can't use this keyword in my code because now it refers to the body instead of the video.
How do i fix this problem? Thank You In Advance!

Autoplaying a full screen YouTube video on button press with JQuery

My website has a video banner at the top of the home page similar to AirBnb's. It has a play glyphicon on it. When I press the glyphicon, I want a video from YouTube to open in fullscreen mode and play automatically. Then, when the user quits the fullscreen video, I want the Iframe to vanish and all audio to stop.
Right now I have this for Slim markup
.fullScreenContainer
.video-container#autovid height="100%"
= video_tag("broll2.mp4", autoplay: true, muted: true, preload:true, loop:true)
.container#playButton
.text-center
h1#videoHeading Press Play to Watch the Video
a href="javascript:void(0);" onclick="addIntroVideo()"
span.glyphicon.glyphicon-play
and this is my jQuery function
function addIntroVideo() {
$('<iframe id="introVideo" src="https://www.youtube.com/embed/6a8fvbkNLWQ?rel=0&autoplay=1" frameborder="0" allowfullscreen="true"></iframe>').appendTo('.fullScreenContainer');
}
My understanding is that appending ?rel=0&autoplay=1 to the YouTube URL makes the video play in full screen mode and start automatically. However, when I press play it just loads a tiny iframe and autoplays that. How do I change this code to get it to do what I want?
Don't make the iframe yourself. Instead, use the YouTube iframe API example
You can add embedded JavaScript under this Slim tag:
javascript:
That JavaScript creates the iframe and an object called player that has methods stopVideo() and startVideo(), and you can use more JavaScript to hook those functions to a button click handler.

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();

Using jQuery Galleria how can one subscribe to a Youtube player ready event?

Galleria has a bunch of useful API functions (http://galleria.io/docs/api/events) but none of them appear to allow you to detect when a Youtube video player iFrame has successfully loaded.
The previous version of Galleria did not support video posters and so any YT videos in the gallery were automatically embedded into a slide when it was shown. Using the 'image' event (http://galleria.io/docs/api/events/#image) I could then detect if it was a video and hook into the YT player API.
Now that the video is initially a poster I cannot figure out how to detect when the player has loaded (after hitting the poster's play button) in order to manipulate it.

Embedded youtube video restarts on resize

I have a Youtube video embedded on my site, and when the iframe that it is embedded in gets resized, the Youtube video restarts. Is this the expected behaviour? Is there any way around it? I have been trying to get the Youtube JS API working to no success, so I would prefer to not use it.
Any ideas?
How about you get the minute/second the video is at the moment of the resize so you reload it but with an auto starts on the same minute/second?
For example if you add this at the end of a youtube url it starts at minute 1 and 8 seconds:
#t=1m08s

Categories

Resources