I have html5 video tags of videos.
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Even tried using video.js, no change.
I read that this is a problem because the videos originated in iOS.
so 2 questions:
1. How can I still overcome this issue. Really there is no solution?
2. (out of curiosity) - how does chrome manage to overcome this?
Example of a URL (scroll down a bit in the chapters to see a vertical video):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
I read that this is a problem because the videos originated in iOS.
All videos recorded using mobile devices will contain rotation metadata including those from iOS and Android devices. It can take 4 values: 0 (tilted left), 90 (portrait), 180 and 270:
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Firefox and IE 10 are the only major browsers not supporting the rotation metadata. Here's Firefox compared with Chrome:
The latest version, Firefox 42 as of today, still does not support it. IE11 and Edge 12,13 do support it.
List of mobile/desktop players that support the rotation info: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
How can I still overcome this issue. Really there is no solution?
See this answer for the solution, basically you need to :
rotate videos using FFmpeg (so Firefox and other browsers that do not support the rotation metadata show the video properly)
remove the rotation metadata (so that other players don't rotate the video since it's already been rotated by FFmepg)
Images courtesy of: https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
Since the problem is with some iOS specific encoding options, which many NOT-Apple Players can't read, the easiest solution I can think of is to trancode and rotate the video.
Which was already discussed in oh so many posts on the web and here at SO... e.g.:
Video orientation using video.js
HTML5 mp4 video with firefox resizing video
Chrome HTML5 Video Flipping Portrait Sideways
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
I am guessing that Chrome is respecting the width="360" and height="640" attributes of your <video> tags, while Firefox is not. If I download one of your videos and play it back in Media Player Classic, again the orientation is incorrect. But just like in web browsers, there are inconsistencies: the same video opened in VLC player plays back with the correct orientation.
I would recommend that, if you can, you re-encode the videos using a (free) program called AVIdemux. I just tried it on one of your videos, and it worked well with minimal effort. As a bonus it shrunk your video down considerably, with only minimal quality loss.
Here are the steps:
Download AVIdemux from http://www.fosshub.com/Avidemux.html
Install and run AVIdemux
Go to File menu and choose Open. Pick the video to re-encode.
Go to Video menu and choose Filters
Choose Transform > Rotate (double-click) > Rotate by 270 degrees (OK)
Click the Preview button to check the output
Click the Close button
In the main window, under Video Output, choose MPEG4-AVC (x264)
Under Output Format, choose MP4 Muxer
Click the Save Video icon, and in the resulting window type a filename and click the Save button.
Then you will need to re-upload your video.
Probably not really a viable solution but adding a CSS rule such as
video {
-moz-transform: rotate(90deg);
}
would at least make the videos play back in the correct orientation in Firefox. Problems with this:
videos that play back in the correct orientation without the rule will play back in the wrong orientation with the rule
the video controls also get rotated
the posters will display in the wrong orientation
I see your site uses video.js. It might be worth looking at https://github.com/xbgmsharp/videojs-rotatezoom ?
Related
We have multiple videos on a website. Two sorts, full and half size. Only on the iPhone devices, the half videos won't show up. The half-sized video dimensions are 960x1080. Even when I'm directly loading the source in the browser on the iPhone, it won't load. Both Safari and Chrome. The strange thing is that the full video's with the same render settings will load. (h.264 codec etc.) The only difference is the dimension.
Did anybody encounter this problem and know a fix? (Apart from changing video with a .gif on my iPhone). I can't find any documentation on why other dimension html5-videos wouldn't work on iPhone devices.
Alright. I took a closer look into the video files. I found one difference in the render settings inside Premiere Pro. Fields: No Fields (Progressive Scan), and Fields: Upper fields first. Putting it on No Fields seems to fix the problem.
I have a video element that’s working beautifully with the standard controls in Safari (OS X 10.11 - El Capitan). I have play / pause, the scrubber, captions, and even AirPlay. …but there’s no full screen button. I swear I’ve seen that button on the normal controls before. The WebKit blog even has a screenshot with the button in an unrelated article (backdrop-filter is rad though, check it out).
Is this seriously not standard functionality?
I’ve added fullscreen to the video and source tags and even fullscreen="fullscreen" for good measure. The controls tag is working (I see the controls after all).
iOS’ controls are visually different and include the full screen button.
I’ve been hunting around and the most popular thing I can find is this super old StackOverflow article that basically says I need to use Javascript. That doesn't seem right. I feel like I’m taking crazy pills!
I suppose this could explain why so many sites roll their own controls using the JS hooks but it seems like a lot of work for expected functionality.
I realize I’m just asking for a ding in my pitiful reputation but I hope I’ve just missed something obvious.
Thank you in advance for your help / downvotes. :)
I was in a panic over the problem until I discovered that a <video> contained in a "popup window" instead of a regular window/tab is will cause the <video> tag to drop the fullscreen button in its controls.
My "page preview" happened to be launched in a pop-up window, and having maximized that, it took me a while to eliminate various factors before concluding that it was a popup vs. normal window/tab issue.
The behaviour that I experienced was in Chrome. I haven't tried it with other browsers.
Additionally: Also, note that within IFRAME also behaves the same way, dropping the fullscreen button, too (from the comments).
I figured this out, it was at least half stupidity.
Heading
I had the video element set to use max-width: 100% so it would fill the container on the page. I didn't think that would have any effect on the video's ability to go full screen.
No Metadata
The video didn't have any metadata to preload in the first place. I used an app to add a title to the file.
Does the fullscreen toggle button show up when you start playing the video?
According to Apple's documentation:
The webkitSupportsFullscreen property is not valid until the movie metadata has loaded. You can detect when the metadata is loaded by installing an event listener for the loadedmetadata event.
It seems there is some support in the video file that needs to be checked for before fullscreen support is enabled in the controls.
When viewing an HTML5 video on both Chrome and Safari, the fullscreen toggle button doesn't appear until the video has started playing.
EDIT: you might be able to get around this behavior by adding preload="metadata" to your video element.
I'm looking at a site with a fullscreen video background on the home page. Now I'm using YTPlayer which pulls in a video from YouTube so they can do all the heavy lifting when it comes to buffering etc.
The problem I'm having is the video quality in Chrome is rubbish until it kicks up to the desired quality after quite a few seconds. It's perfect in IE, Safari and Firefox but the latest Chrome isn't playing ball.
Does anyone know how I can get Chrome to use the set quality from load rather than serving up this lower quality version straight away? (I'm open to other full screen video methods too).
Set video quality in YTplayer properties
Choose hd720, large, medium, or small. For example:
ytp.proxy.suggestedQuality = "hd720";
/* hd270: Sets video quality to 720p* HD video.
large: Sets video quality to 480p.
medium: Sets video quality to 320p.
small: Sets video quality to the 240p.*/
You can change the quality setting in line 47 of the javascript. also add add &hd=1 into line 34.
Still problem? jump to any of these plugins.
a.) http://dfcb.github.io/BigVideo.js/
b.) http://syddev.com/jquery.videoBG/
c.) http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2
Is that no way to do it? I have a site want to build to using video for background, iPad runs perfect but iPhone's not.
Then I found out the problem is iPhone safari handle the inline html5 video by default full screen, some people said it could override by html5 settings with webkit-playsinline option, but I tried and no effect on the problem.
And I also found this link:
HTML5 video player behavior on iPhone and iPod in Safari Web Apps
The answer said the behivaor cannot be change even using the webkit-playsinline on it.
It that true? And if yes, are there any way to do the inline video in iPhone?
Thanks!
With iPad you can disable inlineMediaPlaybackRequiresUserInput in Objective-C for a web view.
On iPhone, Apple doesn't allow this option at all, so your at a loss on iPhone.
A workaround is a bit old-school, but you could use an Animated gif.
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
I wrote a module that takes care of playing the video and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video
Keep in mind that this still needs a "touch" to start, so it won't autoplay like on desktop.
I'm about to create a mobile website using HTML5 and want to use the HTML5 video tag.
I want the website to work with iPhone, iPad, Android and other smartphones/devices.
Which video format should I choose? mp4?
Which size should i use for width and height to get the best result?
Which FPS (frames per second rate) should I use for the videos?
Thanks in advance.
Those are pretty subjective questions, so I'll give you some rather subjective answers:
I have made good experiences (hope others as well) with serving 3 media types: H264/MP4, OGG and WEBM for <video> elements, at least this combination worked fine on all devices I was able to check by now.
In case you also want your video to be displayed inline on desktop browsers I'd say you should use the dimensions that are dictated by your layout. In case you are looking for a mobile only solution, a common resolution for 16:9 content would be 480x270 (that's what Quicktime Pro exports when you select "Save for iPhone"), if you are planning for tablet support as well you might want to serve alternative content for them.
The lower the frame rate, the smaller the file, so you'll have to know by yourself how much filesize matters, the only thing I could advise would be using a full fraction of your original video frame rate (ie. 12.5fps if you want to reduce a 25fps source) as otherwise you'll get jittery drop-frame effects.
Also please see the great video section of Dive into HTML5