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).
Related
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.
Ok, so I'm working on a project that will allow users to record themselves within a browser and have the video save to the server for later watching.
Right now I have an implementation where I'm using Red5 server with Red5 Recorder and that is working fine, but I'm wondering how exactly you could go about this on an iphone as that is expected to be a large user base.
As far as my research has shown there is no universal way to gather this video within the browser as there is no HTML5 solution and Flash seems to be by far the best way to record webcam to a server.
So what I'm wondering is has anybody encountered this issue and found a solution, whether it be for Iphone only, or a universal solution that would work across all platforms.
At the moment, the only way to accomplish this on the iPhone would be to write a native application. The web browser doesn't give access to the camera, and it doesn't support Flash, Java etc.
I am building a website: daretogaincontrol.com. On that site, I am using videolightbox to play videos.
The videos don't play on iPad or iPhone. The site works fine on desktops (Mac and PC).
The nice people at videolightbox put together a little test page to show that their player and one of our videos will play on iPad/iPhone here: http://www.videolightbox.com/3/
I copied that code to a test page here: http://www.daretogaincontrol.com/test_video
On the test_video page there are two play options one is playing the video from videolightbox.com with the player from that site. Same as the videolightbox.com page, but served from the daretogaincontrol server. The bottom one attempts to play the same video with the same player but the player and video reside on the daretogaincontrol server.
All the javascript and css on the test_video page are linked to the videolightbox.com site.
Neither video on the test_video page plays on iPad/iPhone, which leads me to believe there might be a server issue, since I can eliminate (?) the video format and player has having identifiable problems.
You can play the video on iPad/iPhone using a direct link: [which you need to figure out on your own because I am limited to 2 links per post, sorry], but not in the player on the page.
I have no iPad/iPhone to test with. I know pretty much nothing about iPad/iPhone. I must make changes and call the client to have them test. I also have little experience with delivering video content over the web.
By using these instructions you can set up your PC to act as a proxy and capture the web traffic.
When I do this, I see the requests are malformed when coming from the iPhone
GET http://www.daretogaincontrol.com/test_video
200 OK (text/html)
GET http://www.daretogaincontrol.com/videos/index_videolb/http://www.daretogaincontrol.com/videos/having_fun.mp4
404 Not Found (text/html)
GET http://www.daretogaincontrol.com/videos/index_videolb/http://www.daretogaincontrol.com/videos/having_fun.mp4
404 Not Found (text/html)
Why is it that if I pick a video from the library in my application I'm given this horribly pixelated/compressed video but if I take the video with the camera in my application I'm given a nice video file, this is on the iphone 4.
Sample of video taken w/in the app:
http://photos.smugmug.com/photos/912709066_Kcc8p-1280.mp4
Sample of video picked from the library:
http://photos.smugmug.com/photos/912709325_hw7Bv-1280.mp4
Both are 720p. Setting videoQuality to 'UIImagePickerControllerQualityTypeHigh' doesn't help, which makes sense really since that appears to be just for setting the recording resolution when using the camera.
Sam
i had the same assumption as Shizam till i saw an FTP app upload a video just fine on an iPhone 4. its not the quality of the imported video thats the problem. if you download the app's sandbox and look at the imported video you will see its fine.
go to Window/Organizer and select your device. there will be a list of Applications in the bottom right. select the app in question and click the expansion triangle. you will see "Application Data" click on the little black downward arrow and tell it when to save the data. then go look at the video in the tmp folder. you will see its fine.
the problem comes when you try to send it out via HTTP. for what ever reason Apple decided to add an extra crappy video compression to videos sent over HTTP. if you FTP the file to the server the video quality is actually very good similar to what you get when you email the video to yourself. Apple gives you a working example of how to FTP to and from a server.
See my post here. You can improve the quality by changing some settings.
Avoid Video Compression when Selecting Movie with UIImagePickerController?
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