个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 05:06:12 27 4
gpt4 key购买 nike

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

将不胜感激任何帮助。谢谢

最佳答案

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

如 YouTube JavaScript Player API Reference 中的建议,

The end user must have Flash Player 10.1 or higher installed to view everything correctly. Because of this requirement, we suggest using SWFObject to embed the SWF and detect the user's Flash Player version.

In addition, any HTML page that contains the YouTube player must implement a JavaScript function named onYouTubePlayerReady. The API will call this function when the player is fully loaded and the API is ready to receive calls.

Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 players be at least 480 pixels wide and 270 pixels tall.

关于javascript - Youtube 视频布局和自动播放问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39813991/

27 4 0
文章推荐： jquery - 尝试在粘性菜单中实现平滑过渡
文章推荐： javascript - 如何创建不可为空的日期列？
文章推荐： javascript - 将图像放在彼此之上
文章推荐： css - 未显示 Glyphicon 图标
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com