我有一个BackboneJS应用程序,我在我的视图上显示Youtube视频。因此,当用户点击缩略图时,Youtube-iframe会打开并播放视频。当用户关闭它并想再次播放时,没有任何反应。要再次显示,用户必须刷新不好的页面。
我的观点如下:
function (App, Backbone, ArtistVideos, Artistimg, Artistname) {
var ArtistVideoPopup = App.module();
ArtistVideoPopup.View = Backbone.View.extend({
template: 'artistYoutubeVideo',
initialize: function () {
},
beforeRender: function() {
$("#vid").before("<div id='vidoverlay'></div>");
$("#vid").after("<div id='closeDiv'><button title='Luk (Esc)' type='button' class='mdk-close'>×</button></div>")
var artistimgCollection = new Artistimg.ArtistimgCollection();
artistimgCollection.artist_id = this.artist_id;
this.insertView('.artistImage', new Artistimg.View({collection: artistimgCollection}));
artistimgCollection.fetch();
var artistnameCollection = new Artistname.ArtistnameCollection();
artistnameCollection.artist_id = this.artist_id;
this.insertView('.artistName', new Artistname.View({collection: artistnameCollection}));
artistnameCollection.fetch();
var artistvideosModel = new ArtistVideos.ArtistVideosModel();
artistvideosModel.artist_id = this.artist_id;
artistvideosModel.video_youtube_id = this.video_youtube_id;
artistvideosModel.fetch();
},
afterRender: function() {
$('ul.acmenu li a.selected').removeClass('selected');
$('ul.acmenu li a.artistVideos').addClass('selected');
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;
window.onYouTubeIframeAPIReady = _.bind(function() {
player = new YT.Player('vid', {
height: '480',
width: '853',
videoId: this.video_youtube_id,
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
})
}, this);
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
$(".mdk-close").click(function(){
$(this).hide();
$("#vidoverlay").fadeOut(500);
$("#vid").fadeOut(500);
var video = $("#vid").attr("src");
$("#vid").attr("src","");
$("#vid").attr("src",video);
});
}
});
return ArtistVideoPopup;
}
如前所述,它只呈现一次!一旦我关闭它,视频iframe在我重新加载整个页面之前不会出现。
所以有人知道这里可能存在什么问题吗?请帮忙......
提前致谢...
答案 0 :(得分:0)
我还没有真正测试过,但请试一试:
function (App, Backbone, ArtistVideos, Artistimg, Artistname) {
var ArtistVideoPopup = App.module();
// Create a new Deferred for the YouTube IFrame API
var loadYouTubeAPI = $.Deferred();
// When the API is ready then resolve the Deferred's promise()
window.onYouTubeIframeAPIReady = loadYouTubeAPI.resolve;
// Convert the Deferred into its own promise() so nothing else can
// resolve or reject it before onYouTubeIframeAPIReady is called
loadYouTubeAPI = loadYouTubeAPI.promise();
// Begin download of YouTube IFrame API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Helpful function to get the player state as a string from an int
var playerState = function(data){
switch (data) {
case -1: return 'unstarted';
case 0: return 'ended';
case 1: return 'playing';
case 2: return 'paused';
case 3: return 'buffering';
case 5: return 'cued';
default: return 'quantum';
}
}
ArtistVideoPopup.View = Backbone.View.extend({
template: 'artistYoutubeVideo',
initialize: function(){
_.bindAll(this, 'onAPIReady', 'closePlayer');
this.$iframe = $('#vid');
this.iframe = this.$iframe.get(0);
loadYouTubeAPI.then(this.onAPIReady);
},
onAPIReady: function(){
this.player = new YT.Player(this.iframe, {
height: '480',
width: '853',
videoId: this.video_youtube_id,
events: {
onReady: this.onPlayerReady,
onStateChange: this.onPlayerStateChange
}
});
},
onPlayerReady: function(e){
e.target.playVideo();
},
onPlayerStateChange: function(e){
console.log(playerState(e.data));
},
closePlayer: function(e){
$(e.currentTarget).hide();
$("#vidoverlay").fadeOut(500);
this.$iframe.fadeOut(500).done(this.onPlayerClose);
},
onPlayerClose: function(){
if (this.player) {
this.player.stopVideo();
}
},
beforeRender: function() {
this.$iframe
.before("<div id='vidoverlay'></div>")
.after("<div id='closeDiv'><button title='Luk (Esc)' type='button' class='mdk-close'>×</button></div>")
var artistimgCollection = new Artistimg.ArtistimgCollection();
artistimgCollection.artist_id = this.artist_id;
this.insertView('.artistImage', new Artistimg.View({collection: artistimgCollection}));
artistimgCollection.fetch();
var artistnameCollection = new Artistname.ArtistnameCollection();
artistnameCollection.artist_id = this.artist_id;
this.insertView('.artistName', new Artistname.View({collection: artistnameCollection}));
artistnameCollection.fetch();
var artistvideosModel = new ArtistVideos.ArtistVideosModel();
artistvideosModel.artist_id = this.artist_id;
artistvideosModel.video_youtube_id = this.video_youtube_id;
artistvideosModel.fetch();
},
afterRender: function() {
this.$iframe.show();
$('ul.acmenu li a.selected').removeClass('selected');
$('ul.acmenu li a.artistVideos').addClass('selected');
$("#closeDiv").on('click', '.mdk-close', this.onPlayerClose);
}
});
return ArtistVideoPopup;
}