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

【问题标题】：Youtube video layout and autoplaying issueYoutube 视频布局和自动播放问题
【发布时间】：2016-10-02 04:54:24
【问题描述】：

我在一个简单的页面中嵌入了 4 个 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> 部分中删除 <iframe>。

我使用了以下内容：

<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 个视频都会自动运行，但顶部和底部与最左角对齐，每个侧面视频仍然是垂直的，但视频以纵向模式播放。

不胜感激。谢谢

【问题讨论】：

标签： javascript html css youtube youtube-api

【解决方案1】：

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

正如YouTube JavaScript Player API Reference 中所建议的，

最终用户必须安装 Flash Player 10.1 或更高版本才能正确查看所有内容。鉴于此要求，我们建议使用 SWFObject 嵌入 SWF 并检测用户的 Flash Player 版本。

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

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

【讨论】：