开发者社区 > 云原生 > 容器服务 > 正文

如何让VOD-视频点播中播放器自适应父容器的宽高,不要出现滚动条和留白

如何让播放器自适应父容器的宽高,不要出现滚动条和留白

展开
收起
JWRRR 2023-05-02 09:50:00 139 0
1 条回答
写回答
取消 提交回答
  • 随心分享,欢迎友善交流讨论:)

    如果您想让阿里云视频云播放器自适应父容器的宽高,可以使用以下方法:

    设置容器的宽高样式为百分比(例如100%),这样播放器就可以根据容器的大小自适应调整。

    在播放器配置中设置"autofit"参数,该参数可以将播放器自动适应父容器大小,避免出现滚动条和留白。

    例如,您可以在播放器的初始化代码中添加以下配置:

    var player = new Aliplayer({ ..., width: '100%', height: '100%', autoplay: true, source: 'http://example.com/video.mp4', skinLayout: [ { name: "bigPlayButton", align: "cc", x: 30, y: 80 }, { name: "H5Loading", align: "cc" }, { name: "errorDisplay", align: "tl", x: 0, y: 0 }, { name: "infoDisplay" } ], autofit: true // 自适应父容器大小 }, "player-div"); 以上是使用阿里云视频云播放器自适应父容器的示例,您可以根据实际情况进行配置。

    2023-05-05 15:29:16
    赞同 展开评论 打赏

国内唯一 Forrester 公共云容器平台领导者象限。

相关电子书

更多
互联网音视频点播业务云上实践 立即下载
《VoD问题排查与实战手册》 立即下载
低代码开发师(初级)实战教程 立即下载