Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[需求] 能否添加使用滚轮调节音量的逻辑? #656

Open
zealousfool opened this issue Jun 15, 2024 · 2 comments
Open

[需求] 能否添加使用滚轮调节音量的逻辑? #656

zealousfool opened this issue Jun 15, 2024 · 2 comments

Comments

@zealousfool
Copy link

能否添加使用滚轮调节音量的逻辑。

类似B站,全屏时可以直接使用滚轮调节音量,或者也可以增加到自定义配置,滚轮控制。

@yugchak
Copy link

yugchak commented Jun 16, 2024

把下面这个函数添加到 function registerMouseEvent (h5player) {} 中,之后在画面滚轮就能调整音量了

document.addEventListener('mousewheel', function (e) {
    const player = t.player();
    if (!player || !(player instanceof HTMLVideoElement)) { return }
    if (!isCoordinateInElement(event.clientX, event.clientY, player)) { return }

    //预留出底部80px的区域,避免导致工具栏的操作异常
    const rect = player.getBoundingClientRect();
    if (event.clientY > rect.bottom - 80) { return }

    event.preventDefault();
    e = e || window.event;
    //判断浏览器IE,谷歌滑轮事件
    if (e.wheelDelta) {
        //当滑轮向上滚动时
        if (e.wheelDelta > 0) {
            t.setVolumeUp(0.05);
        }
        //当滑轮向下滚动时
        if (e.wheelDelta < 0) {
            t.setVolumeDown(-0.05);
        }
        //Firefox滑轮事件
    } else if (e.detail) {
        //当滑轮向上滚动时
        if (e.detail> 0) {
            t.setVolumeUp(0.05);
        }
        //当滑轮向下滚动时
        if (e.detail< 0) {
            t.setVolumeDown(-0.05);
        }
    }
}, { passive: false });

@zealousfool
Copy link
Author

把下面这个函数添加到 function registerMouseEvent (h5player) {} 中,之后在画面滚轮就能调整音量了

document.addEventListener('mousewheel', function (e) {
    const player = t.player();
    if (!player || !(player instanceof HTMLVideoElement)) { return }
    if (!isCoordinateInElement(event.clientX, event.clientY, player)) { return }

    //预留出底部80px的区域,避免导致工具栏的操作异常
    const rect = player.getBoundingClientRect();
    if (event.clientY > rect.bottom - 80) { return }

    event.preventDefault();
    e = e || window.event;
    //判断浏览器IE,谷歌滑轮事件
    if (e.wheelDelta) {
        //当滑轮向上滚动时
        if (e.wheelDelta > 0) {
            t.setVolumeUp(0.05);
        }
        //当滑轮向下滚动时
        if (e.wheelDelta < 0) {
            t.setVolumeDown(-0.05);
        }
        //Firefox滑轮事件
    } else if (e.detail) {
        //当滑轮向上滚动时
        if (e.detail> 0) {
            t.setVolumeUp(0.05);
        }
        //当滑轮向下滚动时
        if (e.detail< 0) {
            t.setVolumeDown(-0.05);
        }
    }
}, { passive: false });

感谢。 但是我添加上不管用。同个registerMouseEvent 函数下面,鼠标长按可以是调速率,但是滚轮方法还是没反应。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants