Question

我正在尝试找出与播放提示点的[仅限桌面]浏览器窗口相关的确切位置（在媒体播放时移动的圆形按钮）和通过app.on_insert += all_users_created_equal app.on_pre_PATCH_users += restrict_role_updates_to_admins ... def all_users_created_equal(resource, docs): """Ensure that all users are created as end users. Managers and Admins must be granted these roles by an existing manager or admin.""" if resource == 'users': for doc in docs: doc['role'] = 'user' def restrict_role_updates_to_admins(request, lookup): if 'role' in request.json: users = app.data.driver.db['users'] user = users.find_one({'name': request.authorization.username}) if user and user['role'] != 'admin': # Non-admins cannot update roles. Break the lookup to fail the request. lookup['_id'] = None的客户端绑定矩形或整个范围滑块本身的getClientRects()。这在纯JavaScript中是否可行？当然，html5组件在每个浏览器上看起来都不同，因此无论我走到哪里，它的位置和尺寸都会有所不同。

Chrome的开发者工具使用阴影对象显示其浏览器以表示元素。但我似乎无法使用javascript收集这些元素。

似乎最好的方法是找到边界矩形，比如getClientBoundingRect()，然后使用魔术函数和浏览器嗅探以及播放currentTime属性等等来提出一个高度脆弱的黑客代表实际点的像素位置...这是我正在采取的方法，但想要更好的东西。

pps我正在寻找使用浏览器的标准html5音频控件来实现此目的的方法。我意识到我可以自己动手了。

Answer 1

查看此脏代码是否为util

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
        #div1 {
            width:600px;
        }
        #div2 {
            position:relative;
        }
        #div3 {
            position:absolute;
            border:1px solid #c0c0c0;
            left:101px;
            right:187px;
            top:-28px;
            height:14px;
            background:#fff;
        }
        audio {
            width:100%;
        }
    </style>
</head>
<body>
    <div id="div1">
        <audio controls id="player">
            <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        </audio>
        <div id="div2">
            <div id="div3">
                <div style="position:relative;">
                    <div id="btn" style="position:absolute;border-radius:50%;background:red;width:10px;height:10px;top:2px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $('#player').on('timeupdate', function() {
        document.getElementById('btn').style.left = '' + (this.currentTime / this.duration * 100) + '%';
    });
    </script>
</body>
</html>

在标准的html5音频元素中获取范围滑块的边界矩形？

1 个答案: