youtube playlist plays next video in list - javascript

im using this youtube playlist plugin http://geckohub.com/jquery/youtubeplaylist/ and im trying to find a way of adding a bit of code that will allow the list of videos to be played next after the main video has finished playing. I have managed to loop the main video but trying to get the next video on the list to play.
cheers
Steve

check this URl autoplay youtube video it is not using this youtubeplaylist plugin. But you will get some idea to call next video when statechange
var o = document.getElementById( 'ytplayer_object' );
if ( o )
{
o.addEventListener( "onStateChange", "ytplayer_statechange" );
o.addEventListener( "onError", "ytplayer_error" );
}

Related

Youtube video autoplay with jquery

I wanted to make a website with Youtube video iframes, which starts to play on hover.
I've found this post Play youtube video on hover
This code works(video start to play on hover) but not all videos work (links seem to be broken).
The same thing happens when I use other videos so that's not broken links. I've found a post suggesting changing 'iframe' into 'embed' and this fixed broken links but then script stops working.
My script looks like below:
https://codepen.io/EwelinaWoloszyn/pen/dybQGWe
<script>$(document).ready(function(){
var nowPlaying = "none";
$('div').hover(function(){
nowPlaying = $(this).find('embed').attr('src');
$(this).find('embed').attr('src',nowPlaying+'&autoplay=1');
}, function(){
$(this).find('embed').attr('src',nowPlaying);
});
});
What should I change to make it work?
Many thanks in advance,
Neko
God forbid me for using W3Schools, but video elements in HTML5 have play() function in JavaScript
Documentation: https://www.w3schools.com/tags/av_met_play.asp
Your code:
$('div').hover(() => {
$(this).find('embed').play();
});

Need Action when Video is complete in video Player

I need video player which give me some events when video will complete. So, I can start another video after completing one video
How can I achieve it ?
Actually, I want to do it in ionic project. So, html and js video player will helpful for me
Thanks in advance
You can add listener to your video element
var videos = document.getElementsByTagName("video");
videos[0].addEventListener("ended", function() {
videos[1].play(); // the second video on page will start as just the first video ended
}, true);

Mute/unmute Vimeo video when Web page get loads using JQuery

I integrated Vimeo Video in my site and I used 'background= 1' parameter in query string to remove all the default functionalities but it cause a problem that my Video get muted when it loads and I want to unmute the video on page load.
I am beginner so please Give me some good and simple solution keeping in mind that background = 1 should stay there.
Here is what I tried so far:
<script>
var dynamicContent = getParameterByName('background');
$(document).ready(function() {
if (dynamicContent=='1') {
$('#vi-video-1-container').attr('data-audio-volume', 1);
$("#vi-banner-video").vimeo("setVolume", 1);
}
});
</script>

Flowplayer playlist setPlaylist(array) does not change playlist dynamically

On the page a have a flowplayer which play videos by provided tag (just a name of video category) using playlist plugin. And I have section “Suggested videos”. When I click on suggested video, I want to reload playlist using newly selected video tag. I tried use setPlaylist(array) as described in documentation https://flowplayer.org/docs/playlist.html#methods:
var player = flowplayer();
player.setPlaylist(this.playlist);
but it's not working.
Full player method code:
updatePlayer() {
if(document.getElementById('flow').innerHTML === "") {
var player = flowplayer(document.getElementById("flow"), {
autoplay: true,
playlist: this.playlist,
loop: true
});
// here I add all player events what I need
} else {
console.log('player updated');
var player = flowplayer();
player.unload();
//update flowplayer playlist
player.setPlaylist(this.playlist);
}
}
When the player is initialized and I click to suggested videos console.log() shows me message and player.unload() works, but setPlaylist() doesn't.
The only solution what can help its to use shutdown() method, which destroys all player instances, events and so on. But it is an ugly solution I think, previous I used JW player where you can easily update playlist dynamically.
Can anyone help me? Thanks!
Solution is player.setPlaylist(this.playlist).play(0);

Stop any embeded YouTube iframe when another is played

I am embedding about 10 YouTube iframes in my page, all with their own custom play/pause buttons. I have used this solution to begin http://jsfiddle.net/buuuue/dzroqgj0/ but I'm not sure how to tweak this piece of the code to stop ANY other video that is playing if another one begins...
function stopVideo(player_id) {
if (player_id == "player1") {
player2.stopVideo();
} else if (player_id == "player2") {
player1.stopVideo();
}
}
For example, if player 1 is currently playing, and player 3 is played, I'd want player 1 to stop playing. I've also looked into this solution https://stackoverflow.com/a/38405859/1798756, but I think I need to create the players via JS so that I can also create the custom play/pause buttons.
Thanks in advance for any help!
After creating players push them onto an array.
var vids =[];
player1 = new YT.Player('player1', {
//stuff
});
vids.push(player1);
player2 = new YT.Player('player2', {
// stuff
});
vids.push(player2);
....
..
playerN = new YT.Player('playerN', {
// stuff
});
vids.push(playerN);
Every player object's id can be accessed by its a.id property(a is itself an object , id is a property(string) )
Now when user plays a given player you have to just pause all other except the one being played(id of which you get in stopVideo).Since you have id it's easy
function stopVideo(player_id) {
for(var i=0;i<vids.length;i++){
if (player_id !=vids[i].a.id)
vids[i].stopVideo();
}
}
Example : - http://jsfiddle.net/4t9ah1La/
If you are not creating player through scripts but rather just embedding iframes then this answer mentioned by vbence is enough , below is a demo of that with improvements suggested by Jennie
Example : - http://jsfiddle.net/fyb7fyw1/
All credits to respective original authors

Categories

Resources