iframe 如何禁止视频自动播放

问题

项目中使用 iframe 访问视频网址，但是有个问题，就是视频会自动播放，网上找了很多方法加 allow 属性，在 url 中 autoplay=false，折腾了半天，都不起作用。

<iframe class="video-frame" src="http//...."></iframe>

解决方法

• 方法1：使用 sandbox 属性，在 iframe 标签加上 sandbox 属性后，魔法般地解决了问题。

<iframe class="video-frame" src="http//...." sandbox=""></iframe>

• 方法2：将 iframe 替换为 video 标签

sandbox 属性

HTML 5 通过 sandbox 属性提升 iFrame 的安全性。sandbox 属性可以防止不信任的Web页面执行某些操作。其好处包括：

• 访问父页面的DOM（从技术角度来说，这是因为相对于父页面 iframe 已经成为不同的源了）
• 执行脚本
• 通过脚本嵌入自己的表单或是操纵表单
• 对cookie、本地存储或本地SQL数据库的读写

iframe vs video

在 html 中嵌入视频可以使用 iframe 或 video 标签两种方式。

两者的区别包括：

	iframe	video
兼容性问题	浏览器支持	依赖浏览器
视频下载速度	较快	较慢
视频元素的控制程度	支持度差（样式和接口）	支持度高（样式和接口）