Youtube视频布局和自动播放问题

我有4个嵌入式YouTube视频在一个简单的页面。一个在中心顶部，左边垂直翻转，右边垂直翻转，底部翻转并居中。我遇到的唯一问题是，只要我加载页面，它就不会自动播放。Youtube视频布局和自动播放问题

<!DOCTYPE html><html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>HTML5 Face Detection</title> 
<style type="text/css"> 

body { 
    background-color:#000000 
} 

#topVid, #leftVid, #rightVid, #bottomVid { 



} 

#topVid { 
    width: 576px; 
    height: 324px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #000; 
    transform: rotateY(180deg); 
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */ 
    -moz-transform:rotateY(180deg); /* Firefox */ 
} 

#flexContainer { 
    width: 1224px; 
    display: flex; 
    margin-left: auto; 
    margin-right: auto;; 
} 

#leftVid { 

    width: 324px; 
    height: 576px; 
    background-color: #ACACAC; 
    transform: rotateY(180deg); 
} 

#leftVidTransform { 

    transform: rotate(90deg); 
} 

#centerBox { 

    width: 576px; 
    height: 576px; 
} 

#rightVidTransform { 

    transform: rotate(-90deg); 
    margin-top: 250px; 
} 

#rightVid { 

    width: 324px; 
    height: 576px; 
    background-color: #333; 
    transform: rotateY(180deg); 
} 

#bottomVid { 
    width: 576px; 
    height: 324px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #000; 
    transform: rotateX(180deg); 
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */ 
    -moz-transform:rotateX(180deg); /* Firefox */ 
} 

</style> 
</head> 
<body> 
<div class="wrapper"> 

<div id="topVid"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div> 

<div id="flexContainer"> 
<div id="leftVid"><div id="leftVidTransform"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div></div> 
<div id="centerBox"></div> 
<div id="rightVid"><div id="rightVidTransform"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div></div> 

</div> 

<div id="bottomVid"><iframe width="576" height="324" src="https://www.youtube.com/embed/eYR1TqYGNls?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe></div> 


</div> 



</body> 
</html>

我加了autoplay=1但没有成功。我尝试的另一个选择是使用Youtube的API iframe脚本，并从<div>部分中删除。

我用下面的：

<script src="//www.youtube.com/iframe_api"></script> 

    <script> 
     /** 
     * Put your video IDs in this array 
     */ 
     var videoIDs = [ 
      'eYR1TqYGNls' 
     ]; 

     var topVid, currentVideoId = 0; 
     var leftVid, currentVideoId = 0; 
     var rightVid, currentVideoId = 0; 
     var bottomVid, currentVideoId = 0; 

     function onYouTubeIframeAPIReady() { 
      topVid = new YT.Player('topVid', { 
       height: '576', 
       width: '324', 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 

      leftVid = new YT.Player('leftVid', { 
       height: '576', 
       width: '324', 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 

      rightVid = new YT.Player('rightVid', { 
       height: '576', 
       width: '324', 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 

      bottomVid = new YT.Player('bottomVid', { 
       height: '576', 
       width: '324', 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     function onPlayerReady(event) { 
      event.target.loadVideoById(videoIDs[currentVideoId]); 
     } 

     function onPlayerStateChange(event) { 
      if (event.data == YT.PlayerState.ENDED) { 
       currentVideoId++; 
       if (currentVideoId < videoIDs.length) { 
        topVid.loadVideoById(videoIDs[currentVideoId]); 
        leftVid.loadVideoById(videoIDs[currentVideoId]); 
        rightVid.loadVideoById(videoIDs[currentVideoId]); 
        bottomVid.loadVideoById(videoIDs[currentVideoId]); 
       } 
      } 
     } 
    </script>

当我加载的页面，全部4个视频自动运行，但顶部和底部对齐到最左边的角落，每一面的视频仍属于垂直的，但视频以纵向模式播放。

希望有任何帮助。谢谢

来源

2016-10-02 w_lpz

您正在使用的播放器的类型也会影响视频的显示方式。如果您仍在使用其他播放器，请尝试使用Flash Player 10.1或更高版本。

正如YouTube JavaScript Player API Reference建议，

最终用户必须拥有的Flash Player 10.1或更高版本，以正确地查看一切。由于这一要求，我们建议使用SWFObject嵌入SWF并检测用户的Flash Player版本。

此外，任何包含YouTube播放器的HTML页面都必须实现一个名为onYouTubePlayerReady的JavaScript函数。当播放器完全加载并且API准备好接收呼叫时，API将调用此函数。

嵌入式播放器必须具有至少200px x 200px的视口。如果播放器显示控件，则它必须足够大才能完全显示控件，而不会将视口缩小到最小尺寸以下。我们推荐16：9播放器的宽度至少为480像素，高度为270像素。

来源

2016-10-04 14:49:51 Teyam

Youtube视频布局和自动播放问题

回答

相关问题