Javascript pause all other Vimeo Videos - javascript

I would like to have it so that when I play one Vimeo video the others on the page will be paused.
I tried using the froogaloop API but had little help.
Using the current code I got it working so that when I switch tabs I can pause all videos. Now I want to make it so that when I play one video, the others pause.
Right now the event listeners for detecting 'play' are not working correctly. I believe that is because they need to be in the $(document).ready() but they are stuck in the first <script> area, encapsulated in $(function(){ }) which I believe is preventing it from interacting.
The code can be found here: www.proclinica.com/preview
This is the code I modified to control the vimeo and you can see the event listeners work here: http://jsfiddle.net/GxwEX/5/
Can someone at least help me get the event listeners to work on the proclinica website?

First of all, I'm not exactly sure what you're trying to do that isn't working. In your code (on your site), you have this:
$('.client_logo').click(function() {
post('pause');
});
When I click one of the logo's, any running videos seem to pause just fine.
If you're trying to pause all playing videos when another is started by the user; I don't think I've seen anywhere in your code (either in the JSFiddle or on the site) where you're trying to do that. If you have; can you show us what you've tried to far?
And finally, just to answer at least one part of your question... $(...) is actually just a nice shortcut for $(document).ready(...).
Edit:
From the documentation:
If you're embedding and controlling multiple players on a page, you can give each player a player_id to tell them apart:
http://player.vimeo.com/video/VIDEO_ID?api=1&player_id=vimeoplayer
If you've set it, this player_id is passed along to any event listeners, like so:
function onMessageReceived(e) {
var data = JSON.parse(e.data);
var player_id = e.player_id;
// Do stuff
}
You can use this to identify which video was started, and restart it after you've paused the others.

Related

How do I fix an embedded YouTube video in an iframe when it's not playing in a child window?

I'm currently making a web game. Part of the game is your profile, where you can use some HTML enabled tools to make a cool character-based description. In the config menu, you can put in an audio link and, for obvious security reasons, I take that and turn it into an iframe rather than let them do that themselves.
Bla-bla-bla, you can toggle autoplaying on and off, cool- problem is, I'm experiencing some weird issues with the iframe's autoplay functionality in the first place.
See, when I hit the button to open this subwindow, it compiles the link into an iframe with an autoplay tag and everything and even plays perfectly, too, which is great! Buuut if I listen to it for more than ~5-10 seconds, then close & reopen the subwindow, it'll start paused. Doesn't matter if it's hidden or not. Closing & reopening immediately doesn't encounter this issue at all.
I'm making the subwindow via window.open. It's a new window each time, if that matters. Here's the code I'm using to generate the iframe:
function openWindow(html, charName, audio) {
if (VS.World.getClients()[0].profile) {
VS.World.getClients()[0].profile.close();
}
var newWindow = window.open("", charName+"'s Profile", "height=600,width=900,status=no,toolbar=no,menubar=no,location=no");
newWindow.document.write(html);
if (audio) {
var audioFrame = newWindow.document.createElement("iframe")
audioFrame.width = 400
audioFrame.height = 400
audioFrame.id = "audioiframe"
audioFrame.style = "display: none;"
audioFrame.src = `${audio.replace("watch?v=","embed/")}?autoplay=1`
audioFrame.allow = "autoplay; accelerometer; encrypted-media; gyroscope; picture-in-picture"
audioFrame.frameBorder = "0"
var att = newWindow.document.createAttribute("allowfullscreen")
audioFrame.setAttributeNode(att)
newWindow.document.body.appendChild(audioFrame)
}
newWindow.document.title = charName+"'s Profile"
var x = newWindow.document.getElementById("audioiframe")
newWindow.document.body.removeChild(newWindow.document.getElementById("audioiframe"))
newWindow.document.body.appendChild(x)
VS.World.getClients()[0].profile = newWindow;
}
If it helps, everything looks exactly as expected in the subwindow. And if it's an issue- or the issue- making the video visible isn't possible here, though as I said earlier, doing so doesn't/didn't help the problem at hand. Or change it, even.
I tried this via document.write as well. The latter 'removeChild', 'appendChild' nonsense was just to see if I could fix it, since editing the HTML in the console and readding the iframe there works every time.
EDIT: Also worth mentioning I'm doing this all on my localhost server, haven't tried on the real deal yet.
Alright, I finally figured this out after almost twelve hours of messing with it.
Basically, YouTube's API won't let you play videos until the parent window has been interacted with. This makes sense, it's just also not listed on most of the documentation I could find since (I'm assuming here) you're almost always going to have user focus on whatever window you're trying to play a video on.
Anyway, I've no problems with complying with this and my players will probably even appreciate it since blasting music can be annoying at times.
If anyone is experiencing this in the future, my fix was simple:
If the user hasn't interacted with the child page yet and you try to play the video, it'll set the video's playstate to buffering (3) then to unstarted (-1).
So, we try to play the video when the player is loaded (under onPlayerReady).
In the same event function, we establish an interval (setInterval in JS, in my case) that repeatedly checks if the player's state is -1 (unstarted).
If it is, we try to play the video once per interval run until the child window is closed orrr-
Until the player's state changes to 1, in which case we know the page has been clicked, the video is playing, and we can safely clear the interval and stop caring.
Best of luck to future coders!

