Is it possible to create an HTML5 video element compatible MediaStream from a series of images (jpegs). Assume I have the jpeg urls, the FPS and frametime.
My use case is that I have some resources where 90% of them are encoded as mp4's (and thus I use HTML5 video player to play them). But 10% are legacy and very old, and are a series of jpegs that I blit to the canvas using request animation frame. If I could use the html5 video element, that would be ideal.
Related
I've written an HTML5 application that computes graphs at runtime and displays them in a canvas element.
I think that the answer to this question is probably "no", but I would like to know for sure if there is some way of programming my HTML5 application to take a series of these images and turn them into a video file, like an mpeg, for example.
In other words, I understand that HTML5 provides the video tag to embed videos in a web page, but can it be used to create videos at run-time?
The video element is play only (decoding)--it doesn't do encoding.
But...
If your user's browser supports WebM (modern versions of Chrome,Opera,FF,IE) then you can use WHAMMY to encode a .webm video file on the client-side. Here's a blog post by its creator, antimatter15:
http://antimatter15.com/wp/2012/08/whammy-a-real-time-javascript-webm-encoder/
Coincidentally, antimatter15 also created a client-side .gif encoder. If you are just stringing together a limited number of images you might consider an animated .gif instead of encoding a whole video. Here is antimatter15's code to copy a series of canvas drawings into an animated .gif:
https://github.com/antimatter15/jsgif
Good luck with your project!
I am building Self Hosted Video tutorial website.
I want to use HTML5 Player But with just one single Video format (mp4). But problem is that in some browsers like opera MP4 format is not supported.
I know for this i have to add multiple formats in html5 video player but having multiple versions (formats) of the same video will occupy multiple times of space in hosting.
Please give Suggestions.
There is no support for html5 before IE 9.i think you should use Video.Js.The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
you can download it from here.
http://www.videojs.com/
read the documentation here.
https://github.com/videojs/video.js/blob/v4.2.2/docs/index.md
Developing an AIR for iOS app that involves video playback. Are there any best practices for optimizing video content for use in AIR applications?
Best route for video through AIR on iOS is to use an h.264 encoded video. These will be hardware accelerated and be better on battery than FLV (the other usual type for Flash).
The problem, of course, is that most h.264 videos cannot be played back using standard Flash video players on iOS. To get around that, you'll want to try one of two things:
Use StageWebView. This will open the video in the standard iOS video player, which is purpose-built to play h.264 videos. The downside here is you have absolutely no control over the video other than unloading the StageWebView. You also have no control over the GUI and the video will display over the entire application and can be difficult to position in Flex.
Use StageVideo which will allow for hardware accelerated h.264 videos and use the built in video playback mechanisms. It works fantastically, you have full control over your video, and it is just the video, so you can skin it as you see fit. The only downside is this displays the exact opposite of StageWebView and displays under your app. You will have to create a mask to see the video.
It's unfortunate that the two best options for playing video on iOS do not reside in the Display List, but that is what we have to deal with.
Hopefully that helps.
You can use component FPVideoPlayer from ane library FPNativeUI, which displays video over display list: http://www.youtube.com/watch?v=G5IdHnms2Dc. http://flashpress.ru/blog/ane/native-ui/?lang=en
Can I click on some time and eventhough the video is not downlaoded till that time and the video starts playing from the time I clicked?
If yes, what would be a better option for viewing streamed video- HTML5 or flash player like JW player? WHich one will have less lag?
HTML5 browsers generally don't support this, however I believe the video tag in Safari will work with the Apple HTTP Streaming format for this functionality. For something that works across all browsers, Flash Player can do it using either RTMP streaming or HTTP Streaming (either with our without OSMF to support this). Probably the easiest place to start is with OSMF, which supports both RTMP and HTTP streaming of video.
I have tested this with Firefox and Firebug and while you can "seek" to a point in the video without having to watch video preceding the point you wish to seek, this still causes the entire video file to download.
Indeed, each time you seek in Firefox 4, the entire video downloads.
This may change and improve as HTML 5 video implementations become more mature and may differ based on the actual browser being used.
More information on the test here:
http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/
So while the DOM, canvas and webgl can hit framerates of up to 60fps, video seems to be stuck at 24fps for the moment.
That framerate is more convention than anything I believe, both the codecs and video container formats don't have restrictions there (well, not all of them).
I'd love to see a <video> tag showing a clip at like 48 or 60fps. Is this possible, and if so, how can it best be done?
If the video is encoded at a high frame rate and the browser's media player implementation can keep up, then there's nothing stopping playback at a higher frame rate.