使用JQuery按下按钮，自动播放全屏YouTube视频-Java 学习之路

我的网站在主页顶部有一个类似于AirBnb的视频 Banner . 它上面有一个播放字形 . 当我按下glyphicon时，我希望YouTube上的视频以全屏模式打开并自动播放 . 然后，当用户退出全屏视频时，我希望Iframe消失并停止所有音频 .

现在我有这个Slim标记

.fullScreenContainer
    .video-container#autovid height="100%"
      = video_tag("broll2.mp4", autoplay: true, muted: true, preload:true, loop:true)
    .container#playButton
      .text-center
        h1#videoHeading Press Play to Watch the Video

        a href="javascript:void(0);" onclick="addIntroVideo()"
          span.glyphicon.glyphicon-play

这是我的jQuery函数

function addIntroVideo() {
    $('<iframe id="introVideo" src="https://www.youtube.com/embed/6a8fvbkNLWQ?rel=0&autoplay=1" frameborder="0" allowfullscreen="true"></iframe>').appendTo('.fullScreenContainer');
}

我的理解是，在YouTube网址上添加？rel = 0＆autoplay = 1会使视频以全屏模式播放并自动启动 . 但是，当我按下播放时，它只会加载一个小的iframe和自动播放 . 如何更改此代码以使其执行我想要的操作？

1 回答

0
不要自己制作iframe . 相反，使用the YouTube iframe API example您可以在此Slim标记下添加嵌入式JavaScript：
```
javascript:
```
那个JavaScript创建了iframe和一个名为 player 的对象，它有方法 stopVideo() 和 startVideo() ，你可以使用更多的JavaScript将这些函数挂钩到按钮点击处理程序 .
回复于 2024-05-02T09:32:23+08:00

使用JQuery按下按钮，自动播放全屏YouTube视频

1 回答

相关问题