我正在使用 require.js youtube api 模块将多个 youtube 视频加载到我的网站上,但我在使用 API 来控制网站上的上述视频时遇到了一些麻烦。基本上,我似乎无法找到一种方法来引用创建的“播放器”变量,然后使用 .pauseVideo()、.playVideo() 等所有方法。
我想要做的是检查以确保当用户单击按钮时页面上的所有视频都停止。但是,我在思考如何实现这一点时遇到了麻烦。
这是我的代码:
Youtube require.js 模块
define(['jquery'], 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);
var player = {
loadPlayer: function(container, videoId, width, height) {
new YT.Player(container, {
videoId: videoId,
width: width,
height: height,
playerVars: {
autoplay: 0,
controls: 1,
modestbranding: 1,
rel: 0,
showInfo: 0
}
});
}
};
return player;
});
这个模块(我将其命名为 YouTubeAPI)被调用四到五次,或者需要多次调用,具体取决于页面上的视频数量。我基本上检查 dom 有多少个 youtube 容器,每个容器上都有一个包含剪辑的 youtube id 的数据对象,通过使用 youtube require 模块的 for 循环运行所有这些。完全不能肯定这是最好的方法,所以建议。
youTubePlayer: function(){
var self = this;
if ($('.slidevideo').length){
_.each($('.slidevideo'), function(el){
var YTid = $(el).data('videoid');
youTubeAPI.loadPlayer('Player-'+YTid, YTid, self.span8width, self.window_height-150);
});
}
},