如何在DOM上使用Iframe显示YouTube视频时,使用Youtube Data Api V3修复:ERR_BLOCKED_BY_CLIENT错误？

Had*_*des 5 javascript youtube iframe youtube-data-api

我正在测试Youtube Data API V3以通过查询字词获取列表视频,然后在iframe中播放它们.

我收到这个错误: www-embed-player.js:306 GET https://googleads.g.doubleclick.net/pagead/id?exp=nomnom net::ERR_BLOCKED_BY_CLIENT

经过一些调试和谷歌搜索,我发现这个错误通常是由广告拦截器引起的.然后我在Chrome上禁用了我,然后重新测试了api通话.我不再看到原始错误,:ERR_BLOCKED_BY_CLIENT但检索到的视频无法播放.玩家消息:An error occurred, please try again later.

下面是代码.为简单起见,JS在HTML文件中.

任何帮助赞赏!

<!doctype html>
<html lang="en">

<head>
    <title>Youtube API Test </title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
        crossorigin="anonymous">
</head>
<style>
    body {
        background-color: #0F0F0F;
    }

    button.btn.btn-primary {
        background-color: #E12523;
        border-color: #E12523;
    }

    div.jumbotron {
        background-color: #292929;
        color: #B3B3B3;
    }

    hr.my-2 {
        border: 1px solid #B3B3B3;
    }
</style>

<body>






    <div class="wrapper container">
        <div class="jumbotron">
            <h1 class="display-3">Youtube Api</h1>
            <p class="lead">Let's use the Yotube Api to get videos</p>
            <hr class="my-2">

            <form>
                <div class="form-group">
                    <label for="user-query"></label>
                    <input type="text" class="form-control" id="user-query" aria-describedby="emailHelp" placeholder="Search Youtube">
                </div>
                <button type="submit" class="btn btn-primary" id="submit">Submit</button>
            </form>

        </div>
    </div>

    <div class="container" id="results"></div>






    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>

    <script type="text/javascript">


        //Get Videos
        $("#submit").on("click", function (event) {
            event.preventDefault();
            var queryTerm = $("#user-query").val().trim();

            $.ajax({
                url: "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + queryTerm + "&type=video&key=[MY API KEY]",
                method: "GET"
            }).then(function (data) {
                console.log(data);
                $.each(data.items, (i, item) => {
                    console.log(data.item);
                    const videoId = item.id.videoId;
                    let $iFrameContainer = $(`<iframe width="420" height="345" src="https://www.youtube.com/embed/"' ${videoId} '> <\/iframe >`);

                    $("#results").append($iFrameContainer);
                    })
                });
            })

    </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，9 月前
查看次数：	2054 次
最近记录：	7 年，9 月前