Webrtc stream does not scale and fit full height/size of the player on ios device

drake 2018-10-25 03:08:00 UTC #1

hi Support Team,

we did a test and style the h5s player using:

<video class="h5video1" id="h5sVideo1" autoplay webkit-playsinline playsinline style="object-fit:fill; width:720px; height:200px;">

with our video source @ 16:9.

on android devices the video scale and fit to width:720px; height:200px area.

however on ios devices the video does not scale, it keeps the source aspect ratio and crop the top/bottom. any way that i can have it scale and fit into the player (similar behaviour as android)?

Thanks

pujieyang 2018-10-25 03:12:07 UTC #2

Could you share some image?

drake 2018-10-25 05:05:00 UTC #3

pujieyang 2018-10-26 03:59:05 UTC #4

You can refer demo.html there has additional settings for iOS

drake 2018-10-26 05:21:03 UTC #5

hi pujieyang, demo.html5 is not really helpful because it is not using object-fit:fill property.

in our application we need to style it with object-fit:fill so that our video source can fit and custom width/height. i have attached another picture hopefully can explain better.

thanks

drake 2018-10-26 05:21:40 UTC #6

linkingv 2018-10-26 14:01:04 UTC #7

can you try in safari of MacOS? i think this is the limit of safari.

drake 2018-10-29 04:45:57 UTC #8

hi LinkingV,

the same effect (where the player keeps the source video aspect ratio and crops the top/bottom of the video) can be replicated on Chrome/Safari on an iOS device.

no such issue for HLS video though.

Thanks

pujieyang 2018-10-29 23:16:23 UTC #9

Chrome and safari use same web view in iOS