This is an interesting and weird problem, and I'm really not sure what's going on here. Maybe someone can offer me some insight. I have a simple form with a list of songs from both youtube and soundcloud. When the user clicks on one of the links(songs), it sends an ajax call to a script containing the essential ingredients of either a custom html5 youtube player (based on the Tubeplayer plugin), or a custom html5 soundcloud player (based on soundcloud's custom sc-player plugin).
The ajax calls work great. When the user clicks a track in the list, the appropriate plugin pops into the specified div and begins to play the song or video. There is a really wierd issue I'm having however. When I go from a youtube video to a soundcloud song, it works great. The youtube plugin is completely replaced by the soundcloud plugin. Playback on youtube stops and playback on soundcloud begins. But when a soundcloud song is playing and I click a youtube track in the list, the youtube plugin shows up and begins to play, but the soundcloud track continues to play also, even though the content in the div has been completely replaced with the youtube plugin via ajax.
I even tried taking the calls to the soundcloud plugin's js files and putting them into the script that the ajax calls to, so that even they would be replaced when the youtube plugin is called, but I'm still having the issue. Any idea as to what might be going on here? I'm really not very knowledgeable about jquery. Thanks in advance!!
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 like how SoundCloud and Vimeo have their various tabs synchronized so as soon as you start playing something in one tab, the other tabs pause. What's more interesting is that this only works on SoundCloud when two instances of the website are open, but for Vimeo this happens even between a Vimeo website tab (with the video playing) and a Vimeo video embedded on say The Verge (http://www.theverge.com/2014/12/22/7433775/watch-the-styles-of-your-favorite-directors-recreated-with-stock). However when the Vimeo video is embedded on Facebook (when I had shared it) it doesn't work.
I was wondering if one of the techniques mentioned on Javascript: sharing data between tabs is used here and if yes, why doesn't it work when the Vimeo video is embedded on Facebook and I have another tab playing Vimeo video.
So, I just inspected and indeed both SoundCloud and Vimeo use a localStorage solution. Vimeo has a key from https://f.vimeocdn.com called sync_active which updates to whichever video is playing currently or last played (if all the videos are paused). They have this key even when a Vimeo video is embedded on The Verge and hence this works there as well. However in the case of Facebook, Vimeo doesn't have any localStorage and hence no synchronization happens.
In the case of SoundCloud, it also has a key from https://soundcloud.com called V2::local::inst_<id> which gets updated to whichever tab is playing. They don't have this localStorage even when SoundCloud is embedded on The Verge and hence this only works between various SoundCloud website tabs.
I am using version 4 of this player and want to be able to interact with it as it iterates through each piece of media in the playlist. When a playlist is loaded into the player with XML, I want to get the ID from the media that's currently playing then dynamically show the related info to the user.
There is not much documentation on this version and my JavaScript skills are not that great.
Is what I want to do even possible with this version of JW Player? If it is, can someone either point me to an example that would incorporate this functionality or show me how this can be accomplished?
*Situation is -*I have to design a webpage that works on both desktop and on mobile devices, that plays an embeded youtube video (not autostarted) which then i can use interact with the video to get the play state etc (using this to count the total time watched, excluding pause/buffer/stop time)
I've managed to build the website using both the IFrame API and Javascript API from Youtube.
*However the problem is-*With Javascript API, the player on the desktop works and the view gets counted too but it doesnt work when i view it on a mobile device. The place where it should show the video (the div tag) doesnt react.
With the IFrame API, everything works in terms of functionality but when i press play on the video, the views do not get counted - accessed from both desktop and mobile. I've tested the viewcount several times, with different IP etc but while javascript API web gets counted instantly, IFrame API web is still not getting counted..
Does anyone have any suggestion to this problem?
Just to remind you, the crucial aspect of the webpage that i need are:
Embeded Youtube player
Being able to interact with the player (e.g. getState() or getDuration())
Website fully functional with mobile access
Valid view count
Thank you all in advance!! :)
Are you sure that the views are really being counted via the javascript api? I have always read that view counts only are considered valid when initiated using the actual YT play button. Meaning you can't initiate play via any API call and have the view count.
Here is a a somewhat dated blog post from Google/Youtube team explaining - https://groups.google.com/forum/#!msg/youtube-api-gdata/7SsbvOJMWL0/rBCBqnFaxRgJ
I'm trying to find something that says this has changed but so far no luck.
** EDIT **
So I went back to the iFrame and Javascript API pages and if you do a search for 'view count' the first piece of content you'll find is a line stating --
"Note: A playback only counts toward a video's official view count if it is initiated via a native play button in the player."
Re-reading your post I'm not sure if you are using the API's to play the video or just to get data from its current state. If you are using it to actually initiate play then the view counts are not actually being counted. If you are seeing something different I'd love to see and learn from it.
So I've run into some problems implementing YouTube videos in popovers. I can get the YouTube video to play just fine, but when the user clicks off the popover (destroying it), the sound continues playing. My solution for this was to have the webview that was displaying the youtube video load a blank html string in the viewDidDisappear method, and this works great.
However, I am now running into an issue where if the user pushes the fullscreen button on the youtube video, the youtube video does indeed go fullscreen, but the popover is in front of it. This is annoying, but the user could normally just click some other portion of the screen and it goes away. I would be willing to live with this. Except of course.....that calls viewDidDisappear, loading nothing into the html, blowing up my entire application.
I was wondering if anyone knew how to load some javascript in the webview that could control the youtube video. In this way, I could have viedDidDiappear call the pause, so the sound would not continue playing when the popover is dismissed, and the youtube video would not blow up in full screen.
This is not the ideal solution (since the popover still sits in the way in full screen), but I will take it for now. If anyone could help with the javascript injection I would need, or suggest an even better solution, I would greatly appreciate it.