javascript – 从我的构造函数对象创建youtube iframe视频,以便创建多个视频

我正在尝试使用youtube iframe api创建一个youtube视频以及我正在处理的构造函数但是我遇到了绊脚石.在我的播放器功能中,我创建了一些默认属性,然后将一些新属性传递给我的新对象,以便通过扩展默认属性和新属性来创建播放器.我现在的问题是,我不确定我是如何实际初始化youtube视频的？我不确定玩家=新YT.Player(‘玩家’,{应该去哪里？

这是JS im正在进行的工作和jsfiddle http://jsfiddle.net/kyllle/6zuh5/7/

function Player(options) {  
  var $player = $(options.id);

  var defaults = {
    height: '100',
    width: '200',
    videoId: 'u1zgFlCw8Aw',
    events: {
      'onReady': onPlayerReady

    },
    playerVars: {
      modestbranding: 0,
      controls: 0, //remove controls
      showinfo: 0,
      enablejsapi : 1,
      iv_load_policy: 3
    }
  };
     
  var combinedOptions = _.extend(defaults, options);
  console.log('Combined Options', combinedOptions);

  return {    
    pause: function () {      
      $player.pauseVideo();    
    },
        
    seek: function () {       
      //$player.seekTo();          
    },
        
    destroy: function () {      
      $player.destroy();    
    },
        
    changeVideo: function () {      
      $player.stopVideo();    
    }  
  }
};

function onPlayerReady() {
  console.log('player fired');
}

var myPlayer = new Player({  
    id: '#divId',
    autoplay: true,
    videoId: 'asdadads'
});

解决方法:

在changeVideo函数之后添加一个名为init的函数.然后在实例化Player之后,您将在该新实例上调用init. (即myPlayer.init())

这是我正在思考的一个例子：我省略了下划线而是使用了jQuery的$.extend函数,所以我没那么乱了：

<html>
<head>
    <title>Video Player</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function Player(options) {  

        var defaults = {
            height: '100',
            width: '200',
            videoId: 'u1zgFlCw8Aw',
            events: { 'onReady': null},
            playerVars: {
                  modestbranding: 0,
                  controls: 0, //remove controls
                  showinfo: 0,
                  enablejsapi : 1,
                  iv_load_policy: 3
             }
          };

          var combinedOptions = $.extend(defaults, options);
          console.log('Combined Options', combinedOptions);

          return {
            player: null,

            pause: function () {      
                this.player.pauseVideo();    
            },

            seek: function () {       
              //this.player.seekTo();          
            },

            destroy: function () {      
                this.player.destroy();    
            },

            changeVideo: function () {      
                this.player.stopVideo();    
            },

            onPlayerReady: function() {
                this.player.play();
            },

            init: function() {
                this.player = new YT.Player(combinedOptions.id, {
                height: combinedOptions.height,
                width: combinedOptions.width,
                videoId: combinedOptions.videoId,
                events: {
                    'onReady': this.onPlayerReady,
                    'onStateChange': null
                }
                });
            }
             }
        };


        var myPlayer;
        function onYouTubeIframeAPIReady() {
            myPlayer = new Player({  
                id: 'divId',
                autoplay: true,
                videoId: 'NeGe7lVrXb0'
            });

            myPlayer.init();

        }

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


    </script>
</head>
<body>
    <div id="divId"></div>
</body>
</html>

javascript – 从我的构造函数对象创建youtube iframe视频,以便创建多个视频

相关推荐