Question

我在一个简单的页面中有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脚本并从<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个视频都会自动运行，但顶部和底部对齐最左侧，每个视频仍然是垂直的，但视频是以纵向模式播放的。

非常感谢任何帮助。感谢

Answer 1

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

正如YouTube JavaScript Player API Reference中所述，

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

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

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

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

1 个答案: