当在Flex滑块angularjs中单击新视频幻灯片时，暂停当前播放的YouTube视频

Question

我正在通过此链接https://github.com/ArunMichaelDsouza/ng-youtube-embed使用ng-youtube-embed插件。我的网站上安装了flex滑块。视频正在flex滑块div中显示。请查看所附图片enter image description here

[当我播放视频，然后在转盘上单击其他视频时，以前播放的视频不会暂停。我在下面附上我的html代码：-

`

        <flex-slider slider-id="slider" flex-slide="item in videos track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">

          <li>
            <ng-youtube-embed
                video="item.id"
                videoid = "myvideo"
                autoplay="false"
                color="white"
                width="1280px"
                height="650px"
                disablekb="true"
                modestbranding="true"
                end="400"
                enablejsapi="true"
                onready="playerReady"
                onstatechange="stateChanged"
                >
            </ng-youtube-embed>
          </li>

        </flex-slider>
      </div>
      <div class="col-sm-12">

        <flex-slider class="stop" slider-id="carousel" flex-slide="item in videos track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
          <li>
            <md-card>
                 <img ng-src="https://img.youtube.com/vi/{{item.id}}/hqdefault.jpg" class="md-card-image"/>
                <md-content>
                 <md-card-title>
                   <md-card-title-text><span class="md-headline">{{item.title}}</span></md-card-title-text>
                 </md-card-title>
                 <md-card-content>
                   {{item.description}}
                </md-card-content>
              </md-content>
            </md-card>
          </li>
        </flex-slider>
      </div>
    </div>
  </div>`

这是我的控制器：-

function HomeController(api,$rootScope,$scope,$state,$cookies,$window,ngYoutubeEmbedService)
{   
var slider, // Global slider value to force playing and pausing by direct access of the slider control
canSlide = true; // Global switch to monitor video state

// Load the YouTube API. For some reason it's required to load it like this
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Setup a callback for the YouTube api to attach video event handlers
  window.onYouTubeIframeAPIReady = function(){
// Iterate through all videos

$('.flexslider iframe').each(function(){
    // Create a new player pointer; "this" is a DOMElement of the player's iframe
    var player = new YT.Player(this, {
        playerVars: {
            autoplay: 0
        }
    });

    // Watch for changes on the player
    player.addEventListener("onStateChange", function(state){
        switch(state.data)
        {
            // If the user is playing a video, stop the slider
            case YT.PlayerState.PLAYING:
                slider.flexslider("stop");
                canSlide = false;
                break;
            // The video is no longer player, give the go-ahead to start the slider back up
            case YT.PlayerState.ENDED:
            case YT.PlayerState.PAUSED:
                slider.flexslider("play");
                canSlide = true;
                break;
        }
    });

    $(this).data('player', player);
});
}

// Setup the slider control
slider = $(".flexslider")
.flexslider({
animation: "fade",
    easing: "swing",
    slideshowSpeed: 6500,
    animationSpeed: 900,
    pauseOnHover: true,
    pauseOnAction: true,
    touch: true,
    video: true,
    controlNav: true,
    animationLoop: true,
    slideshow: true,
    useCSS: false,
    // Before you go to change slides, make sure you can!
    before: function(){                     
        if(!canSlide)
            slider.flexslider("stop");
    }
});

slider.on("click", ".flex-prev, .stop, .flex-next", function(){
canSlide = true;
$('.flexslider iframe').each(function(){
$(this).data('player').pauseVideo();
console.dir(player.trackingVideoId);
});
});




$scope.videos = [
    {image: 'assets/images/slides/dream.jpg', id : 'BdN_-EyB224', title:'Blockchain', description: 'Over the past decade, an alternative digital paradigm has slowly been taking shape at the edges of the internet.'},
    {image: 'assets/images/slides/dare.jpg', id : '-38uPkyH9vI', title:'Crowd Funding Explained', description: 'See how to tap the power of the crowd for creative projects (Crowd Creativity), to collect and..'},
    {image: 'assets/images/slides/explore.jpg', id : 'y2Lk8TExz6w', title:'Oyo:India\'s Youngest Billionaire!', description: 'At age of 17 Ritesh Agarwal Founded Oyo Rooms, but he had his own struggles. '},
    {image: 'assets/images/slides/explore.jpg', id : 'xjDV4EiLiuY', title:'Funded in 60 Mins', description: 'From "Kickstarted" (bitly.com/kckstrtd), the documentary about crowdfunding, comes "Funded in 60 Seconds."'},
    {image: 'assets/images/slides/innovate.jpg', id : 'BLpPdJ5V3UA', title:'Crowdfunding Tips ', description: 'Learn how to reach your fundraising goal from Justin Massion, marketing director behind the successful crowdfunding campaign "Space Command" which raised $221K.'},
    {image: 'assets/images/slides/explore.jpg', id : 'xjDV4EiLiuY', title:'Funded in 60 Mins', description: 'From "Kickstarted" (bitly.com/kckstrtd), the documentary about crowdfunding, comes "Funded in 60 Seconds."'},
    {image: 'assets/images/slides/innovate.jpg', id : 'BLpPdJ5V3UA', title:'Crowdfunding Tips ', description: 'Learn how to reach your fundraising goal from Justin Massion, marketing director behind the successful crowdfunding campaign "Space Command" which raised $221K.'},
    {image: 'assets/images/slides/explore.jpg', id : 'xjDV4EiLiuY', title:'Funded in 60 Mins', description: 'From "Kickstarted" (bitly.com/kckstrtd), the documentary about crowdfunding, comes "Funded in 60 Seconds."'},
    {image: 'assets/images/slides/innovate.jpg', id : 'BLpPdJ5V3UA', title:'Crowdfunding Tips ', description: 'Learn how to reach your fundraising goal from Justin Massion, marketing director behind the successful crowdfunding campaign "Space Command" which raised $221K.'}
];
}

有时这种逻辑工作。大多数时候，我在控制台中收到以下错误。检查附带的图像enter image description here

enter image description here

我希望暂停当前正在播放的视频。我做错了什么？

Answer 1

在视频轮播中一次播放一个视频非常棘手，但很容易...

即使几天前我在处理视频轮播时也遇到了同样的问题...最后，现在我有一个解决方案...首先，使用<iframe>标签嵌入youtube视频并输入视频网址?html5=1&enablejsapi=1末尾的以下内容...然后将以下JavaScript代码直接包含在您的项目中，而无需对其进行任何编辑！

所需功能的JavaScript代码如下-

      <script>
    var ytplayerList;

    function onPlayerReady(e) {
        var video_data = e.target.getVideoData(),
            label = video_data.video_id+':'+video_data.title;
        e.target.ulabel = label;
        console.log(label + " is ready!");

    }
    function onPlayerError(e) {
        console.log('[onPlayerError]');
    }
    function onPlayerStateChange(e) {
        var label = e.target.ulabel;
        if (e["data"] == YT.PlayerState.PLAYING) {
            console.log({
                event: "youtube",
                action: "play:"+e.target.getPlaybackQuality(),
                label: label
            });
            //if one video is play then pause other
            pauseOthersYoutubes(e.target);
        }
        if (e["data"] == YT.PlayerState.PAUSED) {
            console.log({
                event: "youtube",
                action: "pause:"+e.target.getPlaybackQuality(),
                label: label
            });
        }
        if (e["data"] == YT.PlayerState.ENDED) {
            console.log({
                event: "youtube",
                action: "end",
                label: label
            });
        }
        //track number of buffering and quality of video
        if (e["data"] == YT.PlayerState.BUFFERING) {
            e.target.uBufferingCount?++e.target.uBufferingCount:e.target.uBufferingCount=1; 
            console.log({
                event: "youtube",
                action: "buffering["+e.target.uBufferingCount+"]:"+e.target.getPlaybackQuality(),
                label: label
            });
            //if one video is play then pause other, this is needed because at start video is in buffered state and start playing without go to playing state
            if( YT.PlayerState.UNSTARTED ==  e.target.uLastPlayerState ){
                pauseOthersYoutubes(e.target);
            }
        }
        //last action keep stage in uLastPlayerState
        if( e.data != e.target.uLastPlayerState ) {
            console.log(label + ":state change from " + e.target.uLastPlayerState + " to " + e.data);
            e.target.uLastPlayerState = e.data;
        }
    }
    function initYoutubePlayers(){
        ytplayerList = null; //reset
        ytplayerList = []; //create new array to hold youtube player
        for (var e = document.getElementsByTagName("iframe"), x = e.length; x-- ;) {
            if (/youtube.com\/embed/.test(e[x].src)) {
                ytplayerList.push(initYoutubePlayer(e[x]));
                console.log("create a Youtube player successfully");
            }
        }

    }
    function pauseOthersYoutubes( currentPlayer ) {
        if (!currentPlayer) return;
        for (var i = ytplayerList.length; i-- ;){
            if( ytplayerList[i] && (ytplayerList[i] != currentPlayer) ){
                ytplayerList[i].pauseVideo();
            }
        }  
    }
    //init a youtube iframe
    function initYoutubePlayer(ytiframe){
        console.log("have youtube iframe");
        var ytp = new YT.Player(ytiframe, {
            events: {
                onStateChange: onPlayerStateChange,
                onError: onPlayerError,
                onReady: onPlayerReady
            }
        });
        ytiframe.ytp = ytp;
        return ytp;
    }
    function onYouTubeIframeAPIReady() {
        console.log("YouTubeIframeAPI is ready");
        initYoutubePlayers();
    }
    var tag = document.createElement('script');
    //use https when loading script and youtube iframe src since if user is logging in youtube the youtube src will switch to https.
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    

  </script>

我建议您将其包括在HTML页面本身中...

以下是该解决方案的实时示例！！！

/*javascipt for the following slider*/
/* Create an array to hold the different image positions */
      var itemPositions = [];
      var numberOfItems = $('#scroller .item').length;
      
      /* Assign each array element a CSS class based on its initial position */
      function assignPositions() {
        for (var i = 0; i < numberOfItems; i++) {
          if (i === 0) {
            itemPositions[i] = 'left-hidden';
          } else if (i === 1) {
            itemPositions[i] = 'left';
          } else if (i === 2) {
            itemPositions[i] = 'middle';
          } else if (i === 3) {
            itemPositions[i] = 'right';
          } else {
            itemPositions[i] = 'right-hidden';
          }
        }
        /* Add each class to the corresponding element */
        $('#scroller .item').each(function(index) {
          $(this).addClass(itemPositions[index]);
        });
      }
      
      /* To scroll, we shift the array values by one place and reapply the classes to the images */
      function scroll(direction) {
        if (direction === 'prev') {
          itemPositions.push(itemPositions.shift());
        } else if (direction === 'next') {
          itemPositions.unshift(itemPositions.pop());
        }
        $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
          $(this).addClass(itemPositions[index]);
        });
      }
      
      /* Do all this when the DOMs ready */
      $(document).ready(function() {
      
        assignPositions();
        var autoScroll = window.setInterval("scroll('next')", 4000);
      
        /* Hover behaviours */
        $('#scroller').hover(function() {
          window.clearInterval(autoScroll);
          $('.nav').stop(true, true).fadeIn(200);
        }, function() {
          $('.nav').stop(true, true).fadeOut(200);
        });
      
        /* Click behaviours */
        $('.prev').click(function() {
          scroll('prev');
        });
        $('.next').click(function() {
          scroll('next');
        });
      
      });

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  user-select: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

