I have been trying to embed some videos on a website I am building, and have come across a snag when trying to stream the videos to iPhone/iPad.
Here's the code I use:
<video width="480" height="360" controls>
<source src="/video/Fire.mp4" type="video/mp4" />
</video>
This displays a thumbnail with a play button on it. However, the play button is crossed out. (The invalid codec button?)
I have ensured that the video has been properly encoded (MP4, H.264, baseline).
Any suggestions on what I'm doing wrong?
I've been having a similar problem. A few things to check off before you assume the codec is the problem:
Ensure the server is sending the video file with the correct MIME type (video/mp4)
The video's bit rate is under ~2MBps, there is also a relationship with the max resolution you can use in conjunction with the bit rate.
I was also encoding mp4 video with the baseline profile using Adobe Media Encoder and could not get the video to play on an iPhone.
I used Miro Video Converter to convert from mp4 to mp4 and can now correctly play the video on an iPhone.
Obviously some part of the encoding I must be setting wrong from the Adobe software but I'm yet to pin it down.
If anyone else can chime in with there experience it would be appreciated.
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!)
}
When uploading a video on facebook (even video formats which are not supported by HTML5's <video> tag like OGV and MOV) I quickly get the choice of thumbnail from 10 of them. This is at 1-2% of upload progress so I'm wondering, how do they do it? It must be client side but how exactly?
I found out how I could potentially generate them using <video> and canvas.draw() but this only works for HTML5 supported formats. Thank you!
I tried different ways to show a .mov video ("ISO Media, Apple QuickTime movie" on linux) in HTML5 page with Iphone, but it isn't working.
My code is:
<video width="320" height="240">
<source src="test.mov">
</video>
With all desktop browser (chrome, firefox....) I can show the video.
Any Idea?
Thanks in advance.
Instead of using <source> tag use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="test.mov"></video>
As per HTML5 standards the only videos that are trully supported cross browser are MP4, ogg, and WebM. All other video files are not guaranteed to work with the standard html5 video player.
You can read more about it at this website.
http://www.w3schools.com/html/html5_video.asp
Alternatevily you can look for other video players that can help you make this for you.
Hope this helps.
The .MOV media type (Quicktime movies) is not supported in HTML5 browsers using the video element at this time. I recommend you encode those to MP4 (MPEG4).
But you can try this HTML below. The new video HTML5 element will not work as it supports limited media types (MP4, OGG, or WEBM). Using the older HTML embed or object elements forces the browser to use a plugin to support the video, if one exists. If your Quicktime movie plays, it will depend on how Apple and their Safari browser manage the plugin or player for this media type:
<embed id="embed1" src="test.mov" type="video/quicktime" style="width:320px;height:240px;">
<noembed>Your browser does not support this media object or the embed element.</noembed>
</embed>
Does the HTML5 video player on the iPad Safari have the capability to play equivalent Flash content ?
Since the iPad does not have Flash support, is there any way by which the same content can be converted into an HTML5 format (something which can be played on the iPad) ? If yes, does HTML5 support creation of highly complex Flash like content ?
I see this as two questions:
Since the iPad does not have Flash support, is there any way by which the same content can be converted into an HTML5 format (something which can be played on the iPad) ?
By the same token that you can take a video and convert it to .flv format, you can (and will need to) convert the video to mp4/m4v/h.264 codec format. A tutorial for converting a video to h.264 with Handbrake is found here: http://www.simplewebtv.com/en_tutorials.html?doc=video_handbrake
Please note that your server may need to have the filetype identified to properly serve video. A quick description of adding Mime types to Apache is found here: http://bignosebird.com/apache/a1.shtml
If yes, does HTML5 support creation of highly complex Flash like content ?
Yes, you can do much of what can be done with Flash with HTML5. To see great examples of all the things currently being done with HTML5 (using mostly <Canvas>), see:
http://www.html5rocks.com/en/tutorials/#canvas
http://aerotwist.com/lab/
http://www.canvasdemos.com/
This is a pretty good article on the topic as far as video is concerned: http://diveintohtml5.ep.io/video.html
If you are looking for a solution for interactive content have a look at http://swiffy.googlelabs.com/
Flash plays MP4 video files.
HTML5 video can also play MP4 video files (except on Firefox which requires WebM or Ogg).
So basically the answer is: Yes.
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.