bootstrap youtube视频模式自动播放

bootstrap youtube video modal plays automatically

本文关键字：自动播放 视频模式 youtube bootstrap      更新时间：2024-02-05

当网页打开时，所有视频在5秒后自动在后台播放，即在单击图像之前就可以听到音频。我如何才能阻止这种情况的发生，视频必须打开按钮点击并关闭。视频必须只在点击并关闭按钮时才能播放。

我该如何做到这一点？这是小提琴https://jsfiddle.net/aaronfranco/L6xvLcuL/14/

<script>
$("#myBtn").click(function(){
$("#myModal").modal({backdrop: false});
});
$("#myBtn1").click(function(){
$("#myModal1").modal({backdrop: false});
});
$("#myBtn2").click(function(){
$("#myModal2").modal({backdrop: false});
});
</script>

首先确保Autoplay = 0停止youtube视频自动播放

然后，您可以使用youtube api Hyperlink控制何时准确播放youtube视频

只需设置autoplay=0。它是布尔值。0远假1为真。

<iframe class="size" src="https://www.youtube.com/embed/rFuEu3dj-nA?autoplay=0" ;frameborder="0" allowfullscreen></iframe>

之后？youtube链接中的自动播放。希望这能有所帮助。

您的iframe正在自动加载并播放视频，即使您还没有显示对话框。

您可以更改为使用单个模态元素，不要在iframe上指定src值，然后从按钮单击事件中填充src值，这样框架只有在打开对话框时才开始加载，即

$('#myModal iframe').attr('src', movieURL);
$('#myModal').modal();

问题出现在<iframe>代码中，其中属性autoplay的值为1，打开时会触发事件自动播放视频

将autoplay值从1更改为0

通过将值更改为0，告诉浏览器不要自动播放视频。这是代码

<iframe class="size" src="https://www.youtube.com/embed/rFuEu3dj-nA?autoplay=0" ;frameborder="0" allowfullscreen></iframe>

现在打开Jquery按钮，点击更改属性值

$('button').on('click', function(){
  $('iframe').attr('autoplay','1');
});
相关文章：