VideoPlayer视频组件在某些浏览器位置偏移错位

在全屏切换等时候出现, 有些游览器来回切就正常几次~~-_-!但electron必现

visibility: visible; position: absolute; bottom: 0px; left: 0px; transform-origin: 0px 100% 0px; z-index: -32768; width: 1334px; height: 750px; object-fit: fill; transform: matrix(0.197151, 0, 0, 0.197151, 0, -301.068);

好像上这个matrix出等问题, 不知道这东西在哪里可以调整, 我试试去~~~~

  • Creator 版本: 3.2.1
  • 目标平台: 个别浏览器(F11全屏), 然后在"electron": "13.2.2"用electron-forge打包必现
  • 重现方式:需要全屏才可以
  • 之前哪个版本是正常的:Chrome正常
  • 编辑器操作系统: Windows10
  • 重现概率: 100%
1赞

升级了3.3.0也有这样都问题, 就是全屏切换, 我修改了下我这里都H5都部分, 不过我上视频全屏播放都, 暂时解决问题, 供大家参考

private setH5Elements(): void {
    if(document && document.getElementsByTagName('video').length) {
    const videoList = document.getElementsByTagName('video')
        for (let i = 0; i < videoList.length; i++) {
            const video = videoList[i];
            if (video.classList.contains('cocosVideo')) {
                video.setAttribute('webkit-playsinline', 'true');
                video.setAttribute('playsinline', 'true');
            }
        }
    }
    view.setResizeCallback(() => {
        this.reSizeVideo()
    })
    this.reSizeVideo()
}

private reSizeVideo(): void {
    const c = view.getCanvasSize()
    const v = view.getVisibleSizeInPixel()
    const d = view.getDesignResolutionSize() // 设计分辨率 : 1334, 750
    // $g.log('view.getCanvasSize 视图中 canvas 的尺寸 : ', c)
    // $g.log('view.getFrameSize 视图中边框尺寸 : ', view.getFrameSize())
    // $g.log('view.getVisibleSizeInPixel 视图窗口可见区域像素尺寸 : ', v)
    if (document && document.getElementsByTagName('video').length) {
        const videoList = document.getElementsByTagName('video')
        for (let i = 0; i < videoList.length; i++) {
            const video = videoList[i];
            if (video.classList.contains('cocosVideo')) {
                // transform: matrix(0.5, 0, 0, 0.5, 0, 0); 
                if (screen.fullScreen()) {
                    // 重新设置高度
                    video.style.bottom = ((c.height - v.height) / 2) + 'px'
                    // 全屏设置 transform
                    const m = `matrix(${v.width / d.width}, 0, 0, ${v.width / d.width}, 0, 0)`
                    video.style.transform = m
                    video.style['-webkit-transform'] = m
                    video.style.width = `${d.width}px`
                    // $g.log('全屏设置 transform : ', video.style.transform)
                } else {
                    video.style.bottom = '0px'
                }
            }
        }
    }
}

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。