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
Related
We currently have our webRTC video chat in beta, and we have noticed a strange issue with the aspect ratio of the video changing.
When we request video using the following.
navigator.mediaDevices.getUserMedia({video: { deviceId: { exact: deviceId }, height: 300, width: 400 }})
everything starts off fine, but we have received feedback that users are seeing video "stretching" for a few seconds before returning to normal. We have managed to replicate this locally by pausing the video feed, through inspecting the video it seems that the aspect ratio changes from 400x300 to 300x150 (which coincides with the intrinsic values here https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video).
Can anyone think why this would be happening?
Your application is expected to handle video of any aspect ratio and resolution.
For starters, the stream you get with getUserMedia may not be the size you request. 400x300 is not a normal resolution, and not all browsers are going to crop or scale what they get from the webcam to accommodate your application. Even if you did use something more common like 640x480, there is still a chance that the camera doesn't support it and will send video at a different resolution.
Next, particularly with mobile devices, rotation can occur so your video that was originally 4:3 aspect ratio could now be 3:4. These resolution changes happen mid-stream without any warning.
Finally, due to changing bandwidth or CPU conditions, the browsers can choose to scale the video at any time. Maybe one of the devices starts to overheat or has a low battery. This can cause sporadic video scaling. I've never seen it change aspect ratio when this occurs, but it sounds plausible, especially when using oddball video sizes.
Consider setting the following CSS on the video element for which you're playing video:
object-fit: cover;
If you need to actually get the height/width, use the videoHeight and videoWidth properties of the video element.
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 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 ?
I'm working on a site where the client requested a video fill a div as the background. I have it in and working for myself but they keep complaining that they can't scroll. I have no issues on multiple computers scrolling. Is there some sort of common issue other than a slow machine that would cause this? Could it be a CSS issue? The staging site is here if it helps: http://arkroyal.staging.wpengine.com/
UPDATE
I am using a video hosting service and it seems this is only happening when the flash fallback is in there... I have set it to flash be default now and I can not scroll when my mouse is over it. So now I guess this is a flash issue?
I agree with user3285910's answer, however, that's not to say there isn't anything you can do about it.
When I first went I didn't not attempt to scroll, I just let the entire page load. Afterwards I checked the load times for the media, the Winsta MP4 took 27.36 seconds to load. That's in Chrome on a T1 line. I used Chrome because the webkit browsers are known for their laggy video lading.
With that information I would look at changing the preload value for the <video>. Currently it's "none". There are a lot of different approaches to preloading data and you cannot account for everyone's PC speed, bandwidth, etc.
I would recommend letting the browser determine their capabilities for you and adjusting accordingly. Usually 5-7 seconds of preload is enough to get around the jumping behavior. Here is a link to an article that goes into more detail with analysis.
After looking at the staging site, it doesn't seem to be an issue with the site itself, but more the video you are using. The video is high quality and will cause systems to slow down drastically. If this is the video they want as the BG, I would see if you couldn't get the video resolution lowered drastically, as this will cause issues in the rendering on some systems. This will also make users unable to scroll down the page, because their video card is busy trying to render the images that are being produced by the BG video.
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