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 标签两种方式。

两者的区别包括:

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

版权声明:本文为u012557814原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。