.carousel {
  background-image: url(carousel1.jpg);
  width: 100vw;
  height: 52.5vw;
  background-size: 100vw 52.5vw;
}

#scroller {
  position: absolute;
  top: 12vw;
  left: 25vw;
  width: 50vw;
  height: 28vw;
  margin: 0 auto;
  padding: 0;
  -webkit-perspective: 40vw;
  -moz-perspective: 50vw;
  -o-perspective: 50vw;
}

#scroller .item {
  width: 50vw;
  height: 28vw;
  display: block;
  position: absolute;
  border-radius: 1vw;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}
/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */

#scroller .item .youtube-video {
  display: block;
  border-radius: 1vw;
}

#scroller .left {
  pointer-events: none;
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}

#scroller .middle {
  z-index: 1;
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}

#scroller .right {
  pointer-events: none;
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}

#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}

#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}

.nav {
  position: absolute;
  width: 50vw;
  height: 2vw;
  margin: 14vw 0 0;
  z-index: 2;
  display: none;
}

.prev,
.next {
  position: absolute;
  display: block;
  height: 2vw;
  width: 2vw;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 2vw;
  color: #1d1919;
  bottom: 20px;
  font-size: 2vw;
  text-align: center;
  line-height: 1.5vw;
  cursor: pointer;
  border: 2px solid #000;
}

