I wanted to play an Ultra HD (4K) Video with JavaFX 2 MediaPlayer but do only get a black screen (run on JRE 8/Windows 7). There are no error messages.
Does anyone know if JavaFX can play Ultra HD (4K) videos or where I can find these information?
Thank you.
I can confirm the player doesn't support anything higher than 1920 pixels wide.
I created a video this weekend with X pixels of 1980 and it couldn't play. I figured out last night to drop it down to 1920 to make the video play.
The Y pixels can be above 1080, not sure how far above you can go, but I was at around 1100 with an X of 1800 and it still played.
I can't confirm this for the Mac (with 8u60 ea). On my MacBook Pro Retina a 4K video does play, but the screen is somehow split in the middle and the right half of the video has the wrong colors.
Related
I am developing a website. My target device is the Samsung Tab A8. As per the specs from their official website, its resolution is 1920 x 1200.
When I use the Google Chrome's Dev Tools and sets the responsive width and height to the above values, my website looks perfect on my Desktop PC(22 inch screen). But when tested on Samsung Tab A8 device, it breaks.
And Samsung Tab A8 is not in the list of simulators in Google Dev Tools. So am confused regarding the width and height that should be used in media queries. What should be the value that I should use for testing in Google Chrome in my desktop PC.
The issue is caused by the difference between Hardware Pixels (physical pixels) and Software Pixels (CSS pixels).
They are not the same!
High-resolution mobile devices have a high PPI (pixel density) to ensure sharp and clear edges. However, it would be hard to read text on such small displays with such high resolution. As such you have a "technology" implemented called DPR (Device Pixel Ratio). For most high-resolution devices it is 2. That means, that for every CSS pixel you have 2 physical pixels. In other words, your tablet has only a resolution of 960x600px CSS-wise.
An easy workaround would be the usage of:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
That ensures that the hardware pixels are the same as the software pixels. Note, that you harm User Experience and possibly make it harder to read the text for users.
Using a-framemin.js 1.3.0, a-sky with equirectangular pictures, and an oculus quest2, I get jerky (flickering) results on most of my pictures.
The problem is often at the bottom of the pano !
Center is OK !
I tried several image resolutions (4096x2048, 6080x3040, 8192x4096) -> same problem.
I tried picture resolution (72 dpi, 96 dpi) -> same problem
I tried different jpg compression rates (from 60% to 80 %) -> same problem
You can see some pictures HERE
a-frame or oculus q2 or something else might not like grass, roofs, lines.
The a-frame sphere is too small (rooms are wider than what is shown using my vr headset !)
I don't know what to check now. I would really appreciate any help.
I am studying a-frame a lot. Many webpages are outdated.
Note : I get a black screen on my computer when pressing the VR button.
Problem with 1920x1080 screen res.
Please, I need your help.
I'm dealing with a background video for our homepage. This section has 100vh and is full-width. I'm using DIVI as a builder.
We hired a professional videographer to record a video for us. Now he asks me what should be the ideal:
frame size
frame rate
codec
file size
I've done some research and it seems like that the ideals are:
frame size: 1280 x 720
frame rate: 30FPS
codec: I don't know
file size: the less the better
Please, does anyone have any experience with background video? I'm pretty lost.
Also, would you upload it in the WordPress media library or would you use Vimeo/YouTube? I think you can't use YouTube as a background video, correct?
Thanks a lot!
Frame size:
1280 x 720 (=720p) means HD quality, which is quite good, but it is rather up to you, what quality do you find acceptable. Often 1920 x 1080 pixel (=1080p, fullHD) is used for background videos, like my main background video source is https://coverr.co/ where you can download free videos, specifically made for the purpose of being background videos. Those are 1920 x 1080 big. I would say, if you can ask for multiple files, ask for both, 720p and 1080p quality to be able to make a good decision.
The file size is connected to this, so the smaller frame sized video you will use, the smaller file size you will get.
Frame rate:
You could take a look at this image:
https://miro.medium.com/max/1300/1*uMlkXIMNF4VIZoi85NZ3aQ.png
to see what it means.
Movies on blu ray, dvd and cinema use 24 FPS, so that should be enough for you too. Here as well, the lower FPS means less filesize.
Codec:
h264
I'm a WordPress plugin developer and we always suggest this, when our users cannot figure out how to create a video, that plays on all browsers. So far it worked out well for everyone.
YouTube vs Vimeo vs MP4:
By default you cannot make Youtube videos to be backgrounds. There are some coding tricks, which might works, but I wouldn't suggest it.
Vimeo only allows background videos for Pro Vimeo users.
Using mp4 is simple, and also it works better in mobile and tablet devices. Some devices are opening up their Vimeo/Youtube applications automatically, when a Vimeo or Youtube video is started on a website. This is quite bad and your page will end up without background.
You should also note, that most browsers (even on desktop) only allow you to play videos automatically, if you will mute the video in the html code:
https://www.w3schools.com/tags/att_video_muted.asp
What #Gabor said.
1080p (1920 x 1080) is a good resolution for desktop.
If your user is on a mobile or other small-form-factor device it would be good if you could have the choice of 720p (1280x720) or even 360p (360x640). Those will save data downloads and fit the smaller devices. Look for a plugin that delivers the appropriate size video. You'll need a video file for each resolution.
Or don't show background video on users' mobile devices.
In your design think through what will happen in portrait mode. You probably want to clip off the right and left sides of the video material, so the center part fills the screen. So, the action should be in the center.
Is this video huge? Does it play for many minutes? If not, you absolutely should host it on your own site. Why get involved with, and pay for, some third-party media service if you don't have to? If it's really large (> 10MiB or so) you probably should ask another question and give more details.
Put no audio tracks in your background video files. Browsers restrict the playing of audio in background video, so there's no need to make your files fatter with audio tracks that won't play. (If you have audio, consider hosting a separate file to send users who click on the video to view it; most users won't.)
Use .mp4 files with H.264 video in them (one file per resolution). Other stuff, like webm with vp8 video, might generate smaller file sizes. But they don't play in as many makes and models of browser (I'm looking at you, Apple Safari.)
The video, in H.264 parlance, should be coded in the so-called Constrained Baseline Profile. It saves power when played on mobile devices and works better on slower devices.
Ask your videographer to give you streaming mp4 files (also known as fragmented mp4): they can start playing as soon as the first frame is downloaded.
Ask your videographer for advice about file bitrate. Your 1080p files should look decent coded with variable bit rate with a target of one megabit / second (8 seconds per megabyte). Your lower-resolution files will need a smaller bitrate: that's the point of them after all. But, your bitrate may vary. Action/adventure movies need a higher bitrate to look good than do talking heads.
As #Gabor mentioned, 24 frames/sec should be fine. 15 frames/sec is marginal. Ask your videographer what looks best for the material they created for you. Sometimes material shot at 30 frames/sec looks choppy at 24. (The way H.264 video works, once you get below 24 frames/sec the savings in file size aren't as dramatic as you might guess. 15 frames/sec takes more than half the file size of 30 frames/sec.)
On a 1080p emulator and Smart TV (nVidia Shield) I only get a 960x540 WebView. Is it possible to use the whole resolution available instead?
An HDTV using Android TV is considered as 960x540px display with 2x pixel ratio. Not sure how a 4k TV is recognized, but to use all the pixels, check window.devicePixelRatio .
Im looking for an answer to the same question, but i can confirm the following.
1080p TV Testing
each device configured in setting to only use 1080p 60Hz
Amazon Firestick gets 960 x 540 px in all browsers tested.
Shield TV gets 960 x 540 px in all browsers tested.
new Amazon Fire TV Cube gets 960 x 540 px in all browsers tested.
4K TV Testing
Amazon Firestick (not 4K compatible) gets 960 x 540 px in all browsers tested.
Shield TV (with output setting at 4K 60Hz) gets 960 x 540 px in all browsers tested.
new Amazon Fire TV Cube (with output setting 4K 60Hz) gets 960 x 540 px in all browsers tested.
whats more bizarre is that both 1080p and 4K test the reported pixelratio
was 2. I at least expected to see a pixel ratio of 4 on 960x540 on 4K
I use TVs connected to PC to display large tables of status data.
when fully utilized a 70" 4K TV displays hundreds of different bits of info, its a beautiful thing.
then you get an Nvidia Shield because its "4K" and discover the browser renders at 960 x 540, and the page that looks fantastic in 4K looks like blocky illegible crap.
This is what I did in Android TV 28
My app original resolution is 1080p
JS Code:
document.body.style.zoom = 1/window.devicePixelRatio
You can use WebView#setInitialScale to scale the website according to your needs. To get wanted scale you can use the code:
Point metrics = new Point();
((WindowManager) context.getSystemService(WIDNOW_SERVICE)).getDisplay(metrics);
int scale = (int) (((double) metrics.x) / 3840/*SCREEN_WIDTH*/ * 100);
You should not set additional settings like setUseWideViewPort, because it can overwrite/ignore the scale setting.
I am developing my website's design, and unfortunately I don't have a 4K monitor at the moment, but I want to see how will my website look at that resolution.
I am worrying because my website's background image has 2560 x 1600 resolution and CSS parameter background-size: cover;. I hope it won't have black background-color around the image, just because the image is smaller than 4K.
So is there any way to simulate a 4K resolution on PC?
You can use Mozilla Firefox to do the same.
Press Ctrl+Shift+M and firefox shall switch to 320 X 480 Resolution, Now you can edit the values in top and set it to 4096 X 2160 to emulate 4k resolution.
You will get both Horizontal and Vertical Scrolls
Below is the sample Screen for Same :-
You can test inside a VM with the VM set to have a higher res than your real screen:
https://techcommunity.microsoft.com/t5/windows-dev-appconsult/testing-application-on-various-screen-resolution-s/ba-p/316796