我正在尝试使用 youtube iframe api 以及我正在处理的构造函数创建一个 youtube 视频，但我遇到了绊脚石。目前，在我的 Player 函数中，我创建了一些默认属性，然后我将一些新属性传递到我的新对象中，以便通过扩展默认属性和新属性来创建播放器。我现在的问题是我不确定我是如何初始化 youtube 视频的？我不确定 player = new YT.Player('player', { 应该去哪里？
这是我正在处理的 JS 和 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 视频，这样我就可以创建多个视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14355052/