I'm looking for a way for my users to take a video (defaulting to front facing camera, but with the ability to switch) lasting 2 seconds, display that video immediately and have it loop indefinitely (no controls displayed). Essentially mimicking a 2 second gif. I would like to do this in app so they can see the video before posting, and potentially retake. Any ideas? I've found some functionality here: https://developer.apple.com/library/ios/documentation/MediaPlayer/Reference/MPMoviePlayerController_Class/index.html#//apple_ref/c/tdef/MPMovieControlStyle but it doesn't seem to address the entire problem set.
Checkout this guide from Apple:
Using Video
I have been successfully running the example, Creating a Video Application: http://www.samsungdforum.com/Guide/tut00055/index.html
What I am trying to figure out is how I can smoothly transition from one video to another using a cross fade or any other transition. In this example you are forced to call stop on the player before loading up another video causing a black flash in between.
I've tried going down the path of creating two Video instance one behind eachother and using JQuery to fade out/fade in but I am having a lot of trouble. it appears jquery fades don't even apply to the video element. Also, Is there some kind of limitation with playing two videos at the same time? Is there a better way to go about this? Would it be better to look into doing this using WebGl instead?
Thanks!
If you use Samsung API you can play only one video at time. I can't find documentation page at the moment.
You can try different approaches:
use html5 <video> tag, maybe browser will be capable of playing 2
of them.
use screenshot from second video, and fadeOut it over video
before stopping first video and starting next.
you can recode your videos in 1 continious video in any video editing software. If you need to switch between videos, you can jump to position of next video start.
I am embedding a YouTube video on my page and am able to detect when the user clicks Play and Pause on the video.
I need to also be able to detect when the user does a seek / jumps to a particular part of the video (as opposed to letting it just play to that point). How do I do this?
I am using the Youtube iframe api: https://developers.google.com/youtube/iframe_api_reference
I am able to hack around this by starting a timer and checking every second if the video played by more than a second and if so considering it as a seek. However, it seems that there should be an easier way of doing this.
I think we all run into this as a user as well. For example, when I'm playing a Youtube video, and the connection is slow, it will not play until enough content has been buffered. But sometimes even after the content arrived it won't resume playing.
Most of the times when this happens I just click once somewhere on the player bar and it will resume.
Now, I think I've run into this situation while programming with HTML5 Audio elements and Youtube APIs. Most of the times they work well, but when the connection is spotty, it will just stop and never resume even after content has arrived. Is there a way to get around this problem? Thank you!
HTML5 Media Elements trigger a lot of useful events that might help you solve this problem. I would consider starting a timer when the waiting event fires (which indicates buffering) then periodically attempt to resume playing the track until canplay fires.
You could also call load instead of play then wait for canplaythrough fires (which indicates that media can play continuously without needing to pause for buffering).
Of course it's possible that the YouTube API prevents these events from propagating to the containing page, but it's worth a try.
I'm having a small web app, which plays really short sound bits on the click of several buttons. It explicitly targets mobile Safari on iOS (iPad).
After reading here and elsewhere about the several "shortcomings" of HTML5 audio in this context on mobile Safari and trying a few "hacks" and tricks, I'm stuck with a situation where Safari seems simply (for the lack of a better word) broken:
I can play sound A (it takes a long time for it to start — I'm assuming it's downlading [again]?) on the click of button A. After that, clicking on button B will immediately play the sound A again. Same for button C. In some cases it will play a different sound, sometimes even the right one. But mostly sound A. The format in use was .aiff, is now .m4a .
After writing a few tiny versions myself, I decided to go with the Buzz library to handle the sound loading/playing/etc..
Funnily enough, their demo includes a game, which does pretty much exactly what I need and triggers the same faulty behavior. I even ended up in a situation where any audio player in mobile Safari in any tab would play a certain sound out of the Buzz demo game (!).
I was hoping a cache manifest might help overcome Apples preloading limitations and force the app to play the sound right after hitting the button in offline mode. But after confirming that the whole app had been cached, I can't play/hear any sound in offline mode.
Has anyone managed to get something like this to work somehow? (— Having seen how Apple handles certain things, I' don't expect much response, though… )
Update 1:
The example in this answer causes the same effect: How to synthesize audio using HTML5/Javascript on iPad
Update 2:
Updating iOS (and so Safari) seems to resolve the audio bug. The cache manifest doesn't seem to effect audio files, though. These files are just not available at all.
After removing the cache manifest the app works okay, but adding it to the "home screen" and reloading it prevents the audio from playing as well.
I wish I could tell you there's a magic formula to get all your html5 media to work perfectly, but there isn't. Mobile support for HTML5 audio/video is pretty poor right now; much further behind than its desktop predecesors. To make matters worse, each of the different platforms handle it differently and most of them only support it in semi-recent versions.
However, there are some tricks you can employ to get media files to work correctly in mobile Safari. In order to explain them, you'll need to understand some of its shortcomings.
1) You can't load multiple audio / video files
Its been my experience that the browser will only load one file at a time. If you play one file, go and play another, and then come back and it'll just load that file all over again. And, although I didn't try it myself, I don't believe a cache manifest will help you here.
What I had to do is combine all my audio files into one large audio file. Then, depending on which audio track was requested, I'd move the play position to the appropriate starting position and play that track. Then, I'd use a setInterval to examine the playback every few milliseconds to determine if the current play position hit the end of the track. Once it did, I paused it. Pluis, I gave myself a few seconds (2-3) between each track, just in case the phone's CPU was under a lot of load and checked the feed a little too late.
2) You can't auto-play audio / video files
Apple built into their HTML5 media tag technology the limitation that these tracks would only load and play in response to a user click event. That way, developers couldn't auto-play annoying tracks when you went to their websites.
When I was using audio/video tags, I was trying to build a rich media advertisement. So I hooked my audio/tracks loading to the banner click event, when you click a banner and expand the advertisement.
What I'd suggest you should do is have a small lightbox popup come up, asking the user if they want to turn on/off sound. You can attach your load functions to the click event of that popup box, regardless if the user turns the sound on or off.
Personally, I didn't have much luck using the load() function. I'd run that function to load the audio and then click play and it would just load it again. It could have always been that I just didn't do it right, so feel free to prove me wrong and get that working. What did is I told the track to play, so that way it would start loading, and then I'd use a setInterval to see if the current play time incremented just a few milliseconds. Once I noticed that it started to play the track, I'd immediately pause it.
3) Audio/Video tags are only supported in iOS 4.0 and higher
There's no trick to getting around this. Its just the facts.
Here's a few sites that helped when when I was developing with audio/video tags:
http://www.w3.org/wiki/HTML/Elements/video
http://dev.w3.org/html5/spec-author-view/video.html#media-elements
Good luck!