时间戳

首页 > 解决方案 > YouTube API 在 Google Chrome 中不起作用

javascript - YouTube API 在 Google Chrome 中不起作用

问题描述

我正在制作一个必须显示视频的网站，该视频隐藏推荐视频并防止获取URL，我在视频前面建立了一个图层，然后我在iframe前面放了一个div，这样它不会让与视频界面交互。我遇到的问题是，使用 FIREFOX 测试时它可以正常工作，使用 Google Chrome 测试时，它对我不起作用，屏幕仍然贴满，也就是说，在显示页面时，嵌入的视频有一个图层作为图像和一个按钮，我使用 PlayerState.UNSTARTED 执行此操作，并添加相应的类以显示我所说的图像 playerWrap.classList.add ("ended") ;。我在控制台中没有错误。

但是，如果我尝试使用谷歌浏览器，在显示页面时，嵌入的视频只保留图像层，它不允许我点击播放视频。知道为什么会这样吗？

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="shortcut icon" href="imgs/icon/favicon.ico">
    <style>
    .hytPlayerWrap{
        display:inline-block;
        position:relative
    }
    .hytPlayerWrap.unstarted::after{
    content:"";position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    cursor:pointer;
    background-repeat:no-repeat;
    background-position:center;
    background-size:64px 64px;
    background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)
    }
    .hytPlayerWrap.ended::after{
    content:"";position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    cursor:pointer;
    background-repeat:no-repeat;
    background-position:center;
    background-size:64px 64px;
    background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==)
    }

    .hytPlayerWrap.paused::after{
    content:"";
    position:absolute;
    top:70px;
    left:0;
    bottom:50px;
    right:0;
    cursor:pointer;
    background-repeat:no-repeat;
    background-position:center;
    background-size:40px 40px;
    background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+)}
    .hytPlayerWrap.ended iframe,
    .hytPlayerWrap.paused iframe{
    visibility: hidden;
    background-repeat: no-repeat;

    }
    .hytPlayerWrap {
        background-position: center;
        background-repeat: no-repeat;
    }
    .yt-cover{
      position: absolute;
      top: 0;
      bottom:0;
      right:0;
      left:0;
      z-index:1000;
}

    </style>

    <title>Congreso Intessrnacional 2021</title>
</head>
<body id="plenario">
<div class="container-fluid">
<div class="row">

    <div class="col-12">
        <br><br><br><br>
        <div class="row">
            <div class="col-2">&nbsp;</div>
            <div class="col-8 text-center">
                
                <div class="hytPlayerWrapOuter" >
                    <div class="hytPlayerWrap" style="background-image:url(imgs/intro22.png)">
                        <iframe id="yt-frame" width="605" height="340" src="https://www.youtube.com/embed/6XYzWjixpwE?rel=0&autoplay=1&mute=0&control=1&enablejsapi=1&autoplay=0&fs=0&rel=0&modestbranding=1&showinfo=0&iv_load_policy=3&modestbranding=1&nologo=1" frameborder="0" ></iframe>
                        <div class="yt-cover"></div>
</div>

                    </div>
                </div>



            </div>
            <div class="col-2">&nbsp;</div> 
        </div>
    </div>

    <div class="seccion-regresar-plenario"> 
        <a class="boton-regresar-plenario" href="salones.php"></a>
    </div>  

</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>  
<script src="js/utiles.js"></script>    

<script>
    "use strict";
    document.addEventListener('DOMContentLoaded', function () {
        if (window.hideYTActivated) return;
        let onYouTubeIframeAPIReadyCallbacks = [];
        for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
            let playerFrame = playerWrap.querySelector("iframe");
            let tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            let firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            let onPlayerStateChange = function (event) {

                 if (event.data == YT.PlayerState.UNSTARTED) {
                    playerWrap.classList.add("ended");
                }
                else if(event.data == YT.PlayerState.ENDED) {
                    playerWrap.classList.add("ended");

                } else if (event.data == YT.PlayerState.PAUSED) {
                    playerWrap.classList.add("paused");
                } else if (event.data == YT.PlayerState.PLAYING) {
                    playerWrap.classList.remove("ended");
                    playerWrap.classList.remove("paused");
                }
            };
            let player;
            onYouTubeIframeAPIReadyCallbacks.push(function () {
                

                player = new YT.Player(playerFrame, {events: {'onStateChange': onPlayerStateChange}});
            });
            playerWrap.addEventListener("click", function () {
                let playerState = player.getPlayerState();
                if (playerState == YT.PlayerState.UNSTARTED) {
                        player.playVideo();
                }
                else if(playerState == YT.PlayerState.ENDED) {
                    player.seekTo(0);
                } else if (playerState == YT.PlayerState.PAUSED) {
                        player.playVideo();
                   }
            });
        }
        window.onYouTubeIframeAPIReady = function () {
            for (let callback of onYouTubeIframeAPIReadyCallbacks) {
                callback();
            }
        };
        window.hideYTActivated = true;
      
    });


</script>  



</body>
</html>

标签： javascripthtmlyoutubeyoutube-api

解决方案

推荐阅读