I have tested by using object-fit: fill in CSS Works good. video { object-fit: fill; } From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit): The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. Value: fill The replaced content is sized to fill the element’s … Read more
Build your AVPlayerItem in a background queue as much as possible (some operations you have to do on the main thread, but you can do setup operations and waiting for video properties to load on background queues – read the docs very carefully). This involves voodoo dances with KVO and is really not fun. The … Read more
I found that the following accept string will add mp4 and m4v to the list of file types that safari will accept: accept=”video/mp4,video/x-m4v,video/*” I’m not sure what the mime type is for webm videos but if you can look that up you should be able to tack it on to the accept string. The trick … Read more
ffmpeg provides this functionality. All you need to do is run someting like ffmpeg -i <inputfilename> -s 640×480 -b 512k -vcodec mpeg1video -acodec copy <outputfilename> For newer versions of ffmpeg you need to change -b to -b:v: ffmpeg -i <inputfilename> -s 640×480 -b:v 512k -vcodec mpeg1video -acodec copy <outputfilename> to convert the input video file … Read more
This worked for me. self._name = name + ‘.mp4′ self._cap = VideoCapture(0) self._fourcc = VideoWriter_fourcc(*’MP4V’) self._out = VideoWriter(self._name, self._fourcc, 20.0, (640,480))
var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); var video = document.getElementById(‘video’); video.addEventListener(‘play’, function () { var $this = this; //cache (function loop() { if (!$this.paused && !$this.ended) { ctx.drawImage($this, 0, 0); setTimeout(loop, 1000 / 30); // drawing at 30fps } })(); }, 0); I guess the above code is self Explanatory, If not drop … Read more
It seems that most browsers allow the second approach, although you would need to know the frame rate. Opera, however, is the exception, and requires an approach similar to your first one (the result is not perfect). Here’s a demo page I came up with that uses a 29.97 frames/s video (U.S. television standard). Note … Read more
Modern containers govern the time component of presentation of video (and audio) frames using timestamps, rather than framerate. So, instead of recording a video as 25 fps, and thus implying that each frame should be drawn 0.04 seconds apart, they store a timestamp for each frame e.g. Frame pts_time 0 0.00 1 0.04 2 0.08 … Read more
I filed a bug with Apple. After a couple of weeks they got back to me saying, very simply, that I should add “webkit-playsinline” to the video tag on the HTML, as well as adding the “allowsInlineMediaPlayback” property on the UIWebView. So in the end, this is what it looks like: HTML <video id=”player” width=”480″ … Read more
You can do it using a CSS3 3D transformation. #videoElement { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); /* Safari and Chrome */ -moz-transform:rotateY(180deg); /* Firefox */ } This will rotate it 180 degrees around its Y axis (so you’re now looking at it from behind) which gives the same appearance as being mirrored. Example at http://jsfiddle.net/DuT9U/1/