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);
Related
I'm using jwplayer on a video playlist, i have activated the next up card, as is shown on the next image. (reference image)
The problem is when the last chapter of a playlist is player and the Next Up card is displayed it shows the first video on the playlist.
I'm trying to disable the next up card only on the last video of a playlist.
This is with jwplayer 7 with API. i tried to change the setup of the jwplayer but that refresh the entire player.
componentWillMount() {
const player = this.getPlayer() //this only get my player
player.on('play', this.playHandler)
}
playHandler() {
const player = this.getPlayer()
if(this.props.currentChapter === this.props.playlist.length - 1) {
player.setup({ nextUpDisplay: false}) //this reload my player
}
}
How I should do that?
nextUpDisplay is a static setting. There is no way to change it after setup.
Some player configuration options can be changed after setup using player.setConfig(options). Please file a feature request to make nextUpDisplay settable via player.setConfig on github https://github.com/jwplayer/jwplayer/issues and/or customer support.
What you can do in the meantime what you can do is simply hide and show the card using CSS:
const nextUpElement = player.getContainer().querySelector('.jw-nextup-container');
if (nextUpElement) {
if (player.getPlaylistIndex() === player.getPlaylist().length - 1) {
nextUpElement.style.display = 'none';
} else {
nextUpElement.style.display = 'block';
}
}
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>
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
I'm currently working on my music blog, and I'm trying to make the widgets start when previous one finishes. I have both soundcloud and youtube widgets, but the priority is to implement this functionality for the soundcloud ones.
Each iframe has 2 class .widget &.soundcloud_widget for soundcloud and .widget & .youtube_widget for youtube. Finally, each widget gets an id "widget1", "widget2", etc... in the order of apparition.
The idea would be to get the event "SC.Widget.Events.FINISH" , to get the id of the corresponding widget, "increment" it, and then make the next one play.
Unfortunately, I'm struggling with javascript & the documentation of soundcloud, and I would really appreciate some help !
Thanks in advance
PS : here is the code that does the above, I have nothing else that is usable...
<script type="text/javascript">
function autoPlayInitiate () {
var i=1;
$("iframe[src^='https://w.soundcloud.com/']").addClass("widget soundcloud_widget");
$("iframe[src^='//www.youtube.com']").addClass("widget youtube_widget");
$('.widget').each(function(){
$(this).attr('id','widget'+i);
i++;
});
}
window.onload = autoPlayInitiate;
$(document).ready(function () {
var ScWidget = $('.soundcloud_widget');
}
</script>
So first off I think the simplest way for you to solve this problem is to pick one of the players (either youtube or soundcloud) and use there playlist features to showcase your sounds.
here is a live example of using a playlist in Sound Cloud you can play with
http://runnable.com/UuhEs3Yq2_8hAACT/embbed-soundcloud-widget-using-javascript
relevant code:
function embed (id) {
SC.oEmbed("http://soundcloud.com/" + id // user or playlist to embed
, { color: "ff0066"
, auto_play: true
, maxwidth: 500
, maxheight: 1000
, show_comments: true } // options
, document.getElementById("scWidget") // what element to attach player to
);
}
$(document).ready(
function () {
embed("dj-faze");
}
);
however if you wish to go the long route you will want to familiarize yourself with the widget API:
http://developers.soundcloud.com/docs/api/html5-widget#
the bind(eventName, listener) is what you would be most interested in
var iframeElement = document.querySelector('iframe');
var iframeElementID = iframeElement.id;
var widget = SC.Widget(iframeElement);
widget.bind(SC.Widget.Events.FINISH, function () {
alert('add code to play next song here')
});
I will try to put up a new example on runnable once the site has finished its maintenance
I am writing a Browser Plugin and need to find a way to get the current time a YouTube Video playing on YouTube using JavaScript. I have been playing around in the Chrome JavaScript Console and haven't had any luck.
It appears that the chrome API only works with embedded video players not a video that is playing on on youtube.com. One option I looked into is in the share section of a video their is an input box for the "start at:" time that contains the current time of the video. I have tried using .value and .text on this input box and they both return undefined? Does anyone have any ideas?
ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();
See the api
Update: if it didn't work, also try player.playerInfo.currentTime (codepen live example)
Depends on what you want
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.
http://code.google.com/apis/youtube/js_api_reference.html
Finally I found how to make it work on iOS (and Android too).
Actually, the whole youtube js api was broken for me if run on mobile browser.
Problem solved by creating player using new YT.Player as described in YouTube IFrame API.
Please note: only creating <iframe> from <div> placeholder works for mobile browsers at the time. If you try to use existing <iframe> in new YT.Player call, as mentioned in IFrame API, this will not work.
After player created, it's possible to use player.getCurrentTime() or player.getDuration() with player instance created.
Note: I had no luck calling this methods on player obtained with
player = document.getElementById(...) (from #JosephMarikle answer).
Only created player instance worked in mobile browsers.
Useful links:
YouTube IFrame API
YouTube JavaScript API
YouTube Player Demo
You can use Html5 Video API on youtube.com
var htmlVideoPlayer = document.getElementsByTagName('video')[0];
htmlVideoPlayer.currentTime
Note: It's not gonna work on Youtube Iframe API because Iframes are isolated. You cannot access the context of a Youtube IFrame .
In 2020, this works:
player.playerInfo.currentTime
full code:
see it live on codepen
Just FYI, There is a new iframe API for the YouTube player:
https://developers.google.com/youtube/iframe_api_reference
document.querySelector('video').currentTime
Stop at specific time youtube video and show notification box in GWD
<script>
var yid = document.getElementById("gwd-youtube_1");
var idBox = document.getElementById("box1");
pausing_function = function(event) {
var aa = setInterval(function() {
if (yid.getCurrentTime() > 8.0 && yid.getCurrentTime() < 8.1) {
yid.pause(yid);
idBox.style.opacity = 1;
console.log(yid.getCurrentTime() + "playing")
clearInterval(aa);
yid.removeEventListener("playing", pausing_function);
}
}, 100)
}
yid.addEventListener("playing", pausing_function);
var pausing_function_1 = function() {
if (yid.getCurrentTime() > 8.1) {
console.log(yid.getCurrentTime() + "pause")
// remove the event listener after you paused the playback
yid.removeEventListener("playing", pausing_function);
}
};
</script>
play video and hide notification
<script type="text/javascript" gwd-events="handlers">
window.gwd = window.gwd || {};
gwd.pauseVideo = function(event) {
var idBox = document.getElementById("box1");
idBox.style.opacity = 0;
};
</script>
<script type="text/javascript" gwd-events="registration">
// Support code for event handling in Google Web Designer
// This script block is auto-generated. Please do not edit!
gwd.actions.events.registerEventHandlers = function(event) {
gwd.actions.events.addHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
gwd.actions.events.deregisterEventHandlers = function(event) {
gwd.actions.events.removeHandler('gwd-youtube_1', 'playing', gwd.pauseVideo, false);
};
document.addEventListener("DOMContentLoaded", gwd.actions.events.registerEventHandlers);
document.addEventListener("unload", gwd.actions.events.deregisterEventHandlers);
</script>