文章/答案/技术大牛

发布

社区首页 >问答首页 >从外部按钮播放Iframe中的视频

问从外部按钮播放Iframe中的视频
EN

Stack Overflow用户

提问于 2021-11-11 15:25:14

回答 2查看 210关注 0票数 1

是否可以从外部按钮启动YouTube iframe的视频播放？

<button>Play Button</button>

<iframe width="560" height="315" src="https://www.youtube.com/embed/HJtJXMKpl2g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

解说者注: iframe视频不属于我。

css

iframe

youtube

javascript

html

回答 2

Stack Overflow用户

发布于 2021-11-11 15:52:07

由于此视频位于iframe和另一个主机中，出于安全原因，您无法通过以下方式访问iframe内部结构

const iframe = document.getElementById("myFrame");
const video = iframe.contentWindow.document.getElementsByTagName("video")[0];

video.play();

将"autoplay=1"添加到src可能会有所帮助，但它只能启动一次视频

iframe.setAttribute('src', iframe.getAttribute('src') + "?autoplay=1")

票数 1

Stack Overflow用户

发布于 2021-11-11 15:28:14

是的，这是有可能的。试试这个，并根据你应得的进行调整：

<body>

<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">Click on "Play Button"</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
  <p><button class="w3-center center transparent_btn" 
onclick="play1()">Play Button</button></p>
  <div id="youtube-frame"></div>
  </div>
</div>
</body>

<script>
function play1() { 
    var frame = document.getElementById("youtube-frame");
    frame.innerHTML = "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
  }
</script>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69930827

复制

相似问题

问从外部按钮播放Iframe中的视频
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从外部按钮播放Iframe中的视频EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从外部按钮播放Iframe中的视频
EN