我正在使用iFrame API加载YouTube视频。
我在布局中有多个div,如下所示:
<div id="BS3w09zFZ_Y" class="embed-responsive-item youtube-video" data-id="BS3w09zFZ_Y"></div>
<div id="Xij2kX4uumM" class="embed-responsive-item youtube-video" data-id="Xij2kX4uumM"></div>
在我的JavaScript中,我有以下内容:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady()
{
//YouTube Videos....
$('.youtube-video').each(function(i, obj)
{
var video_id = $(this).data('id');
playerInfoList.push(
{
id: video_id,
videoId: video_id
}
);
});
for (var i = 0; i < playerInfoList.length; i++)
{
curplayer = createPlayer(playerInfoList[i]);
players[i] = curplayer;
}
}
function createPlayer(playerInfo)
{
return new YT.Player(playerInfo.id, {
height: playerInfo.height,
width: playerInfo.width,
videoId: playerInfo.videoId,
events: {
'onStateChange': onPlayerStateChange
}
});
}
// when video ends
function onPlayerStateChange(event)
{
// var video_data = curplayer.getVideoData();
// vid_id = video_data.video_id;
// var video_title = video_data.title;
console.log(curplayer.getVideoData());
if(event.data === 0)
{
// Video Finished...
// Post Via AJAX..
$.ajax(
{
type: 'POST',
url: '/video/mark-watched',
data : { _token: token, video_clip_id: vid_id, video_title: video_title, video_section: section, section_id: section_id },
success: function( data )
{
// Do Nothing...
}
}
)
}
if (event.data == YT.PlayerState.PLAYING)
{
// Video Playing (Left for Reference)....
}
}
我遇到的问题是,当我执行AJAX保存时,它正在将最后一个视频ID保存在该数组中:Xij2kX4uumM
他们可以通过任何方式获取当前播放的视频和标题吗?
谢谢。