How to encode video for Mobile Safari - iphone

I've been trying to encode a video trailer for mobile Safari playback (iPhone). Using Handbrake for Windows, I selected the source .mov file and chose the iPhone 4 preset. I then checked off the Web optimized option and started the process.
The resulting video did not play on my iPhone's Safari browser, however.
http://mobilevideo.jt.citeeze.com/static/trailer.m4v
If anyone has had success encoding mobile safari video with ffmpeg, could you provide the exact parameters?
Thanks!

Related

How to make an MP4 recorded video from an iOS app playable on Chrome?

I have an iOS app in which users upload a selfie video on my server. Afterwards, a reviewer sees the video on a back-office website, and accept/reject it.
The problem is that I upload MP4 video files from my iOS client app. When I load the file url in the <video> tag of my website, chrome doesn't load the video (no error is displayed in the console). In Safari, everything works fine.
After some researches, I saw that sometimes, mp4 video can't be played by Chrome. Strangly, I tried to play some other mp4 video found on my laptop in chrome, and it worked. As if there were several "kind" of MP4 encoding and the one my client apps uses to encode is not supported by Chrome.
I saw that Chrome could handle .webm format, but I takes a lot of time to my server (4 entiere minutes at 100% CPU...) to translate from a MP4 to a WEBM.
My questions are :
(1) Why some mp4 can be played by Chrome and other not ? How I can make Swift AVFoundation module encoding the recorded video in the "right" mp4 encoding ?
(2) If it's impossible, I'd like to encode the 2 files (webm and mp4) client-side, within the user devices (I really want to avoid handling these computations by my server as they look extremely long to perform). The problem is that Apple does not provide webm as a possible translatable format in the documentation : https://developer.apple.com/documentation/avfoundation/avfiletype. Is there any way to translate a mp4 into a webm in Swift ?
(3) If (2) is impossible, is translating a user video into different formats server-side something commonly done as a "best practice" to manage video files and make them available in all platforms ? I mean, am I just missing some client-side trick to make mp4 videos playable everywhere or is it normal when dealing with cross platform videos to budget a whole CPU machine from AWS or whatever to handle conversions server-side ?
For whatever reason, Swift was encoding in a wrong encoding. To encode in the right encoding so it's available in a <video> tag in Chrome, I used, in my iOS app :
if movieFileOutput.availableVideoCodecTypes.contains(.h264) {
// Use the H.264 codec to encode the video.
movieFileOutput.setOutputSettings([AVVideoCodecKey: AVVideoCodecType.h264], for: connection!)
}

Web Audio API: How to keep music playing when iphone is off?

The context is: iOS 9.3.2 Safari.
I'm making audio visualization on a web page. If i use the <audio> tag, play it and turn off the iphone then the audio keeps playing. But Safari doesn't support Web Audio API through streaming - AudioContext.createMediaElementSource() - so i have to buffer and decode the entire audio file in order to visualize it - AudioContext.createBufferSource().
In this case audio stops playing when i turn off the iphone.
My current solution is to add, besides createBufferSource, the <audio> tag with a tiny silent mp3 source file that loops all the time. In this case everything works fine - the iphone, when turned off, plays both the silent mp3 & the buffered real mp3.
The question: Is there a more straightforward solution (meta tags, manifest, etc.)?
btw Android 5.1 Chrome keeps playing the buffered audio as is and desktop Safari supports createMediaElementSource

.webm video autoplay in iphone and tablets

I have created this webpage with this video using iframe.
http://mediafactory.gr/webm/
If someone clicks the link, he will see the video immediately with no placeholder.
How can I do this for iphones and tablets also? Right now if you open the link using iphone or tablets the site will ask for an application to open the video.
I have used this code.
<iframe src="http://mediafactory.gr/wp-content/e-card/bahagram/eCard.webm" width="1024" height="150"></iframe>
IOS doesn't support Webm. But I read a thread and it says that it will propose a vlc:// url handler that will enable to launch vlc to play an http (webm or anythin) stream directly in VLC in Safari. Check it out and let me know.

How can I embed a video on my website in order to work on an iPhone and what video format is required?

I have seen several sites where they are able to create links to videos and they actually open on the video player of the iPhone, iPad or iPod.
This is obviously not a flash player video, and they don't seem to be embedded from youtube.
So I was wondering how can I add a video on my site that can be opened on an iPhone, and also what type of format is required for this?
Thanks
HTML5 Video works on iOS devices, see http://html5video.org
and here is a decent player plugin
http://videojs.org

How can a web page play mp3 on iPhone/iPad

As far as O know, web pages play mp3 sounds by embedding invisible Flash players. Since Flash is not available on mobile webkit (iphone/ipad), how is it possible to play mp3 on this platform?
HTML5 supports these 2 tags (audio / video) which Safari supports:
In your case, you can use the audio tag.
<audio src="horse.ogg" controls="controls">
your browser doesn't support HTML5 audio
</audio>
The only catch is getting the right format for your media. :-)
Safari supports MP3 for audio, and MPEG 4 for video... Firefox supports OGG for audio/video, (I believe Opera does too), and chrome supports both.
More information about the supported file formats in HTML5 are here:
http://www.html5laboratory.com/playing-with-audio-files.php
That links to a really useful page allowing you to test the format support on your particular browser:
http://www.jplayer.org/HTML5.Audio.Support/