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

Youtube video layout and autoplaying issue

本文关键字：自动播放 问题 布局 视频 Youtube      更新时间：2023-09-26

我在一个简单的页面中嵌入了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个视频自动运行，但顶部和底部对齐到最左边的角落，每个侧面视频仍然是垂直的，但视频在纵向模式下播放。

将感谢任何帮助。由于

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

根据YouTube JavaScript Player API参考，

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

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

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

相关文章：