Tom*_*uer 5 html javascript video
在使用HTML5视频时,我发现了一个奇怪的不一致.
比较这两个代码段并查看Chrome开发人员工具中的" 元素"标签
<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,未muted设置使用JS对象属性的设置.对于第二个,使用setAttributeworking和DOM属性进行设置.有趣的是,情况并非如此autoplay.
这是为什么？是否存在另一个以这种方式表现的属性示例？这有规则吗？除了测试之外,如何判断哪个属性的属性在JS中的哪种方式？
属性仅用于初始化属性。它们不反映当前状态。
通过直接设置属性，您可以更新对象，但不会影响 dom 属性。
如果您设置src的video（所以你可以看到它在行动），你将看到性能已正确应用
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);