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!
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 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.
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.
I am developing an iPad application using Facebook Query Language. We can get the list of videos of an user along with its meta data by querying the table "video". The meta data of the video are: video id, title, description, src, src_hq etc.
Now, I want to play the Facebook video in my iPad using the URL given in the field src/src_hq.
What is the difference between these two attributes?
Do I get iPad compatible URL for all the videos. i.e. is it possible to play all the videos of Facebook in iPad including old videos uploaded.
If not possible, could you please give the objective-C sample code that embeds the video in HTML.
Regards,
Deepa
I'm pretty sure facebook videos are flv's and you'd need a flash player to play them. So to answer your question:
The src/src_hq fields are described in the documentation. The src_hq one is higher quality, most likely for the full-page type view, while the src one is likely used in streams and so on.
I doubt you will get a URL to a video that will work on the iPad. Probably not for new videos and probably not for 'old' videos either.
With that said -- try it! Query the table, get a video url, download it and see for yourself. Open it up in VLC or some-such and see what kind of video it is and get some details -- then post them here.