Audio is unable to play via javascript on some mobile browsers

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code
var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});
It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer.
Thanks in advance
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.
You can't unless there has been user interaction.
Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.

Youtube onPlayerReady does not always run

I'm trying to implement Youtube's video player on [this][1] page.
I wanted the video player to play in a lightbox when a link was clicked on the page, or to pop up when you linked to the video ([example link][2]). I'm "mostly" happy with how it's working. The things that I am having issues with are these two separate things.
1) On some computers (not browser specific), sometimes (not always) the onPlayerReady (event) function will not run. The code for the pop-up is inside this function, so the video doesn't play. The only common factor I can find is that 100% of the time it works when you refresh the page.
2) When you click a link before the page is finished loading, the video player loads, however the video itself is not loaded. I assume the loadVideoById function isn't running. I'm not sure how to stop people from making this mistake. Again, it works perfectly if you close the player and reopen it.
When you visit from a link the page refreshes to a url that doesn't include the anchor in order to keep people from getting stranded on the linked page. This is not an error.
I'm not sure what you need to see since there is a live demo, so I'm not going to clutter this up by including a bunch of stuff you don't need. I will instead respond or edit with whatever code you need to see.
If you find any other glaring errors please let me know.
EDIT: The community was apparently helpless to even respond to my question. I worked around the problem using a different process so the question is no longer applicable. I'm disappointed in this community that came together to critique and edit my question, but had not a single suggestion for me.
EDIT2: Links Removed

Html5 - Callback when media is ready on iPad wont work

I'm trying to add a callback to a HTML5 audio element on an iPad.
I added an eventlistener to the element, the myOtherThing() starts but there is no sound. If I pause and the play the sound again the audio starts. This works in Chrome. Does anyone have an idea how I can do this?
myAudioElement.src = "path_to_file";
addEventListener("canplay", function(){
myAudioElement.play();
myOtherThing.start();
});
SOLVED
Just wanted to share my solution here, just in case someone else needs it. As far as I understand the iPad does not trigger any events without user interactions. So to be able to use "canply", "playing" and all the other events you need to use the built in media controller. Once you press play in that controller, the events gets triggered. After that you can use your custom interface.
You need to tell Safari to begin loading the file. Plus, the canplay event isn't supported on iOS. Just call play immediately after calling load.
myAudioElement.src = "path_to_file";
myAudioElement.load(); // Start loading the audio
myAudioElement.play();

Mute YouTube sound in Delphi TWebBrowser

I'm coding a small Video Previewing tool in Delphi 2010, but I want to mute the videos programmatically, because as I said, it's for previews.
I've tried several versions of this code, but it always results in a script error, and in the end it's unable to do it.
WebBrowser1.ControlInterface.Document.QueryInterface(IHtmlDocument2, doc);
doc.parentWindow.execScript( 'document.getElementById("movie_player").mute()', 'javascript' );
Also tried to wait a little longer for the control to complete browsing, but still nothing.
Try to call your code in TWebBrowser's OnDocumentComplete event. This event is fired when the document inside is fully loaded, so the object, if it's expected to be there, is already downloaded and is present. Without showing of your JavaScript code I can't tell you more.
But I would do it differently. I would implement code like this one directly into your navigated web page. It can mute the sound immediately in the onYouTubePlayerReady event handler what means immediately when the YouTube player is fully loaded. It's better than call the function later on because it may produce a short sound burst because of some delay between the TWebBrowser's navigation completion and execution of your code.
reference to youtube API's http://code.google.com/apis/youtube/js_api_reference.html
I believe that at the time you're trying to mute the video, the "document.getElementById("movie_player")" fails.
try to call it like setTimeout( 'document.getElementById("movie_player")', 10000 ); where 10000 is 10 seconds, or even longer, probably the player needs a couple of seconds to be downloaded.
I would also give it a try in different browsers to see if it's actually something that doesn't work as expected in TWebBrowser.
EDIT
I would also give "VLC" a go, it can play swf files locally and remotely, there are interfaces for the VLC libraries, so why not? (:

Categories

Resources