I need to play the video as base64 data URI format using HTML5 video tag on iPad and iPhone, which eventually helps me to make the video offline by storing it in websql,
I got a link which helped me to study the feasibility - http://iandevlin.com/html5/data-uri/video.php (if you take the view source of the link, you will see its well encoded in base64 format)
I tried this on most of the modern browser's like chrome & firefox in windows machine and safari in mac os, there it worked well.
So my hoped increased and I tried it in iPhone and iPad, Well its NOT working there! I am just getting a blank BLACK screen in place of the video control.
Also I am not getting any error in the safari debug mode as well. I would like to know whether we can play base 64 encoded video or it just a known issue for ipad and iphone...
to play video under HTML5 tag you need to provide its content source like images and video/audio files name without any path then only it works well i t
When Base64 media encoding is used you need to take in mind that memory consumption increases substantially, it's not the same as external media inclusion once media is not inside document and may be load in frames consuming only memory you really need.
Using Base64 need to load all the data to perform a decryption, and most mobile browsers take a lot of time to show video because their useful memory is very small (usually most of memory is consumed by operational system) and conversion take a long, when a processes take a long in mobile system, garbage collection know that as a zombie thread and kill it.
Actually is not a good idea assume you can use base64 for video in mobile browser, it should not work.
I have found iOS Safari to be pickier than desktop browsers regarding having the correct Mime type in the data uri. You should make sure you are using the correct one.
Related
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!)
}
I'm getting a weird problem when embedding an mp4 onto a webpage in iOS Safari. I am embedding it with a video tag:
<video src='gizmo.mp4' width=560 height=320></video>
However, on the page, I'm getting the 'video not available' placeholder graphic (play button with a slash through it)
However, when I go to the direct video on my server (http://www.example.com/gizmo.mp4), the video works perfectly.
I am using the video from here to test this out, I don't have the final video files yet. I have also replaced the gizmo.mp4 file with a gizmo.m4v file that Quicktime generated when I hit "Export for Web." I get the same result.
I am only interested in targeting iOS, so specific solutions for iPhone/iPad are welcome (even if they wouldn't work in the web at large)
Thanks in advance!
-Esa
EDIT: Did a bit more testing. Since this is an offline app that I am working on, I was completely offline for this, relying on the manifest. However, the videos worked once I took the manifest out and was working completely online again. So it looks like something up with iOS not caching video resources? The video in question is 748kB, so it's not a cache size issue (though, when I tries with a 13MB movie online, Safari automatically asked to cache the content)
Videos are regarded by the browser as a streaming resource and are not cached - even when referenced directly in the .appcache manifest file. I think the only way you could get this to work is to package the HTML 5 application up as a native app, using one of the many available tools for this (https://trigger.io, Accelerator etc).
I have a webservice returning .flv file, it has to be played in iphone application, how do i play a .flv (flash file) in iphone?
Does anyone has faced this scenario? Programmatically is it possible to convert to some format and play in iphone?
Thanks.
IPhone doesn't and judging by the Apple official statements won't ever (or at least in the forseeable future) support flash content.
Converting the content to another format on the server side should be easy to do and would allow content playback on an iDevice.
SInce the video is probably already h.264 encoded inside the FLV container, you may want to try FLV Extract on the server to avoid recompression:
http://www.videohelp.com/tools/FLV_Extract
Basically you just need to run it once for each of the videos on the server and keep the results around.
I would recommend setting up your webservice to use something like ffmpeg ( http://www.ffmpeg.org/ ) to convert the .flv file to an mp4 file which can be played directly from the iPhone's web browser.
Pioto and Josaih are on the right track in suggesting that you should convert the video server-side using a tool like FFMpeg. As far as I know there is zero support for flv in any part of iOS, so you'd be unable to transcode it locally. Even if you could, it would make your users angry, since transcoding is a resource-intensive process that would kill their battery life and take a significant amount of time.
So, your solution is to transcode your videos to h.264 server-side. However, I'd caution against transcoding from flv->h.264 if there are any other options available. If you have the original, uncompressed (or at least less-compressed) source video available, you'll get higher-quality video by transcoding that to h.264. Each time lossy compression (eg, squeeze or h.264) is used on a file, you lose some information and quality. If you've ever seen a 3rd or 4th generation copy of a VHS tape, you can understand what I'm getting at.
Once you have a h.264 formatted video, you can play it on iOS. Not sure about the exact details of this.
You may be able to use ffmpeg or something on your server to transcode it to H.264. I'm not so sure you would really want to do that transcoding on the phone. Given Apple's current stance on Flash, this is probably your best option.
For FLV files, what I do is I upload them on Google Drive and watch them from Google Drive app.
I can't seem to get Safari on the iPhone or iPad to offline cache videos. Everything else gets cached just fine when I go offline. The video file is obviously in the manifest, but I just get the broken arrow. Works fine in Safari desktop. Any clues? I've tried both object embed and the video tags.
Sadly there’s a ~5 MB limit on offline cache in Mobile Safari. Not much you can do about it.
See these two articles for mobile browser cache limits (note that the second one adds vital information):
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
http://www.yuiblog.com/blog/2010/07/12/mobile-browser-cache-limits-revisited/
It only generically covers html and "external resources", but they didn't explicitly test video files, so maybe these are never cached by Mobile Safari.
Audio & video are not cached by iPhone since they are played by external applications. It seems the only workaround is to store them as base64 in local database or have them cached in application manifest as php(or similar) file but with base64 encoded audio and video content.
Use the manifest to cache the html pages containing the video tag, then tell your web server to expire the video in 30 years. That way the video will be in the browser cache not the manifest cache.
Update for iOS 4.3 on iPad:
I just tried adding a movie to a manifest file in iOS 4.3.
Safari asked me to allow extending the offline storage and then downloaded the movie.
Perhaps something like this would work: http://www.nihilogic.dk/labs/jsvideo/test2.php
i have read it needs an html5 manifest setup to cache files
I am building this iphone app for a client and they have a large set of flash video files that they need to play/stream to the iphone. I understand that the iphone doesnt natively support flv playback but isnt there anything I can do to get around this problem?
In case it helps, they are using the akamai flash player on their website to play these video files.
Thanks in advance.
Yes! - You can convert all the videos to m4v format.
There's a javascript hack available, but it will only work if it's installed on the clients web server. It's also pretty clunky and slow and will likely murder battery life.
A workaround, since you're working with video, is to convert to mp4 format.
Short answer: no flash, but conversion will do what you need.
akamai actually supports "auto-packaging" of h.264 content which may be your best option here. By uploading 1 or more h.264 files you can use those to both serve your Flash player, and akamai will also auto-package them for iPhone (chunking them into .ts files and creating an .m3u8 reference file for dynamic mobile streaming).
This allows you to not have separate encodes for mobile and web, thus saving money and time so you can leverage your existing archive.