Javascript 从构造函数对象创建youtube iframe视频，以便创建多个视频_Javascript_Jquery_Youtube Api

Javascript 从构造函数对象创建youtube iframe视频，以便创建多个视频

javascript jquery youtube-api

Javascript 从构造函数对象创建youtube iframe视频，以便创建多个视频,javascript,jquery,youtube-api,Javascript,Jquery,Youtube Api,我正在尝试使用youtube iframe api和我正在使用的构造函数创建youtube视频，但遇到了一个绊脚石。目前在我的Player函数中，我已经创建了一些默认属性，然后我将一些新属性传递到我的新对象中，以便通过扩展默认属性和新属性来创建一个Player。我现在的问题是，我不确定如何初始化youtube视频？我不确定新的YT.player（'player'，{应该去哪里下面是我正在使用的JS和jsFiddle 将其放置在您想要的视频位置： <div width="200" heig

我正在尝试使用youtube iframe api和我正在使用的构造函数创建youtube视频，但遇到了一个绊脚石。目前在我的Player函数中，我已经创建了一些默认属性，然后我将一些新属性传递到我的新对象中，以便通过扩展默认属性和新属性来创建一个Player。我现在的问题是，我不确定如何初始化youtube视频？我不确定新的YT.player（'player'，{应该去哪里

下面是我正在使用的JS和jsFiddle

将其放置在您想要的视频位置：

<div width="200" height="100" onclick="loadVideo();"></div>

将其放在第页末尾：

<script>
function loadVideo() { // 2. This code loads the IFrame Player API code asynchronously.
 var tag = document.createElement('script');
 tag.src = "http://www.youtube.com/player_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); }
 // func loadVideo
 // 3. This function creates an <iframe> (and YouTube player)
 // after the API code downloads.
 var player;
 function onYouTubePlayerAPIReady() { player = new YT.Player('player', { height: '100', playerVars: { 'autoplay': 1, rel: 0 }, width: '200', videoId: 'mXtJ9BbeGB4', events: { 'onReady': onPlayerReady } }); }
 // 4. The API will call this function when the video player is ready.
 function onPlayerReady(event) { event.target.playVideo(); }
</script>


函数loadVideo（）{//2。此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”http://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；}
//func加载视频
//3.此函数创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）
//4.当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（event）{event.target.playVideo（）；}

在

changeVideo

函数之后添加一个名为

init

的函数。然后实例化播放器后，您将在新实例上调用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>


视频播放器
函数播放器（选项）{
var默认值={
高度：'100'，
宽度：“200”，
videoId:'u1zgFlCw8Aw'，
事件：{'onReady'：null}，
playerVars：{
平均值：0，
控件：0，//删除控件
showinfo:0，
enablejsapi:1，
iv_负载_策略：3
}
};
var combinedOptions=$.extend（默认值、选项）；
log（“组合选项”，组合选项）；
返回{
玩家：空，
暂停：函数（）{
this.player.pauseVideo（）；
},
seek:function（）{
//this.player.seekTo（）；
},
销毁：函数（）{
this.player.destroy（）；
},
changeVideo:函数（）{
this.player.stopVideo（）；
},
onPlayerReady:函数（）{
这个.player.play（）；
},
init:function（）{
this.player=新的YT.player（combinedOptions.id{
高度：组合选项。高度，
宽度：组合选项。宽度，
videoId:combinedOptions.videoId，
活动：{
“onReady”：this.onPlayerReady，
“onStateChange”：null
}
});
}
}
};
var-myPlayer；
函数onyoutubeiframeapiredy（）{
myPlayer=新玩家（{
id:'divId'，
自动播放：对，
videoId:“NeGe7lVrXb0”
});
myPlayer.init（）；
}
$（文档）.ready（函数（）{
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
});

用于创建和控制单独玩家的玩家类的工作示例

HTML:

创建Player类的代码基于。

嘿，但是我正在尝试使用constructor对象创建youtube iframe，以便我可以学习如何使用它，并在需要时创建多个视频？我想添加新的YT.Player（“Player”，{进入播放器函数，假设它将被放置在那里？你的问题是：我现在的问题是，我不确定我实际上如何初始化youtube视频？好的，我如何使用我创建的构造函数初始化视频？我是否从播放器函数内部初始化它？在播放器函数之后，因为继承，你可以吗演示这一点？我正在试着弄清楚这是如何工作的。我添加了演示init函数的代码。我使用了jQuery的$.extend，这样我就不用拉下划线了。因为我注意到赏金有一条注释，你正在寻找可靠来源的引用，我想我会添加。在模块模式部分下面这是一个ExtJS示例，它使用了与我类似的init方法。我觉得如何初始化类似的东西是一个非常普遍的问题，因此我认为有很多同样好的方法可以实现。

<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>

<div id="divId1"></div>
<a href="#" id="play1">Play</a>

<a href="#" id="pause1">Pause</a>

<a href="#" id="stop1">Stop</a>
<br>
<div id="divId2"></div>
<a href="#" id="play2">Play</a>

<a href="#" id="pause2">Pause</a>

<a href="#" id="stop2">Stop</a>

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

var Player = (function(){
  //private static
  var defaults = {
    height: '100',
    width: '200',
    videoId: 'u1zgFlCw8Aw',
    events: {},
    playerVars: {
      modestbranding: 0,
      controls: 0, //remove controls
      showinfo: 0,
      enablejsapi : 1,
      iv_load_policy: 3
    }
  };

    var constructor = function(options){
        this.options = _.extend(defaults, options);

        this.pause = function(event){
            event.target.pauseVideo()
        }

        if(this.options.autoPlay){
            this.options.events['onReady'] = function(event){
                event.target.playVideo()
            }
        }
        this.player = new YT.Player(this.options.id,this.options)
        //pause on click
        $(this.options.pauseID).bind('click',function(event){
            this.player.pauseVideo()
        }.bind(this))
        //play on click
        $(this.options.playID).bind('click',function(event){
            this.player.playVideo()
        }.bind(this))
        //stop on click
        $(this.options.stopID).bind('click',function(event){
            this.player.stopVideo()
        }.bind(this))
    }

    return constructor;
})() //function(){

$(document).ready(function(){
  var myPlayer = new Player({  
    id: 'divId1',
    pauseID:'#pause1',
    playID:'#play1',
    stopID:'#stop1',
    autoPlay: false,
    videoId: 'oe_mGl1f4xs'
  });

  var myPlayer2 = new Player({  
    id: 'divId2',
    pauseID:'#pause2',
    playID:'#play2',
    stopID:'#stop2',
    autoPlay: false,
    videoId: 'u1zgFlCw8Aw'
  });
})