如何通过Azure Media Player API获取视频宽高以消除播放黑边

你需要监听播放器的loadedmetadata事件后再读取尺寸属性，播放器初始化完成时还未加载视频元数据，所以无法获取到videoWidth和videoHeight取值。

具体实现代码如下：

let myOptions = {
    controls: true,
    autoplay: true,
    logo: { enabled: false }
};
myPlayer = amp(video, myOptions);
// 监听视频元数据加载完成事件
myPlayer.on('loadedmetadata', () => {
    // 两种读取方式二选一即可
    // 方式1：调用AMP官方提供的接口
    const realWidth = myPlayer.videoWidth();
    const realHeight = myPlayer.videoHeight();

    // 方式2：读取原生video元素属性，兼容性更强
    // const nativeVideoEl = myPlayer.tech().el();
    // const realWidth = nativeVideoEl.videoWidth;
    // const realHeight = nativeVideoEl.videoHeight;

    console.log('视频实际宽高：', realWidth, realHeight);
    // 按视频比例调整播放器尺寸消除黑边，示例逻辑可根据自身需求调整
    const container = document.querySelector('#player-container');
    const aspect = realWidth / realHeight;
    container.style.height = `${container.clientWidth / aspect}px`;
});
myPlayer.src([{
    src: "<manifestURL>",
    type: "<type>"
}]);

补充说明：

• 若需要适配窗口大小变化，可以额外监听resize事件，在回调中按上述比例逻辑重新计算播放器尺寸即可
• 部分特殊编码的流可能要等playing事件触发后才能拿到准确的宽高，若loadedmetadata拿不到可以替换监听事件为playing

内容的提问来源于stack exchange，提问作者Stanton