sul-dlss / media

placeholder (currently) for media team work
1 stars 0 forks source link

16:9 streaming video should appear full frame in sul-embed #147

Open michaelangeletti opened 6 years ago

michaelangeletti commented 6 years ago

If the default streaming video player has a 16:9 aspect ratio, then any 4:3 source content should appear pillarboxed, as it does in this example:

https://searchworks.stanford.edu/view/yw022qx7774

However, 16:9 video should display full frame. When streaming 1280x720 sized .mp4 video service copies (1.78:1 PAR, 16:9 DAR), media player creates black bars running vertically at left and right edges of the image (pillarbox). Resizing the browser window can eliminate the bars (player dynamically resizes to correct display if browser is a certain size), but display of 16:9 content seems to show the pillarboxing by default.

Here are some examples:

https://searchworks.stanford.edu/view/yv769zp5591 https://searchworks.stanford.edu/view/td724fk8217

jcoyne commented 1 year ago

The aspect ratio seems to be identical when opened in VLC or sul-embed.

Screenshot 2023-09-19 at 11 34 03 AM

Is the problem here that the iframe is limited to 400px tall in Searchworks?

Screenshot 2023-09-19 at 11 39 35 AM
michaelangeletti commented 1 year ago

The aspect ratio is correct in sul-embed, but if I remember correctly, we would prefer that the image isn't pillarboxed. So yes, I think it is the 400px limitation. I think ideally, the image would be sized into a window based on the aspect ratio (and not the iframe spec) to avoid either letterboxing or pillarboxing. A large percentage of our streaming video is either 16:9 or 4:3, although of course there are some that do not conform to those standards. @oceanofsound , do you concur?

oceanofsound commented 1 year ago

Yes, that would be the ideal - no letterboxing or pillarboxing.

jcoyne commented 1 year ago

The 400px height comes from https://github.com/sul-dlss/sul-embed/blob/050cd3bb53aa4cd99d0ec28304648e3fa5fd05ae/app/viewers/embed/viewer/media.rb#L27-L29

But I think we could pass in a different maxheight here: https://github.com/sul-dlss/SearchWorks/blob/master/lib/purl_embed.rb#L13C43-L13C43. The question is what should the value be? This is a challenging problem because the user can control the width of the screen and we don't have any stored metadata (in the access system) that knows the aspect ratio.

It may be possible to style the iframe as: height: calc(51.5cqw + 60px); which reduces the bars, but doesn't completely eliminate them.