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
Related
my friends and I are making a website that acts like a radio station called Musare with playlists of YouTube videos that play after each other.
Recently Chrome introduced a new 'feature' that automatically disables autoplaying of videos in background tabs with no option to turn this off. This breaks our site because users don't want to keep going back to the site to start a song. This also broke other big sites, like YouTube playlists, Facebook chat notification sound and a lot of music sharing sites.
By now, a lot of sites have found solutions to bypass this, like dubtrack.fm, YouTube, Facebook and probably some other sites as well.
There is someone working on making an option for it at https://codereview.chromium.org/1414853003/, but that might take weeks or even months for it to be in the main Google Chrome.
If anyone knows how to bypass this, please let me know.
Thanks in advance :)
Already tried:
Starting another video before the current one ends - no success
Messing around with the Player Variables - no success
Other things probably - no success
Extra notes:
We are using the YouTube API. We use YT.Player and the youtubePlayer.loadVideoById(id)
SoundCloud streaming works fine with SC.Stream.
The source code for our project is at https://github.com/Musare/Musare
So I have found out how to bypass it finally, after many hours of trying and researching.
If you just initialize the iframe player of YouTube by using the YT.Player constructor, you can then just use the player variable and use yourPlayerVariable.loadVideoById(id).
You have to first go to the tab for it to start, but after that it will be able to load and play video's without you having to go back to the tab. If you remove and re-add the iframe, you will have to go back for it to start again.
I have been using the new Myspace for quite some time now, and I am really astonished on their design. It is really elegant and they have taken advantage of many HTML5 features. However there is one thing that, to me, outshines any other functionality and that is how you could navigate through myspace without having to stop the music playback. I noticed this a few days ago while listening to music, I changed the page and the music player would not reload. It would stay on its fixed position and the music would still play, even while the page was refreshing. And even if you log out, when you log back in the music player would play last song you were listening at exactly the time you left it on.
Now long story short, my question is: How do they achieve this? I am guessing they are saving the current track position in a cookie variable or in the local storage as it is playing, but what about the music player? How come it does not stop playing the song when navigating through myspace? Are they using any html5 feature to do this?
*note: I was inspecting their code because I thought they were using the jquery.load() function, but did not find any trace of that
Thanks to the insight given by #putvande, this Myspace feature is achieved using the HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info
since a few days there seems to be a problem with a audio player script (flash + javascript) on one of our pages that NEVER occured before and I changed absolutely nothing in the code (it has worked for a few years now) that could cause this issue.
We bought the audio player script a few years ago, and again, until a few days ago, it worked perfectly.
The error also behaves very strange. Let me explain...:
The page is www.imatunes.de . You can see these small audio players on each article there.
Feel free to check out the code, got nothing to hide there.
My coworkers told me, that suddenly nothing happened if they clicked on the "Play" buttons. Normally, the script should start the flash player, which plays an audio file.
Now comes the "somehow" strange part:
My coworkers are all using Google Chrome. When they open the page in Chrome and click on a "Play" button, the JavaScript console throws the following error:
"Error on calling method on NPObject".
Googling that error says it has to do something with actionscript, cross-domain policies and such. But the error will get stranger...:
I'm using Firefox, and there it works FLAWLESS. But it also works on MY Google Chrome flawless, so it's very hard to debug (that's why I'm here to ask).
My coworkers also tried it on their home PCs, also running Google Chrome and such, and it also doesn't work there.
Now comes the "very" strange part:
When they get this error and reload the page via the browser controls (F5 or the reload button), it still won't work.
But if they browse around the page or just click on the logo in the header (which basically takes them to the home page again), the script magically works.
And on every other page except for the home page, it will work on first try.
As I said before, this started a few days ago - before that, everything worked just fine. And I really didn't change anything in the code.
So regarding the fact that it works after they browse around the page and return to the home page, it somehow seems like some sort of caching error.
I really don't know how I could debug this, or what to do.
Thank your for every possible help in advance!
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.
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? (: