从我的构造函数对象创建一个youtube iframe视频,这样我就可以创建多个视频
creating a youtube iframe video from my constructor object so I can create multiple videos
我正在尝试使用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。(i.e. 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>
放置在你想要的视频位置:
<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>
一个Player类的工作示例,用于创建和控制单独的播放器。
JSFiddle例子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>
Javascript 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'
});
})
创建Player类的代码是基于这个问题的
相关文章:
- 使用Facebook live API创建实时视频对象时的隐私设置
- 如何创建包含多个视频的视频横幅
- AudioContext从blob获取数据的视频创建MediaElementSource
- 如何使用javascript在嵌入式youtube视频上创建可点击的时间戳链接
- 如何从使用 jquery 动态创建的视频标签中获取视频时长
- 如何使用jqueryjplayer的视频url创建缩略图
- JQuery在创建后选择html5视频并分配EventListner
- 如何用视频创建网络动画——比如apple.com/ipad-air
- 创建视频播放器(Quicktime浏览器插件)React元素,输出缺少的视频属性
- 创建可点击的视频缩略图,在上面的同一页面上加载视频
- 一直在尝试使用创建 MPEG 破折号播放器,但视频没有响应
- 使用 API v3.0 为特定视频创建 Youtube“喜欢”按钮
- 想要为全屏视频背景上的音频创建自定义静音/取消静音按钮
- 创建 HTML5 视频磁贴
- 使用引导程序时创建视频标头
- 角度指令创建html 5视频播放器
- 创建两个具有相同源的 HTML5 视频元素不起作用
- 为视频创建非常大的精灵表
- 如何为使用Html5创建的视频创建灯箱效果
- 如何为BrightCove视频创建一个弹出窗口?