I'm trying to create a video clip from a DVD and play it with video.js on a web page.
The source material on the DVD is in anamorphic format, i.e. it is stored with 720 x 576 pixels, but is meant to be displayed at 1024 x 576.
I've created a mp4 file using Handbrake with its 'strict' anamorphic setting.
VLC displays the resulting file correctly, i.e. the width is stretched to 16:9 eventhough VLC media information correctly reports 720 x 576 pixels.
When I try to view it with video.js using the html code below, the video is not stretched - but square pixels are assumed.
A Google search didn't reveal much, at least not in the context of anamorphic material.
Some postings suggest to change the width to "100%" or "auto", or put the video tag into a DIV with definied dimensions.
However, the result is always the same. The dimensions of the player itself change but the displayed video remains "squished" with black bars at either side.
Is there an option I have not found, an encoding setting that I have overlooked, or a CSS trick that can strech the video's width within the player? Or is it simply not possible?
Yes, I could scale the video to square pixels during encoding, but this seems to be a waste of space.
<html>
<head>
<script type="text/javascript">
document.createElement('video');document.createElement('audio');document.createElement('track');
</script>
<link href="file:///home/mike/videojs-demo/video-js.css" rel="stylesheet">
<script src="file:///home/mike/videojs-demo/video.js"></script>
<title>video.js test</title>
</head>
<body>
<video id="example_video" class="video-js vjs-default-skin"
controls
preload="auto"
width="1024"
height="576"
data-setup='{}'>
<source src="file:///home/mike/videojs-demo/test2.mp4" type='video/mp4' />
</video>
</body>
</html>
Setting the width and height attributes on a video element should solve your problem. But I see that you are using video.js and only an mp4 file. If, as I suspect, you're viewing the page in Firefox, which does not play mp4 in many cases, it is using the Flash fallback, which may not adjust the aspect ratio for you.
Try making a second source tag with a webm encoded version of the video. That will allow Firefox to play the video natively rather than with Flash, which should fix the problem and will get you better performance anyway.
Related
I have done my research on mobile screen widths but there is something I can't quite have a direct answer too.
Take the iPhone 4 for example, at this site it has a width of 640px and a height of 960px. However it has a device width of 320px. What is a device width? I'm making a responsive website and this device width seems to be a key part. Is the device width a size given so that websites scale properly? its smaller then desktop sites, other wise they would scale to the same resolution as a desktop monitor nearly? Can some body please explain the device width in relation to the actual width and if possible in context of responsive web design and the view port meta tag.
it is because you didn't set the viewport. More on that here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try to add this meta tag to your head section and it should solve your issue:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I have a design that uses media queries, but the media queries only go down to tablet size (i.e. they don't go all the way to 320px for smart phones.
Since I am using width=device-width, smart phones show the page zoomed in.
Should I set width=768px (the smallest size that my media queries go down to)?
Will this mess up the view on tablets that have resolutions larger that 768px wide?
Media queries can do down to even 10px (No real limits on the ability)
Try setting the meta-tag like the following:
<meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width />
See if this solves your problem. It would help if you can provide some code to help us answer better. There is only so much we can understand from just statements.
I'm using flowplayer for a website and it automatically chooses between the HTML5 and flash version depending on the browser capabilities. The problem I have is that when is Flash the video stretches to use the whole player, but in HTML5 is displayed correctly.
Here is how is showing in Flash (Firefox)
And here in HTML5 (Chrome)
Is it possible to fix that issue?
I'm using this code in HTML:
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf" class="flowplayer is-poster" data-ratio="0.416">
<video preload="none">
<source src="http://mysite/video.mp4">
</video>
</div>
I just managed to replicate the problem in jsFiddle
http://jsfiddle.net/xtrPm/
It turns out that buried waaaay deep within the settings is this:
http://flowplayer.org/docs/setup.html#config-options
flashfit: v5.3 whether video aspect ratio in Flash non-fullscreen mode is preserved. Only set this to true if the container's dimensions do not fit the video's aspect ratio, e.g. for playlists with clips of different aspect ratio. Note that setups with dynamic container resizing require the container to be of the same ratio as the video. The option also cannot deal with anamorphic videos as Flash is agnostic of a video's display aspect ratio.
http://jsfiddle.net/L2Exb/11/
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf"
class="flowplayer is-poster" data-flashfit="true">
<video preload="none">
<source type="video/mp4" src="http://encodable.com/uploaddemo/files/video/butterfly..mp4" />
</video>
</div>
I use this method to fix this problem.
clip: {
url: 'mp4:vod/demo.flowplayer/buffalo_soldiers.mp4',
scaling: 'fit', // this line make it work
provider: 'hddn'
},
I've implemented video.js on one of our sites, and our videos play normally in every browser except for Safari on Mac. It's choppy at best in Safari, if it continues to play at all.
Here's one example video, though all exhibit this behavior:
jsfiddle here: http://jsfiddle.net/e9M4a/6/
<div class='videoWrapper'>
<video
class='video-js vjs-default-skin'
poster='https://goodtogo-production.s3.amazonaws.com/videos/posters/000/000/021/large/Group_Hospitality.png'
data-setup='{ "controls": true, "autoplay": false, "preload": "auto", "height": 320, "width": 568}'>
<source src='https://goodtogo-production.s3.amazonaws.com/videos/files/000/000/021/original/Group_Hospitality_v1_with_tag.mp4' type='video/mp4'></source>
</video>
</div>
I've googled a bit and found this link http://help.videojs.com/discussions/problems/504-no-audio-and-choppy-video-in-safarimac suggesting that it could be an encoding problem, but as far as I can tell the encoding is OK, and it plays normally via Quicktime.
The video playback is choppy for me in the jsfiddle via Safari as well, so I'm pretty sure it's not something in our particular implementation on the site.
Can anyone see what's wrong?
It's simply because your mp4 file is huge in terms of file size, it's over 140mb! It's very choppy in my browser too (IE10). For a video that's 4:17 long you should be able to encode it to within 10mb only.
Also the video dimensions are big as well. Resize the video to only the dimensions you're using in the player (width: 568 and height: 320).
Then watch your movie stream smoothly.
My LG Optimus One mobile has a resolution of 320x480. Yet only media queries with a max-width of 800px (and everyone knows that 320 = 800 !) are triggered on that mobile.
Any explanation?
The explanation is that max-width query triggers for all sizes smaller than the specified maximum width. If you'd like to restrict your stylesheet to 800px+, you'll need to use min-width 800px.
You have to use this code in the head section:
<meta name="viewport" content="width=device-width, initial-scale=1">
#mike hmm, I suspect you might be missing the declaration in your . This should tell the browser to adjust it's viewport size to the width of the screen (i.e.: 320px) instead of the (arbitrary) desktop screen width it was provided with as a default (i.e.: 800px).
The following thread might help shed some light on this issue:
Android browser reporting the wrong screen size?