个人中心
gpt4 book ai didi

javascript - 页面加载后插入 YouTube iframe

转载 作者：行者123 更新时间：2023-12-02 16:31:22 26 4
gpt4 key购买 nike

我在底部有一个主要的 YouTube 视频和一些相关视频。 YouTube 视频是从我的网址中的 Costum 视频名称参数加载的。如果视频名称存在，YouTube iframe 会在页面加载时加载，但如果视频名称不存在，YT iframe 不会加载，直到用户单击底部的相关视频。如果用户单击相关视频，则会加载 iframe，并且应使用相同的函数 onPlayerReady 和 onPlayerStateChange，因为 iframe 从一开始就已加载。如何在页面中插入 iframe 并使用与从一开始加载时使用的相同功能。 ？player.js

 var tag = document.createElement('script'),
     firstScriptTag = document.getElementsByTagName('script')[0],
     player;

    tag.src = "https://www.youtube.com/player_api";

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubePlayerAPIReady() {
        player = new YT.Player('ytplayer', {
            height: height,
            width: width,
            videoId: yt_id,
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    };

function onPlayerReady(event) {
    //code here
    //I want to use this code even when the player is loaded after the         page is loaded (when the user clicks a related video at the bottom)
}

function onPlayerStateChange(event) {
    //here too
}

insert_frame.js

var tag = document.createElement('script'),
            firstScriptTag = document.getElementsByTagName('script')[0],
            player;

        tag.src = "https://www.youtube.com/player_api";

        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        player = new YT.Player('ytplayer', {
            height: height,
            width: width,
            videoId: yt_id,
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });

最佳答案

How can I insert the iframe in page and use the same function I use as it was loaded from the beginning. ?

如果我理解正确的话，您想要这样做，因为网址上的某些视频 ID 可能是错误的，并且播放器 iframe 不会播放该视频。

好吧，当您点击底部的相关视频时，您不需要仅仅因为视频 ID 存在而插入帧，请使用 YouTube Player API 中的 onError 参数。 .

This event fires if an error occurs in the player. The API will pass an event object to the event listener function. That object's data property will specify an integer that identifies the type of error that occurred. ...

如果 URL 上的 videoID 不存在，则会发送错误。例如，只需隐藏播放器并在用户单击底部的相关视频时显示它。

使用此解决方案，即使 id 错误，您也只需加载播放器一次，无需在代码中插入帧。示例解决方案。

我用错误的 videoID 给你做了一个小例子:

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="player"></div>
</body>
</html>

Javascript

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'l-gQLqv9f4',
        events: {
            'onError': onPlayerError,
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    $('#player').show();
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
    }
}

function stopVideo() {
    player.stopVideo();
}

function onPlayerError() {
  console.log("error on the video id. Iframe is hiding");
  $('#player').hide(); //or do what you want

}

现场演示:http://jsbin.com/mihikiqoma/1/edit?html,js,output

关于javascript - 页面加载后插入 YouTube iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28267701/

26 4 0
文章推荐： Javascript 构造函数创建对象与常规对象
文章推荐： Magento - 从订单或发票中获取数据
文章推荐： haskell - 也许您还没有对函数应用足够的参数？
文章推荐： javascript - 如何用html2canvas抓取div？
行者123
个人简介

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

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