.prev {
  left: 1vw;
}

.next {
  left: inherit;
  right: 1vw;
}

.prev:hover,
.next:hover {
  border: 0.01vw solid #000;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <link rel="stylesheet" type="text/css" href="index1.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Load font awesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Gully Ball - carousel</title>
    <link rel="icon" href="logo.png" type="image/jpg" sizes="18x18">

  </head>
  <body>
    <div class="carousel">
      <div class="slideshow-container" id="scroller">
  
        <div class="nav">
          <a class="prev">&laquo;</a>
          <a class="next">&raquo;</a>
        </div>
  
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/xOiVl3qaFkw?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/keTYvc-xU64?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div> 
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/ejlFMXU_Lg0?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/73f3QPsm80Y?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/z3L8EqCb958?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/uKkFIjsLVOo?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/W4gVYFMBU88?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/EsU5tKG4rxk?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/DyI57PYkmDA?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/CbZpZpUb_5A?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/yfOsin7OcA0?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/6cJcfVv35oU?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/lTwl7UQN_CQ?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/Sc77-58rtlI?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/GbN5LBNAYMY?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="item">
          <iframe class="youtube-video" width="100%" height="100%" src="https://www.youtube.com/embed/UYNwSeupjUM?html5=1&enablejsapi=1;rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>  
      <script>
        var ytplayerList;

        function onPlayerReady(e) {
            var video_data = e.target.getVideoData(),
                label = video_data.video_id+':'+video_data.title;
            e.target.ulabel = label;
            console.log(label + " is ready!");
         
        }
        function onPlayerError(e) {
            console.log('[onPlayerError]');
        }
        function onPlayerStateChange(e) {
            var label = e.target.ulabel;
            if (e["data"] == YT.PlayerState.PLAYING) {
                console.log({
                    event: "youtube",
                    action: "play:"+e.target.getPlaybackQuality(),
                    label: label
                });
                //if one video is play then pause other
                pauseOthersYoutubes(e.target);
            }
            if (e["data"] == YT.PlayerState.PAUSED) {
                console.log({
                    event: "youtube",
                    action: "pause:"+e.target.getPlaybackQuality(),
                    label: label
                });
            }
            if (e["data"] == YT.PlayerState.ENDED) {
                console.log({
                    event: "youtube",
                    action: "end",
                    label: label
                });
            }
            //track number of buffering and quality of video
            if (e["data"] == YT.PlayerState.BUFFERING) {
                e.target.uBufferingCount?++e.target.uBufferingCount:e.target.uBufferingCount=1; 
                console.log({
                    event: "youtube",
                    action: "buffering["+e.target.uBufferingCount+"]:"+e.target.getPlaybackQuality(),
                    label: label
                });
                //if one video is play then pause other, this is needed because at start video is in buffered state and start playing without go to playing state
                if( YT.PlayerState.UNSTARTED ==  e.target.uLastPlayerState ){
                    pauseOthersYoutubes(e.target);
                }
            }
            //last action keep stage in uLastPlayerState
            if( e.data != e.target.uLastPlayerState ) {
                console.log(label + ":state change from " + e.target.uLastPlayerState + " to " + e.data);
                e.target.uLastPlayerState = e.data;
            }
        }
        function initYoutubePlayers(){
            ytplayerList = null; //reset
            ytplayerList = []; //create new array to hold youtube player
            for (var e = document.getElementsByTagName("iframe"), x = e.length; x-- ;) {
                if (/youtube.com\/embed/.test(e[x].src)) {
                    ytplayerList.push(initYoutubePlayer(e[x]));
                    console.log("create a Youtube player successfully");
                }
            }
            
        }
        function pauseOthersYoutubes( currentPlayer ) {
            if (!currentPlayer) return;
            for (var i = ytplayerList.length; i-- ;){
                if( ytplayerList[i] && (ytplayerList[i] != currentPlayer) ){
                    ytplayerList[i].pauseVideo();
                }
            }  
        }
        //init a youtube iframe
        function initYoutubePlayer(ytiframe){
            console.log("have youtube iframe");
            var ytp = new YT.Player(ytiframe, {
                events: {
                    onStateChange: onPlayerStateChange,
                    onError: onPlayerError,
                    onReady: onPlayerReady
                }
            });
            ytiframe.ytp = ytp;
            return ytp;
        }
        function onYouTubeIframeAPIReady() {
            console.log("YouTubeIframeAPI is ready");
            initYoutubePlayers();
        }
        var tag = document.createElement('script');
        //use https when loading script and youtube iframe src since if user is logging in youtube the youtube src will switch to https.
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);    
                
      </script>
  </body>
</html>

祝您有美好的一天！问候，欧姆乔杜里