YouTube全屏背景自动播放功能无法在YTplayer中使用

时间:2014-08-26 06:11:05

标签: javascript jquery youtube youtube-api ytplayer

  

我正在使用YTplayer插件进行全屏youtube播放器   this-website获得灵感标签!

  • 我在下面提供了有用链接的代码!我认为代码是正确的!
  • 如果我们点击视频播放器底部悬停的播放控件,播放器正在工作!(下图)!
  • 请帮我理清为什么自动播放不起作用?
  • 我的代码有错误吗?

player


有用的链接>>


https://github.com/pupunzi/jquery.mb.YTPlayer

http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-YTPlayer/

http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html


以下是代码>>


<a class="player" id="player" data-property="{
               videoURL: 'https://www.youtube.com/watch?v=j9fgbuH0_RI&feature=youtu.be',
               containment:'#videobg',
               autoPlay: true,
               optimizeDisplay: true,
               showControls: true,
               startAt: 0,
               opacity: 1,
               ratio: '4/3', 
               addRaster: false }"></a>

            <div id="videobg" class="section-divider white-text videobg" data-scroll-index="4">
                <div class="pattern-overlay"></div>
                <div class="triangle-right"></div>

                <div class="container extra-padding">
                    <div class="col-md-5 extra-padding">
                        <h1>INNOVATING THROUGH TRAVEL</h1>
                        <p>Travel is more than the seeing of sights; it is a change that goes on, deep and permanent, in the ideas of living.</p>
                    </div>
                </div>
            </div>

溶液

  • 为ytplayer使用最新版本的java脚本。

1 个答案:

答案 0 :(得分:2)

修改

似乎问题来自repo jquery.mb.YTPlayer 。 如果我们查看问题https://github.com/pupunzi/jquery.mb.YTPlayer/issues/49

请确保您拥有最新版本的回购。


在阅读回购文件后,尝试将autoPlay: true,替换为autoplay: true,

最终代码:

<a class="player" id="player" data-property="{
   videoURL: 'https://www.youtube.com/watch?v=j9fgbuH0_RI&feature=youtu.be',
   containment:'#videobg',
   autoplay: true,
   optimizeDisplay: true,
   showControls: true,
   startAt: 0,
   opacity: 1,
   ratio: '4/3', 
   addRaster: false }"></a>

<div id="videobg" class="section-divider white-text videobg" data-scroll-index="4">
    <div class="pattern-overlay"></div>
    <div class="triangle-right"></div>

    <div class="container extra-padding">
        <div class="col-md-5 extra-padding">
            <h1>INNOVATING THROUGH TRAVEL</h1>
            <p>Travel is more than the seeing of sights; it is a change that goes on, deep and permanent, in the ideas of living.</p>
        </div>
    </div>
</div>

Doc:https://github.com/pupunzi/jquery.mb.YTPlayer/wiki