Smooth crossfade/transition between two videos? - transitions

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.

Related

Cannot replay YouTube video on mobile twice when rel=0

The rel parameter in YouTube API dictates whether or not related videos are shown at the end. When rel=0 the video reverts back to the thumbnail with a play button.
However on mobile (tested on iPhone / iPad / Fire Tablet) when the video goes back to the thumbnail it cannot be played a second time. It just does nothing.
I reported the issue to Google but nothing yet after a few days.
I had to resort to destroying the video and recreating it but this makes for a kind of nasty flickering.
My experience with YouTube issues is they never seem to end up fixing anything related to iOS - so I was wondering if there was any other kind of trick to prevent this.
Test page
The trouble with refreshing a webpage at a specific interval is that you dont know exactly when the video ends so you need to develop a method which the video player sends a signal when the video ends, which would then start the script to refresh the page. Otherwise you end up restarting it in the middle of the video. so personally, I would not even mess with refreshing the page. For Audio players it works ok because audio is smaller and streams more quicker. Video dont.... they always stop to buffer.
So YouTube API uses "Events" and "Listeners", so in particular, you need to design around the Event: "onStateChange".
When onStateChange = "ended" (zero) the video has ended, so then you reload the video player with the same video and set it to its Ready State again.
In theory its very easy you basically need to setup and control the entire video player through javascript. And the API gives examples on that.
http://code.google.com/apis/youtube/js_api_reference.html
http://grizzlyweb.com/webmaster/javascripts/refresh.asp
http://code.google.com/apis/youtube/forum/
Have a look at loop and playlist parameters as well. You can set playlist parameter to video ID and same video can be replayed using this.
So, it will be something like:
http://www.youtube.com/embed/{VIDEO_ID}?wmode=opaque&loop=1&version=3&playlist={VIDEO_ID}
Hope this helps!
Appears to have been fixed by YouTube.
I can now play the video multiple times (on multiple devices) without it getting stuck. Was too busy wondering why my question was getting so little attention that I forgot to check again to see if it was fixed ;-)

How can we overcome the missing muted/volume property on HTML5 video on UiWebView/iOS Safari?

As many hybrid app developers know, Apple has decided to disallow setting the volume property of HTML5 video elements in JavaScript. This also amounts to the the muted property. The concept of muted videos which autoplay when scrolled into view and with the option of unmuting on tap is growing increasingly popular (pioneered by Vine, Facebook, etc.). I'm trying to find a way around this limitation in design. From what I've been able to read on the subject, there's not any hack or solution that solves this design requirement of mine.
Here's my thoughts so far:
I could split the audio from the video into a separate stream and sync current time with the video and call play() when the user is tapping. However, iOS Safari/UiWebView does not support simultaneous audio/video streams. Thus, this is simply not an option.
I could encode two videos, one with sound and one without. I could then swap the src on tap. However, this requires reloading the entire stream and also nearly doubles the amount of data required. The latency is noticeable. Thus, this won't be a viable solution.
I could embed a native AVPlayer class element in the webview. However, this would be an overlay and not be manageable from within the webview. Custom controls and UI interaction from within the dom would not be possible. Thus, this is not an option.
I could simply disable the output of the app and dynamically switch it on whenever the user taps a video element. However, to my knowledge this is not possible. I could show the native software volume slider, but that would defeat the purpose of this whole thing.
Do you have any suggestions or ways around this limitation?
I managed to find an acceptable solution. I split the videos into three files. One without audio, one without video and then one with both video and audio for desktop browsers/Android.
It seems like running simultaneous streams CAN work as long as they doesn't conflict with each other, which basically means a separate audiotrack and a video with no audio Channels play just fine in unison.

Playing interactive videos with finger gestures in iOS

I am working on a kids ABC learning app which will be somewhat like this app.
Petting Zoo
The user can do these gestures... Swipe UP, DOWN, LEFT , RIGHT and TOUCH and each gesture has a small animation clip (approx duration 1 -3 secs each ) linked to it like the character jumping on Swipe UP, etc. There will also be an IDLE loopable movie which will be playing continuously when there is no input from user.
So I am trying to use videos in MP4 and M4V format for these gestures but the problem is that the videos are lagging just before playing. Means they dont play instantly upon doing a gesture but take a time of say micro second to load and play.
I am looking for output like the video above. You can see that the animations are so responsive and do not hang even for little time.
My developer once achieved such smooth output with the MP4 video clips but those clips didnt have audio embedded in them and then when he used videos with audio embedded in them, they were lagging again.
Can audio be the issue for lag here ? Or anything else you experts will like to suggest.
Please help guys. Yours inputs will be very valuable for me.
You can use - (void)replaceCurrentItemWithPlayerItem:(AVPlayerItem *)item of AVPlayer.
This methods helps you to load the new item to an existing AVPlayer.
Here is the important reference for playing multiple videos using single AVPlayer.

Record video inside of iOS app, immediately play and loop

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

AVComposition breaks on Airplay

I have a video composition which I'd like to play over Airplay (without mirroring). The app works as expected when using normal Airplay mirroring, but I'd like to get the speed, reliability, and resolution bump you get from using Airplay video instead.
The problem is that when I set
player.usesAirPlayVideoWhileAirPlayScreenIsActive = YES;
...the player goes blank.
Notes:
Since I don't create separate windows for each display, they are both trying to use the same AVPlayer.
My AVVideoComposition contains different files and adds opacity ramps between them.
This unanswered question suggests that the problem is more likely due to the fact that I'm playing an AVComposition than the use of a shared player: AVComposition doesn't play via Airplay Video
Two questions:
Do I have to get rid of the player on the iPad?
Can an AVVideoComposition ever be played over AirPlay?
I can't make comments so I had to post this as an answer although it might not fully respond to the questions.
I had similar issue and at the end I found out that when AVPlayer plays AVComposition it simply doesn't display anything on the external display. That's why I had to do it myself by listening to UIScreen connection notifications.
I have to say that all worked pretty perfect. I'm checking first if there are more than one screen and if there are I simply move the AVPlayer on that screen while displaying a simple message on the device's screen that content is played on... plus the name of AirPlay device. This way I can put whatever I want on the external display and is not very complicated. Same thing is when I receive UIScreenDidConnectNotification.
That was fine until I noticed that the composition plays really choppy on the the external display. Even if it consists of only one video without any complex edits or overlays. Same video plays perfectly if I save it to the Camera Roll or if I use MPMoviePlayerController.
I've tried many things like lowering resolutions, lowering renderScale and so on but with no success.
One thing bothers me more is how actually Apple do this in iMovie - if you have AirPlay enabled and you play a project (note it's still not rendered so it must use a composition in order to display it) right after tapping play button it opens a player that plays content really smoothly on the external monitor. If you however activate AirPlay from the player it closes and start rendering the project. After that it plays it I thing by using MPMoviePlayerController.
I'm still trying to find a solution and will post back if I have any success.
So for the two questions:
I don't see why you have to get rid.
Yes it can be played but with different technique and obviously issues.
in the app .plist create a new item called:
required background modes
add a new array element called:
App plays audio or streams audio/video using AirPlay
Not sure if you have already tried this, but you don't mention it in your post.
Cheers!

Resources