Using AMP version 2.0.0, default skin.
I'm trying to play a 1:1 aspect ratio video from my media services account in Azure media player. Doing this using 800/500px width/height caused the video to extend well below the height of the modal window it is playing in. I fixed this issue by setting the height of the video to 500px and the width to auto (when non-fullscreen). This setting works for both 16:9 and 1:1 aspect ratio (it's not ideal, but it does work).
When I fullscreen the video, the width and height are set to 100%, and so half of the video is lost. I would like the video to play with height max and black letterboxing at the sides, as it does in WMP. If I could get the same effect when playing in non-fullscreen that would also be good. If I set the video height to anything other than 100% when the player is fullscreen it just moves the playbar up the screen rather than resizing the video. Anyone have any advice on how to get this working?
As a last resort I would also accept not being able to set the video to fullscreen, but I can't find documentation on how to do that either.
Issue here was a rogue css rule setting the height of all s to 100%
Related
Please be informed, we are using aws chime single js sdk to create a chat room. Its working perfectly fine but our dimensions only increase proportionately for example its dimensions only work if it is 400 width and 250 height and not the other way with 400 height and 250 width.
For your information, attaching a image.
This is test video chat room. As you can see, the viewport dimensions is 400 width x 700 height. But the video tile only reaches 400px width and 250px height, which means it is only the quarter of the viewport's dimension. What i want is that tile should fully cover the viewport's dimension to 400w x 700h like the one in whatsapp video chat. We tried changing css dimensions like object-fit:cover, max-height, max-width. Created a wrapper div under video tag, but none of them works for us. Shall appreciate should you give us some clues on this issue.
So, on my website there are going to be mulitple videos all with different content that has been submitted by users and uploaded to the site.
Some videos that users have uploaded have different frame widths and heights.
For example:
(Video 1) - Frame width: 1280.
(Video 2) - Frame width: 480. Frame height 360.
The problem is that when a video with a different frame height is used, the actual HTML5 video itself changes it's height. It get's smaller or larger, I do not want that, I want all videos to remain the same size regardless of the video frame height.
Like Youtubes, all of the videos are exactly the same width and height, I want it like thiers.
To give you guys more of an idea of what I mean, I've gave a link below to the html file:
https://mega.nz/#!oMpwDQ7a!r5wO1GfG0c5Gj5dd5xE8pk1Udl5GxoaQ37pDwLAgcXk
.
Note: I have tried almost everything, changed CSS code 1million times, tried 3rd party apps, nothing is giving me what I want.
Best regards, thanks.
In order to have all videos be the same size, you will need to either stretch the video (typically bad, don't do this) or add bars to the top/bottom or sides to show the original video dimensions. With html5 video, all you need to do to achieve this is apply a width and height to the video tag.
<style type="text/css">
video{width: 500px;height:300px;position:relative;margin-top:-20px;}
video:hover{cursor:pointer}
</style>
Try this in your source file, it will cause all your videos to be the same size, and will simply add bars to the files to make them all take up the same space (note how it adds to the top/bottom on one, and the sides on the other).
Even youtube does this if you video file is of a different aspect ratio (you'll notice black bars on those youtube videos, ex: https://www.youtube.com/watch?v=2Or1Ui7yM7Q this video was shot on a square monitor, and is not widescreen aspect).
I am currently developing an samsung smart tv app using the sdk 3.5.2 (as required)
I am using the SEF plugin and with setDisplayArea(), I am able to display a full screen video.
But now I am facing problem that I would like to overlay 2 divs, a header and a footer, on top of the video, but I could not have it done correctly.
What have I tried and got is desribed as follow:
In my html, I have include the plugin, and got the player object z-index and position set
<object id="pluginPlayer" border=0 classid="clsid:SAMSUNG-INFOLINK-PLAYER"
style="position:absolute;z-index:10;left:0px;top:0px;width:1280px;height:720px;"></object>
<object id="pluginAudio" border=0 classid="clsid:SAMSUNG-INFOLINK-AUDIO"></object>
<object id="pluginTVMW" border=0 classid="clsid:SAMSUNG-INFOLINK-TVMW"></object>
In my css, I have set the z-index of the header div
#SplashHeader{
position: absolute;
top:0px;
left:0px;
height:40px;
width: 1280px;
background: grey;
z-index: 100;
}
In my Js, I have called the setdisplayarea()
this.plugin.SetDisplayArea(0, 0, 960, 540);
(To sidetrack, here's another question I do not quite understand as the API states the width and height parameter of this function must not exceed 960 * 540, but I am currently developing for a 1280 * 720 machine...so I do not know is it correct to set it 960 * 540)
And I got the header shown successfully, however the video itself auto-scale and show below the header, which is not quite follow my expectation.
(I expect the video still be shown full screen with a header show on top of it, but not make the video auto-scale and shrink vertically..)
Anyone can give me advice? Thanks!
The SEF player is located in the most back of display layers so you don't need to specify any z-index there. Also if possible please don't use z-index more than 99 in Samsung TV Apps, some resources said that 100 and above are used for Samsung native display such as IME and Popup.
And for video display on 1280x720 resolution is a bit tricky. The video display is always full screen on 960x540 whether you're using 720p or 540p mode. The video will be stretched to 1280 from 960 or the ratio is 0.75. If you want to display width of video for 640x720 pixel then the size of video is 480x540.
Last advice:
call setdisplayarea again after play function
do test on real device (emulator sometimes lie on video display)
I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.
I'd like to get the aspect ratio of a YouTube video, to resize the player accordingly. I'm programming the YT player using JavaScript.
I would suggest hitting the oembed url:
https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v={videoID}&format=json
This gives you the exact video dimensions for videos that are public. I'm not sure about private videos though. It will also return thumbnail dimensions, which seem to be different im some cases, so just be sure to not mix them up.
The only place that exact video dimensions are exposed in a Data API call is when you make a videos.list(part=fileDetails, id=VIDEO_ID) call using the v3 API, while authenticated as the owner of the video. It's returned in the video.fileDetails.videoStreams[].aspectRatio property. This isn't particularly useful, since you need to be authenticated as the video's owner in order to get that info.
If you just have a webpage, and want to make a JSONP call to get a hint about whether a given video is 16:9 or 4:3, you can do that via something like
http://gdata.youtube.com/feeds/api/videos/VIDEO_ID?v=2&alt=jsonc&callback=myCallback
E.g.
http://gdata.youtube.com/feeds/api/videos/F1IVb2_FYxQ?v=2&alt=jsonc&callback=myCallback
has "aspectRatio":"widescreen" set in its response, which is a hint that the video is 16:9 (or close to 16:9).
http://gdata.youtube.com/feeds/api/videos/u1zgFlCw8Aw?v=2&alt=jsonc&callback=myCallback
does not have aspectRatio set at all, which means that the videos is 4:3 (or close to 4:3). It's not always the exact aspect ration, but it's close enough for the vast majority of videos to be useful.
Here is how I do it. I get the aspect ratio from the youtube image.
<img id"nnS7G3Y-IDc-img" src="http://i.ytimg.com/vi/nnS7G3Y-IDc/default.jpg" />
<script>
//using jquery
var height = $('#nnS7G3Y-IDc-img').css('height');
var width = $('#nnS7G3Y-IDc-img').css('width');
height = height.replace('px', '');
width = width.replace('px', '');
var arB = height / 3;
var arT = width / arB;
if (arT == 4) {
//do what you need to with the aspect ratio info from here
//just demonstrating with an alert
alert ("4:3");
}
else {alert ("16:9");}
</script>
I pull all the video information from the youtube api and then store all the video information in a database beforehand, so if you are doing this on the fly, you might have to hide the image on the page and then get the aspect ratio that way.
edit** Another option, and probably the best, would be to use youtube's api.
Search for a video, and check if the data->items->aspectRatio is set. I don't think it's set on 4:3 video, but on 16:9 it is set to widescreen. Should be as simple as if (data->items->aspectRatio) {ratio= "16:9"} else {ratio="4:3"}
Aspect ratio apparently depends on the quality level. Taken from the YouTube Docs:
Quality level small: Player height is 240px, and player dimensions are at least 320px by 240px for 4:3 aspect ratio.
Quality level medium: Player height is 360px, and player dimensions are 640px by 360px (for 16:9 aspect ratio) or 480px by 360px (for 4:3 aspect ratio).
Quality level large: Player height is 480px, and player dimensions are 853px by 480px (for 16:9 aspect ratio) or 640px by 480px (for 4:3 aspect ratio).
Quality level hd720: Player height is 720px, and player dimensions are 1280px by 720px (for 16:9 aspect ratio) or 960px by 720px (for 4:3 aspect ratio).
Quality level hd1080: Player height is 1080px, and player dimensions are 1920px by 1080px (for 16:9 aspect ratio) or 1440px by 1080px (for 4:3 aspect ratio).
Quality level highres: Player height is greater than 1080px, which means that the player's aspect ratio is greater than 1920px by 1080px.
My goal was to get aspect ratio for any video, not only for those for which I'm owner.
Thus the trick is to use https://developers.google.com/youtube/v3/docs/videos/list with player provided in parts and then parsing width and height of returned embed html.
Maybe not a good answer, but there seems to be an assumption amongst other answers that YouTube videos are either 16:9 or 4:3.
But they can have a pretty much arbitrary aspect ratio, and with portrait phone videos having become quite common, it's becoming less of a rarity for a video on YouTube to be something different.
For these non-standard aspect ratios, as a quick manual fudge, I've resorted to playing them in full screen, doing a screen capture, and cropping the image down.
I've put a couple of examples of arbitrary aspect videos at http://youtube-aspect-ratios.xtra.ink.