JS to Play video in native player on iOS - javascript

I'm creating the responsive version of my website. There are a couple of videos.
At the moment, I use jwPlayer. That's fine on the full-size version and on iPads.
On iPhone, I get the 2 step behavior (Showing the video player just with the poster, and opening the native video player when launching the video.)
Is there a way to automatically (with some Javascript perhaps) load the video on the native video player? So JWplayer shouldn't even start at all...
In the end, User Experience would be : clicking on a thumbnail ->iOs video player ->back to thumbnails.
Is this possible?

Related

JS alert is messing up HTML5 video

I have an mp4 video on my site that I play with $("#movie").get(0).play(). That works fine.
However, if I do alert("anything"); and then try playing the movie, the movie only advances a few frames (I get sound too). Then it freezes. The video controls still show "pause" being an option, so the player still thinks it's playing. I have to refresh the screen, and avoid alert()ing anything in order to play the whole video. How can I get around this problem?
I'm on the newest version of Chrome on a Macbook Pro with the newest Yosemite.

How to play an inline video in Phonegap on Android without user interaction?

I'm creating a Phonegap application with embedded video using the HTML5 tag.
The video loads and plays fine. The only problem is that it requires user interaction. The play script runs fine when I trigger it by clicking a link, but will not work when run using setTimeOut. Is there a way to bypass this limitation?
It only needs to work on one device, and the devices is rooted. So hacks are also welcome ;-)
I don't want to play the video fullscreen, so I cannot use the video plugin.
Android 4.2.2, Phonegap 3.2

How mobile YouTube page autoplay videos on iOS?

I'm trying to get it understand but after 2 days of digging the code I thought that I will post my issue here...
According to Apple's documentation, autoplaying videos on iOS devices cannot be done without user interaction first (e.g. tap on video). Despite that, mobile YouTube (m.youtube.com) is able to autoplay its videos just after loading a page with video.
Does anyone know how they are doing it?
PS. I've checked all available JS/HTML techniques of autoplaying videos on website on iOS (e.g. iframe, fake click, triggering touch event on video, fetching video with XHR).
I believe that youtube.com is a single page app. So when the user clicks on the video from the list view the page is not loading and their javascript uses that initial click, that leads to the video page, as the click that starts the video. It's not actually autoplaying, it's just a trick.

Synchronising SoundCloud audio and Vimeo/Youtube video playing together

Alright, I'm working on one project which involves html5 audio, in addition to that a video is shown while audio is playing (Just video, no controls etc). Video is a visualisation (sometimes called equaliser) of audio that is playing, made beforehand in adobe after effects. both files (video and audio) are same length e.g. 3 min 20 sec. I need a way to synchronise both, as video might load slower than audio or vice versa. Therefore I need to make it so that on computers with slow internet connection if video stops loading at some point and starts buffering I need to pause audio, and once video resumes start audio again, both at exactly same time, also when user skips to a certain bit in a song, video should skip to that bit as well, I'll use custom api made player for video so there would be no controls on video, only on soundcloud player.
It is almost as if I was using soundcloud custom player to control video. I'm struggling to find any resources on this anywhere, and would really like to know how to achieve this functionality.
javascript or jQuery solutions are preferable.
What makes it even more complicated is that I use SoundCloud's custom player to play songs:
http://developers.soundcloud.com/docs/custom-player#
And upload videos to Vimeo/YouTube (all done to decrease load on a website)
Check here: http://html5demos.com/two-videos
The sample is for syncing 2 videos, but with some hacking probably you can manage to sync audio and video.
Second, don't use Custom player, make your own HTML5 Audio element, check the SoundCloud API there is a property stream_url for every streamable track on soundcloud, just put that URL as source on your html5 audio tag.
Keep on mind that this will not work on Firefox and Opera for some time. Firefox will integrate native mp3 support in v20, not sure about opera

Greasemonkey script to pause video playback on non-active tabs

Often when browsing in Firefox, I'll right click on a link, and open it in a separate tab to view later, and go on reading the current page. When the link is a Youtube script, however, playback starts immediately even though the tab isn't active. Other video players (like fora.tv and TED.com) don't start playback until you activate that tab.
Is there a greasemonkey script that I can use to make sure that videos (and especially Youtube videos) are paused unless their tab is active?
I found two options:
"Youtube Alternate Video Player" (greasemonkey script)
http://userscripts.org/scripts/show/13955
Script Summary:
Replaces the youtube flash video player with FlowPlayer flash video player.
replaces the youtube player
no hd
no 16:9
Firefox Add-On "TubeStop"
http://www.chrisfinke.com/addons/tubestop/
disables the autoplay on YouTube videos
does it every time (even if the tab is active)
I will keep the TubeStop addon for now.
I think Youtube now does this by default (only playing a video when the tab the video is in is activated)

Categories

Resources