I am using jwplayer to embed responsive videos and I have a few issues:
First, on iPad, the video will always be small. I'm using
'width': '100%'` and `'aspectratio': '12:9'`
and the video container size is ok but the movie is really small with a lot of black screen around it. Also, if I fix the width and height, the movie is still very small.
I tried using iframe - http://support.jwplayer.com/customer/portal/articles/1406644-making-jw-player-responsive. Now the movie size is ok but I can't find an option to add poster.
if you put a tiny video on host and you want to play it as original size this issue happend.
use this below:
width: '100%',
aspectratio: "16:9",//Common values are 16:9, 24:10 or 4:3
stretching: "uniform"//stretching (uniform,fill,exactfit,none)
Related
I've the following constraints which are working perfectly fine over Chrome in Desktop (simulating mobile resolution)
const constraints = {
audio: false,
video: {
width: screen.width,
height: screen.height
}
};
navigator.mediaDevices.getUserMedia(constraints).then(stream => {})
However when actually trying this on iPhone / Safari the camera doesn't respects this at all and gets super small or distorted - removing the width / height from the constraints makes it better ratio but not full screen at all, just centralized.
I've also tried with min / max constraints without lucky.
Is there any way to get this working on iPhones?
I have built a few AR Websites which are mobile first. When you request a resolution the web browser sees if the resolution exists, and if it doesn't it then decides if it should emulate the feed for you. Not all browsers do emulation (even though it is part of the spec). This is why it may work in some browsers and not others. Safari won't emulate the resolution you are asking for with the camera you have picked (I presume the front).
You can read more about this here (different problem, but provides a deeper explaination): Why the difference in native camera resolution -vs- getUserMedia on iPad / iOS?
Solution
The way I tackled this is:
Without canvas
Ask for a 720p feed, fallback to 480p feed if 720 gives an over-constrained error. This will work cross-browser.
Have a div element which is 100% width and height, fills the screen, and sets overlay to hidden.
Place the video element connected to the MediaStream inside, make it 100% height of the container. The parent div overlay hidden will in effect crop the sides. There will be no feed distortion.
With canvas
Do not show the video element, use a canvas as the video view. Make the canvas the same size as your screen or the same aspect ratio and use CSS to make it fill the screen (latter is more performant).
Calculate the top, left, width and height variables to draw the video in the canvas (make sure your calculation centers the video). Make sure you do a cover calculation vs fill. The aim is to crop the parts of the video which do not need to be shown (I.e. like the descriptions of various methods in https://css-tricks.com/almanac/properties/o/object-fit) . Example on how to draw video into a canvas here: http://html5doctor.com/video-canvas-magic/
This will give you the same effect of what you are looking for. Production examples of something similar.
https://www.maxfactor.com/vmua/
https://demo.holitionbeauty.com/
P.s. when I get time I can code an example, short on hours this week.
There are a couple of quirks on mobile gUM() you need to know about.
First, if the device is in portrait orientation things work weirdly. You need to swap the width and height. So, let's say you're on a 480x640 device (do those even exist? who cares? it's an example). To get the appropriate size video you need
const constraints = {
audio: false,
video: {
width: screen.height,
height: screen.width
}
};
I can't figure out exactly why it's like this. But it is. On iOS and Android devices.
Second, it's hard to get the cameras to deliver exactly the same resolution as the device screen size. I tweak the width and height to make them divisible by eight and I get a decent result.
Third, I figure the sizes I need by putting a <video ...> tag in my little web app with CSS that makes it fill the browser screen, then querying its size with
const rect = videoElement.getBoundingClientRect()
const width = rect.width > rect.height ? rect.width : rect.height
const height = rect.width > rect.height ? rect.height : rect.width
This makes the mobile browser do the work of figuring out what size you actually need, and adapts nicely to the browser's various toolbars.
Every time the window is sized from big:
http://res.cloudinary.com/liberationfront/image/upload/v1497626018/vb1_t29xlz.png
To small:
https://res.cloudinary.com/liberationfront/image/upload/v1497625905/vb2_gtmjrl.png
There is all of a sudden a gap.
The problem is likely that your images don't all have the exact same aspect ratio, so some of them end up a pixel taller than others in some cases. Then the floated columns don't clear properly.
You can either re-crop your images, which is a fragile solution since you then rely on all future images being perfectly cropped, or you can set your cards' height through CSS and let the images flow to fit. Often using background images gives much more flexibility.
I suggest looking into Bootstrap's responsive embed and setting your images as backgrounds on a child element. Create your own 1:1 class if needed.
Using SDK 3.5.1 currently
I have some remotely hosted images that I am loading into my ImageViews. I have hires:true already set.
Here is the code I'm using:
var hasattachesThumbIcon = Ti.UI.createImageView({
width:96,
height:'auto',
top:6,
bottom:6,
right:10,
image:hasattachesThumb,
defaultImage:'/icons/placeholder_big.png',
hires:true,
});
I think the issue is that I'm not explicitly setting the height of the image. The reason is that the images are of all different sizes and aspect ratios, my only requirement is that they should fit into a block measuring 96 pixels, so i've set it as such.
Any ideas?
Thanks!
Are you trying to test 2X or 3X images? If you are trying 3X images then hiRes will not work as the support is still not present. Also as suggested by Mark, change from auto to Titanium.UI.SIZE, as auto has been deprecated. Also can you confirm whether the default image is getting displayed till the remote image is being downloaded?
I have a problem regarding a video that is not displayed correctly in the video.js player:
http://www.ulrichbangert.de/kakteen/zeitraffer_vjs.php?Idx=10
As you can see from the page source the dimensions of the player are set to 640x480. The video has the same dimensions which I verified by loading it into my local player and displaying the properties. But: At the left and the right of the video there is a gap of some pixels. The poster is displayed correctly without these gaps. This results in an ugly skip when the player switches from the video to the poster. The poster image is the last frame of the video.
Other videos like this one
http://www.ulrichbangert.de/orchid/zeitraffer.php?Idx=1
are playing fine without a skip but I can't find any difference between these and the faulty one.
My browser is Firefox 23.0.1 thus the ogv video is used.
Can anybody help?
Best regards - Ulrich
I just got to test IE10 on a Surface Pro with 1920*1080 display resolution where "make text and other items larger or smaller" has been set to Large.
On my website I have added the CSS+JS viewport fix in addition to the viewport meta tag, all asking for width: device-width (plus I added a "min-width: 320px;" to the #-ms-viewport definition to ensure it never gets smaller than that).
I added some javascript to display the value of window.screen.width and $(window).width to see what the browser ended up using for viewport in IE10, and to my surprise the screen size of a 1920*1080 resolution display was reported as 1280x720!
Now, I can live with with that (just like small phone screens report 320px width no matter their actual resolution, since it is a good size to make stuff human readable across devices for the same font size), but when the 'Metro IE10' is snapped to the side of the screen, the problem comes: IE10 tries to make a 320px rendering of the website, but it zooms in so the right side of it is hidden.
I tried Microsofts own test page: http://ie.microsoft.com/testdrive/Graphics/MakeItSnappy/
It does the same thing - on the Surface Pro the right side is hidden, and you need to drag left/right to see it, and you cannot even zoom out to view the full width!
But when trying the same thing on my laptop with a 'normal' 1366x768 display (rendered as 100%), the snapped IE10 display has the perfect size.
Ok, I guess this is a Microsoft Windows scaling bug - but my question is: Has anybody else experimented with changing the "make text and other items larger or smaller" to 125% or 150% and making websites adapt correctly?
Check out this fix from developer Matt Stow
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html