This question already has answers here:
Chrome HTML5 Video Flipping Portrait Sideways
(3 answers)
Closed 8 years ago.
I've spotted something strange happening. I have an MP4 file that was recorded using an android phone which I am embedding on the page to play using the HTML5 video tag. If I play it in chrome the video is upside down however if I view the same page in chrome on my phone the video plays the correct way round. Is there some sort of orientation meta value that the phone is reading and the desktop browser isn't? Obviously I want it to play the right way round in all browsers so is there a way I can work out which way round it is meant to be displayed either on the client side or with PHP on the server side?
The orientation is stored inside the a tag.
Maybe the desktop browser has no support for orentation.
Using PHP's getid3 lib you are probalby able to read that tag. but then you need to reconvert the video as there are no ways to set the video orientation atm.
http://getid3.sourceforge.net/
Anyway if you have maybe ffmpeg installed on the server you can create a function that checks for the orientation wehn uploaded and if its wrong it automatically converts the video.
in ffmpeg the code to rotate the video is (rotates the surce 180deg):
-vf "transpose=2,transpose=2"
Said that, no atm there is no easy way to automatically rotate the video on desktop devices.
Related
I have an app with an animated UI realised via APNG images.
Each block has 2 APNG images and one PNG one:
Appearing (APNG)
PingPong (APNG)
Static (PNG)
I need to play the second animation right after the first one is finished and only make visible the PNG image after a touch event. I've done it via setTimeout but, unfortunately, after second page refresh a browser completely ignores some animations, some of them start jittering, some disable in an inappropriate moment.
How can I fix the problem?
And can I catch the moment when APNG animation has finished? Do APNG images emit any events?
To check the problem, open the app on mobile device and scan the code.
Browsers don't have any built-in support for treating APNGs as anything other than an image: there is no way to determine when an APNG has started or stopped playing. You could probably fix the issue by just converting the APNGs to an actual video file format, and embedding the images with <video> instead, since that has an API for controlling playback. Alas, it doesn't seem that any browsers support treating APNGs as video so you'll need to convert it to another video format, such as WebM.
If you are really committed to not converting your APNGs to a video file format, you could work around the limitation in browsers by using a library such as pngjs to decode the APNG, extracting the fdAT chunks, and then manually animating through those extracted frames (each frame in an APNG is itself a (non-animated) PNG).
I've spent a few days digging almost any post possible on this subject.
So far I haven't been able to find a proper solution.
Basically I would like to create an HTML5 audio player that plays music (one file at a time) on mobile browsers (iOS/Android) that will play the music instantly when the user clicks "Play" (just like youtube works on mobile browsers) and that the browser won't try to load/cache the whole file first before it plays it.
I tried Audio Sprites and that didn't work well (it is mostly related to web games).
(Using WordPress 4.7.3)
I have a video on my header background and it runs normally in the browser on desktop but when I open the browser on a cell phone, the video disappears. I checked the media queries in order to know if it is the problem, but apparently not.
Site URL: http://ratts.herokuapp.com/
Any idea what it is?
If you are talking about the video on the background, it won't work.
The only way to autoplay videos on mobile devices is to ditch the html video tag.
If you don't need audio:
Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.
Here's a similar question:
HTML5 video background on iPad/iphone
I'm currently running out of guesses, but I've implemented a fullscreen video header on some sites of my webpage using WebM and a JPG replacement image as fallback shall the original MP4 video not be able to load
The header loads perfectly fine on 2 Macs as well as several smaller devices (tablets and smartphones across operating systems) however, some people that I've asked to test the website reported that the video does not load across browsers, and neither does the image fallback.
I've examined the code already a couple of times. Here's an example:
http://crispin-m.de/bentley.html
does it load in your browser? Where is the mistake that I've made?
Regards
I've read that 2nd generation iPod Touches are unable to play some types of video (particularly HD) even if its OS is up-to-date. I'm still trying to track down the video settings of a third-party stream I will be using, but I've already seen this with two 2nd gen Touches with 4.2.1 unable to play video.
Is there a way to detect from Objective C or JavaScript whether the host device is able to play a given type of video? HD video?
EDIT: I've revised my question. I am pretty certain at this point that the problem is HD (or maybe aspect ratio). The problem is that I don't know how to detect what the hardware version is (1st, 2nd or 3rd gen). I can detect the OS version, but it's not the problem.
Modernizr( http://www.modernizr.com/ ) might be able to help you with that