Event that fires when video is loaded and first frame is visible? Or how to crossfade two videos another way? - html5-video

I am trying to use video.js in a samsung smart tv application which unfortunately can only play one video at a time.
I need to simulate the smooth, preferably crossfade, transition between two videos. I am trying to do this by first fading in a screenshot of the next video and using that to cover up the screen while I switch video sources of the video.js plugin. When the player is ready I need to remove the screenshot.
The closest I have found is to remove the screenshot when "loadedmetadata" is called however I am still seeing an inconsistant blip of a black flash between the time the screenshot is removed and the video plays. This is very jarring and I need a consistent way to remove the screenshot only when the first frame has been loaded into the player.
Any other suggestions on how I could each a smooth transition between two videos while only using one video element would be greatly appreciated.

I found the loadeddata event which, as described on MDN :
The loadeddata event is fired when the first frame of the media has finished loading.
loadedmetadata only announce that media informations such as duration are loaded, but the loadeddata event should do the trick.

Related

In react-native-video, how do I reset the video player when the video has finished playing?

I have a react-native app with videos that I am displaying using react-native-video. Right now when the video has finished playing you have to manually drag the control for the position of the video back to zero and then press play to have the video restart.
How can I make the video automatically reset when it has been played to the end? (Or even better, is there any way to add a replay button?)
Currently the app is only for iOS.
Try adding repeat value equals to true in Video Component. It will do your work and video will autoplay upon ending.
<Video...repeat={true}/>

Playing a muted video without interrupting background music

My design calls for a video playing in the background of my login screen, exactly like 6snap has.
I would like to avoid the default behavior of stopping the user's music when the video starts to play. My video does not have sound.
I'm using:
<MediaElement Source="MyVideo.mp4" />
I tried setting IsMuted=true which didn't help. Does anyone have an idea how 6snap managed it?
Edit: currently trying the animated gif route. Using the ImageTools 3rd party library and having converted my MP4, it works fine. My 9 second 640x1136 3MB video became a 41MB GIF, so I have to reduce the quality drastically. Still trying to find a better way if possible.
You won't be able to do that with Background Audio and MediaElement, hence as MSDN says:
When a MediaElement control plays audio or video content, any background sounds or media already playing are halted. The app launches the playback experience when the user taps the control. Only one MediaElement control can operate at a time.
It's no matter you have no sound - when you start to play all background sounds/media are halted.
I'm not sure how the App you have mentioned achieved that, but maybe you can try with DirectX/XNA - thought I've not tried this and don't know if that would help.

start video record on view load in ios

I've looked through the Apple documentation but have seen no mention of how to do this, nevermind if it's even possible or not. I'd like to make it so that an iPhone/iPad begins video recording automatically when a certain view is loaded, and stops and saves when the view is dismissed. Is there any way that I can do this or am I just going to have to use the normal UI for video recording?
Use AVCaptureSession
https://developer.apple.com/library/ios/#documentation/AVFoundation/Reference/AVCaptureSession_Class/Reference/Reference.html#//apple_ref/occ/cl/AVCaptureSession

Multiple videos on screen using MPMoviePlayerController

What I want to achieve here is a screen with 2 or more different videos on at a time. I know in the apple documentation it says you can't have more than one video playing at a time and thats fine, I don't want to do this.
All I want is to have the 2 videos on screen and when you press on it, it starts to play, you can go fullscreen if you want but as soon as you press on a different video, the old video stops and the new one starts.
I already have three MPMoviePlayerController set up with the correct position, size and video and the 3 boxes are all drawn to the screen but at the moment, only the last one to be drawn to screen can actually be watched.
Does anybody know if there is any way to achieve this or not and if so, how would I go about it?
Thanks,
Matt
As for as I know, you can only have one active movie player at the same time. It's a limitation from MPMoviePlayerController. Message in Apple documentation :
Note: Although you can create multiple MPMoviePlayerController objects
and present their views in your interface, only one movie player at a
time can play its movie.
Source : http://developer.apple.com/library/ios/#documentation/mediaplayer/reference/MPMoviePlayerController_Class/Reference/Reference.html

Play Video on Mobile Safari for iPod touch

I have a web site that opens iframe for video on page, page uses ajax to pull in videos from selected menu. As expected and understood, on iPod touch after selecting video it shows a play button, which brings up video in another screen. However, when the video completes, it returns browser to page prior to one where video was played from. Sequence:
open Page1
go to Page2 which offers videos to play, in iframe
play video
video completes, returns to Page1, not Page2!!
Only happens on iPod touch, so must be issue with how control is returned on video completion.
Any suggestions? If this is not a known problem, I can work up example (currently, need account on site).
Of course, because the browser returns the URL of the page that was displayed before the video was played back. It won't remember the URL of the IFRAME, that had already changed in the process of selecting a video, if I don't get you wrong.
That's a common problem with frames/iframes and one reason why you shouldn't use them.
The solution could be to place your video selection menu in your actual page and not in an IFRAME. This could be achieved by loading in into a DIV via Ajax for example.
Figured this out, sort of. Got it to go back to the right place, but I do believe that it is easy to confuse the iTouch quicktime player and Safari about where to return to.