I will have a large number of youtube videos active on a single webpage, presumably using the embed code from YouTube. (normal and/or iFrame)
I want the user only able to play one at a time. if one is running and another is played i need all other/s to stop/pause.
Is there a way to globally control all players in that way? Maybe with MooTools?
You can do this with the YouTube iFrame API
Basically you just need to set up a YT.Player instance for each video and set up an onStateChange event that stops the other player(s) if the given video starts.
e.g.
player1 = new YT.Player('player1', {
events: {
'onStateChange': function(e) {
if(e.data == YT.PlayerState.PLAYING) player2.stopVideo(); }
}
});
If you've got a lot of players, setting up a loop shouldn't be too tricky. 2 player demo available at http://torontoprogrammer.ca/demos/multiyoutube/
Related
I think I need a script that will "get" all the playing HTML5 audio controls and "pause" them apart from the one the user clicks play on. I have seen and can handle simple play, pause, stop with just one audio controls but my skills fall way short of coding something to do what I'm after with multiples. audio controls is a neat solution and integrates well with my current design, I just need help making it work properly. The use case:
https://aberaeronskies.com/ page loads and nothing plays which is desired, user clicks play on a audio controls tag and the track snippet plays which is desired. User clicks on another one (there are 14) and it starts to play, trouble is, the first one is still playing which is not desired; one could click on all of them and they would all play!
The requirement is for a script or a call or whatever (I'm no coder, just doing this as freebie for a mate) that when a user clicks play on any one of the 14 tracks it pauses all other playing tracks.
I thought this was it: Pause all other players besides activated one. jQuery audio plugin for <audio> element and Play selected audio while pausing/resetting others but I'cant make them work.
It may be that this cannot be done and I need to rethink the whole presentation of multiple tracks and if so, further advice on where to look (in addition to above) would also be useful.
Thanks very much...
Ah...
This works
var curPlaying;
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
window.$_currentlyPlaying.pause();
}
window.$_currentlyPlaying = evt.target;
}, true);
$(function () {
$(".playback").click(function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
if (curPlaying) {
$("audio", "#" + curPlaying)[0].pause();
}
song.play();
curPlaying = $(this).parent()[0].id;
} else {
song.pause();
curPlaying = null;
}
});
});
While having a video play through my local website, it's audio and video become de-synced after a while, like 40 minutes or so, also if I pause the video and then un pause it... I don't know if this is a problem with html 5, my browser, computer or what? But my audio is around 1 second ahead of the video, it's very noticeable... here's my code for the video in case it matters:
echo "<video class=\"videoContainer\" controls autoplay>
<source src=\"$movieUrl\" type=\"video/mp4\">
</video>";
I couldn't find any solution for this, in-fact... I couldn't find anyone with this same problem!
P.S Refreshing the page fixes the issue but I don't want to do that every time the video de-syncs... Also I don't have de-sync issues on YouTube etc...
There's currently no good API for synchronizing things with the timeline of a video, for instance captions or infoboxes. The spec has had "cue ranges" for this purpose earlier (which even earlier were "cue points"); it is expected that something similar will be added in the future, including support for declarative captions.
However, for now, you will have to either use a timer and read currentTime, or listen for timeupdate and read currentTime. timeupdate is fired at 15 to 250 ms intervals while the video is playing, unless the previous event handler for timeupdate is still running, in which case the browser should skip firing another event. Opera currently always fires it at 250 ms intervals while the video is playing, while Firefox currently fires it once per rendered frame. The idea is to allow the event to be fired at greater intervals if the system load increases, which could save battery life on a handheld device or keep things responsive in a heavy application. The bottom line is that you should not rely on the interval being the same over time or between browsers or devices.
Let's say you want to show a div element between the times 3s and 7s of the video; you could do it like this:
Hello world! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); video.ontimeupdate = function(e) { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime
The hidden attribute indicates that the element is not relevant and should be hidden. This is not supported in browsers yet, so you have to hide it with CSS:
*[hidden] { display:none }
The data-starttime and data-endtime attributes are custom data-* attributes that HTML5 allows to be placed on any element. It's great for including data that you want to read with script, instead of abusing the class or title atributes. HTML5 also has a convenience API for data-* attributes, but it's not supported in browsers yet, so we have to use getAttribute a little longer.
The above would look like this using a timer instead:
Hello world! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); setInterval(function() { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime
This will run every 100 ms. Whether you should use setInterval or timeupdate depends on what you're doing and whether you're ok with the interval changing. Note that the setInterval example above also runs when the video is not playing, which the timeupdate example doesn't. It's possible to clear the interval with clearInterval when the video stops playing and setting it again when it starts playing, though.
If you want to synchronize something with the time playback starts, or after a seek, you should listen for playing and seeked — not play or seeking. The former indicate when playback has actually started and a seek has finished, respectively, while the latter indicate that playback or seeking has just been requested, but could take some time before it actually occurs.
I am using Projekktor Video Player to show videos for one of my web projects.
Link to player site
The player is good with flash fallback for older browsers.
There is one problem with this player (for some users this might not be a problem) but player script has over-ridden mouse right click function to show their own context menu.
I have tried to search this in their script file but did not succeed.
Can anyone help me out in this situation.
Link to my one of video pages
The context-menu is a implemented as a player plugin. You can easily deactivate it by overwriting the "plugins" config defaults, e.g.:
projekktor('<yourid>', {
... your config ...
plugins: ['Display', 'Controlbar']
});
That´s it. The mouse events however are fetched anyway. To get them again you need to add a listener to the player itself, e.g.:
var myClick = function(evt) {
console.log(evt);
}
projekktor('<yourstuff>', {
... your config ...
plugins: ['Display', 'Controlbar']
}, function(player) {
player.addListener('mousedown', myClick);
});
... or bind you own one to the player container.
I am wondering how I make get an audio file to play 'continuously' on all pages. So if the audio file has played for 20 seconds, then when navigating on another page it will continue from where it left off. I also am trying to get the volume to decrease after navigating away from my home page. Any tips or advice would me appreciated! Thanks =D
<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
Yes, it is possible. try this:
<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
If you really navigate to another page, then you will not get really continuous playback.
There are three common approaches:
open your audio player in a popup
frames: one main frame for your page to display in, a small frame for the audio player
not really navigating to other pages, but do everything with AJAX and thereby not actually reloading the page, but only changing parts of the document structure dynamically; maybe adding real link functionality including changing the address bar by using the HTML5 History API
All approaches have their pros/cons. Popup is maybe the easiest to implement, and has the least drawbacks (compared to frames).
I also am trying to get the volume to decrease after navigating away from my home page.
Then catch any clicks on your “home” link/button, and call the volume method of the audio element with a parameter value ranging from 0 to 1 to set the volume.
well .. a clean and neat way to do it , is the way that soundcloud.com and spoify.com made through ajaxifing all the pages
fix a page and change the pages content through ajax ,and change the url as well to give the user the illusion of navigating
this is not the easiest or fastest solution ,but it's the cleanest one ..far away from the fear of browsers incompatibilities
Here is my scenario:
I am building a "kiosk" application in safari with 2 videos, one acting as a "screensaver" and the other is a supplementary video. The SS is looping fine via: (done on body onload="init()")
var myVideo = document.getElementById('screensaver');
myVideo.addEventListener('ended', playVideo, false);
function playVideo(){
var myVideo = document.getElementById('screensaver');
myVideo.play();
}
When the user taps the screen during the SS, it fades out $('#screensaver').fadeOut(1000); and the user is presented a question with a button to play the next video.
When the second video is done via:
$('#presentation').bind('ended', function(){
$(this).fadeOut(1000, function(){
$('#swapVideo').show(); //Overlay for user interaction
$('#screensaver').fadeIn(1000);
$('#screensaver').get(0).play();
});
});
The SS shows up, plays, but no longer loops. Are eventListeners lost when the display is set to none?
The same thing happens when I try to play the second video again. The 'ended' eventListener seems to be lost...
I believe that iOS ignores .play(). Apple believes it's best to prevent sites from automatically playing content, which could potentially eat up someone's data plan or create undesirable actions on iOS.
On iOS, .play() can only executed directly from a user interaction.
Documentation
As for your question, event listeners are not unbound if you change the display property.
Fiddle
$('.container').on('custom', function (evt) {
$(this).toggle();
});