这里有三种情况:
-
document.adoptNode, -
document.importNode和 -
document.createElement+分配 Prop 。
在每种情况下，视频都会自动播放，即使它没有附加到 DOM。这与 <script> 的行为不一致。在附加到 DOM 之前不会评估/下载的元素。
视频应该自动播放吗？
https://gist.run/?id=cb657718c3b6b34c043b34f3356d5a84
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
</head>
<body>
<template>
<video src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"
loop controls autoplay>
</video>
</template>
<script>
let template = document.querySelector('template');
// SCENARIO 1: (causes autoplay)
document.adoptNode(template.content);
// SCENARIO 2: (causes autoplay)
// document.importNode(template.content, true);
// SCENARIO 3: (causes autoplay)
// let video = document.createElement('video');
// video.autoplay = 'autoplay';
// video.controls = 'controls';
// video.loop = 'loop';
// video.src = 'http://video.webmfiles.org/big-buck-bunny_trailer.webm';
</script>
</body>
</html>
最佳答案
这是复制与剪切的区别。
在 adoptNode 中，如果你愿意的话，你正在删除一些已经解释过的东西，而在 importNode 中，你正在复制一个节点(即生成对其他事物的描述)，然后使用该描述在dom本身。
那么哪个是正确的行为呢？两者都是;一个是剪辑，另一个是副本。自动播放只能发生在某件事上，而不是发生在对某件事的描述上。因此，无论什么操作提供了描述(而不是事物)，那么该操作都不适用于自动播放。
关于javascript - 没有附加到 DOM 的视频应该自动播放吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37581912/