我在处理 HTML5 视频时发现了一个奇怪的不一致。
Compare these two code snippets and take a look at the Elements tab in Chrome developer tools
<body>
<script>
const video1 = document.createElement('video');
video1.autoplay = true;
video1.muted = true;
document.body.appendChild(video1);
const video2 = document.createElement('video');
video2.setAttribute('autoplay', 'autoplay');
video2.setAttribute('muted', 'muted');
document.body.appendChild(video2);
</script>
</body>
对于第一个 video
,未设置使用 JS 对象属性的 muted
集。对于第二个,使用 setAttribute
起作用并设置了 DOM 属性。有趣的是,autoplay
的行为始终如一。
这是为什么呢?还有另一个以这种方式表现的属性示例吗?这有规定吗?除了测试之外,如何判断哪个属性的属性在 JS 中的行为方式?
最佳答案
属性仅用于初始化属性。它们不反射(reflect)当前状态。
通过直接设置属性,您可以更新对象,但不会影响 dom 属性。
如果您设置video
的src
(这样您就可以实际看到它),您将看到属性已经正确应用
const video1 = document.createElement('video');
video1.src = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
video1.controls = true;
video1.autoplay = true;
video1.muted = true;
document.body.appendChild(video1);
关于javascript - HTML5 视频静音属性未使用属性应用但使用 setAttribute 应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41656297/