VideoPlayer height fit content / No black bars
up vote
0
down vote
favorite
I wan't my VideoPlayer to have the height of the Video itself, so that there are no black bars. This way I can't set height to a constant value because on different devices with different width, the video has black bars. When I do this:
<VideoPlayer #video
src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
autoplay="true"
fill="false"
muted="true">
</VideoPlayer>
It looks like this:
I know the video aspect ratio is 16/9.
I tried something like this: [height]="video.clientWidth / (16/9)" but it's not working.
What can i do?
nativescript angular2-nativescript
asked Nov 10 at 20:25
Jonas
336114
add a comment |
up vote
0
down vote
favorite
I wan't my VideoPlayer to have the height of the Video itself, so that there are no black bars. This way I can't set height to a constant value because on different devices with different width, the video has black bars. When I do this:
<VideoPlayer #video
src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
autoplay="true"
fill="false"
muted="true">
</VideoPlayer>
It looks like this:
I know the video aspect ratio is 16/9.
I tried something like this: [height]="video.clientWidth / (16/9)" but it's not working.
What can i do?
nativescript angular2-nativescript
asked Nov 10 at 20:25
Jonas
336114
I doubt we have any property namedclientWidth, you might have you get the width and height of video source and calculate aspect ratio based on device width.
– Manoj
Nov 10 at 20:35
You mean based on the screen width? That seems like a poor way to me, is there really no way to get the width of an element?
– Jonas
Nov 10 at 20:39
Width of video? That's exactly what I meant. Check theVideoSourceapis, you have option to get width and height of video, then definitely you might have to calculate the aspect ratio based on your screen size. Honestly I don't understand what seems poor here, this is just the case you would do for images too.
– Manoj
Nov 11 at 10:16
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I wan't my VideoPlayer to have the height of the Video itself, so that there are no black bars. This way I can't set height to a constant value because on different devices with different width, the video has black bars. When I do this:
<VideoPlayer #video
src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
autoplay="true"
fill="false"
muted="true">
</VideoPlayer>
It looks like this:
I know the video aspect ratio is 16/9.
I tried something like this: [height]="video.clientWidth / (16/9)" but it's not working.
What can i do?
nativescript angular2-nativescript
asked Nov 10 at 20:25
Jonas
336114
I wan't my VideoPlayer to have the height of the Video itself, so that there are no black bars. This way I can't set height to a constant value because on different devices with different width, the video has black bars. When I do this:
<VideoPlayer #video
src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
autoplay="true"
fill="false"
muted="true">
</VideoPlayer>
It looks like this:
I know the video aspect ratio is 16/9.
I tried something like this: [height]="video.clientWidth / (16/9)" but it's not working.
What can i do?
nativescript angular2-nativescript
nativescript angular2-nativescript
asked Nov 10 at 20:25
Jonas
336114
asked Nov 10 at 20:25
Jonas
336114
asked Nov 10 at 20:25
Jonas
336114
asked Nov 10 at 20:25
Jonas
336114
asked Nov 10 at 20:25
Jonas
336114
336114
I doubt we have any property namedclientWidth, you might have you get the width and height of video source and calculate aspect ratio based on device width.
– Manoj
Nov 10 at 20:35
You mean based on the screen width? That seems like a poor way to me, is there really no way to get the width of an element?
– Jonas
Nov 10 at 20:39
Width of video? That's exactly what I meant. Check theVideoSourceapis, you have option to get width and height of video, then definitely you might have to calculate the aspect ratio based on your screen size. Honestly I don't understand what seems poor here, this is just the case you would do for images too.
– Manoj
Nov 11 at 10:16
add a comment |
I doubt we have any property namedclientWidth, you might have you get the width and height of video source and calculate aspect ratio based on device width.
– Manoj
Nov 10 at 20:35
You mean based on the screen width? That seems like a poor way to me, is there really no way to get the width of an element?
– Jonas
Nov 10 at 20:39
Width of video? That's exactly what I meant. Check theVideoSourceapis, you have option to get width and height of video, then definitely you might have to calculate the aspect ratio based on your screen size. Honestly I don't understand what seems poor here, this is just the case you would do for images too.
– Manoj
Nov 11 at 10:16
I doubt we have any property named
clientWidth, you might have you get the width and height of video source and calculate aspect ratio based on device width.– Manoj
Nov 10 at 20:35
I doubt we have any property named
clientWidth, you might have you get the width and height of video source and calculate aspect ratio based on device width.– Manoj
Nov 10 at 20:35
You mean based on the screen width? That seems like a poor way to me, is there really no way to get the width of an element?
– Jonas
Nov 10 at 20:39
You mean based on the screen width? That seems like a poor way to me, is there really no way to get the width of an element?
– Jonas
Nov 10 at 20:39
Width of video? That's exactly what I meant. Check the
VideoSource apis, you have option to get width and height of video, then definitely you might have to calculate the aspect ratio based on your screen size. Honestly I don't understand what seems poor here, this is just the case you would do for images too.– Manoj
Nov 11 at 10:16
Width of video? That's exactly what I meant. Check the
VideoSource apis, you have option to get width and height of video, then definitely you might have to calculate the aspect ratio based on your screen size. Honestly I don't understand what seems poor here, this is just the case you would do for images too.– Manoj
Nov 11 at 10:16
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243097%2fvideoplayer-height-fit-content-no-black-bars%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I doubt we have any property named
clientWidth, you might have you get the width and height of video source and calculate aspect ratio based on device width.– Manoj
Nov 10 at 20:35
You mean based on the screen width? That seems like a poor way to me, is there really no way to get the width of an element?
– Jonas
Nov 10 at 20:39
Width of video? That's exactly what I meant. Check the
VideoSourceapis, you have option to get width and height of video, then definitely you might have to calculate the aspect ratio based on your screen size. Honestly I don't understand what seems poor here, this is just the case you would do for images too.– Manoj
Nov 11 at 10:16