Iframe youtube api视频事件设置
Iframe youtube api video event setup
videoId更改是否发生事件？
我使用的是loadVideoById（）函数，我想在发生这种情况时生成一个事件。
$('div.search-box a').on('click', function(){
sessionStorage.clear();
sessionStorage.setItem('key', $(this).data("id"));
player.loadVideoById({
"videoId": $(this).data("id")
});
更新这就是上面代码之后发生的事情：
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
videoID = sessionStorage.getItem("key");
function onYouTubeIframeAPIReady(){
console.log("ucito api");
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: videoID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onApiChange': onPlayerApiChange
}
});
}
您还应该知道，在YoutubeIframeAPIReady（）上会将iframe放入中
更新2
var videoID;
var videoTitle;
var channelID;
var imgURL;
var viewsCount;
var newVideoId;
function newYoutubePlayer() {
//Declare selectors
var queryContainer = $('div.search-box ul');
var searchBox = $('div#search-bar input[type=search]');
//Declare variables from input elements :)
var search = $(searchBox).val();
var checker = search.length;
//Check if the input is empty string
if(search!=''){
//Declare the YoutubeAPI link with youtube APIkey
var theAPI = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+search+"&maxResults=15&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
//Get JSON string from YoutubeAPI link
$.getJSON(theAPI, function(data){
//Append 5 titles to the div
for(var i=0; i<=5; ++i){
//Using the kind property from YoutubeAPI determine is it a profile or video
if(data.items[i].id.kind === 'youtube#video'){
$(queryContainer).append('<li><p><a href="#" data-name="'+data.items[i].snippet.title+'" data-id="' +data.items[i].id.videoId+'">' +data.items[i].snippet.title+'</a></p></li>');
}else if(data.items[i].id.kind === 'youtube#channel'){
$(queryContainer).append('<li><p><a href="https://www.youtube.com/user/'+data.items[i].snippet.title+'">' +data.items[i].snippet.title+'</a></p></li>')
}
}
$('div.search-box a').on('click', function(){
newVideoId = $(this).data("id");
sessionStorage.setItem('id', newVideoId);
player.loadVideoById({
"videoId": newVideoId
});
// THIS IS FOR GETTING THE VIEWS NUMBER
var viewsAPI = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+newVideoId+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(viewsAPI, function(data){
console.log("ucitava broj pregleda");
viewsCount = data.items[0].statistics.viewCount;
$('div#views').empty();
$('div#views').append('<p><span data-icon=""></span> '+viewsCount+'</p>');
});
//THIS IS FOR GETTING THE AUTHORS IMAGE
var channelAPi = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+newVideoId+"+&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(channelAPi, function(data){
console.log("ucitava id kanala");
channelID = data.items[0].snippet.channelId;
var imgAPI = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+channelID+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(imgAPI, function(data){
console.log("ucitava sliku kanala");
imgURL = data.items[0].snippet.thumbnails.default.url;
$('div#user-icon').empty();
$('div#user-icon').append('<img class="user-image" src="'+imgURL+'"></img>');
});
});
});
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 sessionVideoID = sessionStorage.getItem('id');
function onYouTubeIframeAPIReady(){
console.log("ucito api");
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: sessionVideoId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
// THIS IS FOR GETTING THE VIEWS NUMBER
var viewsAPI = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+newVideoId+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(viewsAPI, function(data){
console.log("ucitava broj pregleda");
viewsCount = data.items[0].statistics.viewCount;
$('div#views').empty();
$('div#views').append('<p><span data-icon=""></span> '+viewsCount+'</p>');
});
//THIS IS FOR GETTING THE AUTHORS IMAGE
var channelAPi = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+newVideoId+"+&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(channelAPi, function(data){
console.log("ucitava id kanala");
channelID = data.items[0].snippet.channelId;
var imgAPI = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+channelID+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(imgAPI, function(data){
console.log("ucitava sliku kanala");
imgURL = data.items[0].snippet.thumbnails.default.url;
$('div#user-icon').empty();
$('div#user-icon').append('<img class="user-image" src="'+imgURL+'"></img>');
});
});
}
//The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange( event ) {
if ( event.target.getVideoData().video_id == newVideoId ) {
// THIS IS FOR GETTING THE VIEWS NUMBER
var viewsAPI = "https://www.googleapis.com/youtube/v3/videos?part=statistics&id="+newVideoId+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(viewsAPI, function(data){
console.log("ucitava broj pregleda");
viewsCount = data.items[0].statistics.viewCount;
$('div#views').empty();
$('div#views').append('<p><span data-icon=""></span> '+viewsCount+'</p>');
});
//THIS IS FOR GETTING THE AUTHORS IMAGE
var channelAPi = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id="+newVideoId+"+&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(channelAPi, function(data){
console.log("ucitava id kanala");
channelID = data.items[0].snippet.channelId;
var imgAPI = "https://www.googleapis.com/youtube/v3/channels?part=snippet&id="+channelID+"&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";
$.getJSON(imgAPI, function(data){
console.log("ucitava sliku kanala");
imgURL = data.items[0].snippet.thumbnails.default.url;
$('div#user-icon').empty();
$('div#user-icon').append('<img class="user-image" src="'+imgURL+'"></img>');
});
});
}
if (player.getPlayerState() == 1) {
// THIS IS FOR GETTING THE VIDEO TITLE
$('div#title').empty();
$('div#title').append('<p>'+ player.getVideoData().title+'</p>');
//THIS IS FOR GETTING THE AUTHORS NAME
$('p.user').empty();
$('p.user').append('<a href="#">'+player.getVideoData().author+'</a>');
}
}
});
//Check if the input value is changing, if it does cleares the previous output
if(checker){
$(queryContainer).empty();
}
}else{
$(queryContainer).empty();
return false;
}
}
我假设iframe用于加载视频。如果您更改videoId，那么我认为iframe的src属性已更改。如果是这种情况，那么您可以在iframe上绑定一个事件，该事件将在每次更改src时触发，因此它将是解决问题的方法之一：
$('#iframeid').load(function(){
alert('videoID changed');
//Your code logic here.
});
如果您没有使用jQuery，您可以使用Javascript的等效事件。希望这能有所帮助。
Youtube播放器每次都会更改其状态，您可以在实例化播放器时添加一个事件侦听器。
添加事件侦听器
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '<VIDEO ID>',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange // adding event listener here
}
});
}
这将调用函数onPlayerStateChange
function onPlayerStateChange(event) {
console.log( "New video change" );
}
使用loadVideoById并监视onPlayerStateChange方法参数event.target。根据您的要求更新了代码。
// this code of yours will call my onPlayerStateChange function.
var newVideoId = $(this).data("id");
$('div.search-box a').on('click', function(){
sessionStorage.clear();
sessionStorage.setItem('key', $(this).data("id"));
player.loadVideoById({
"videoId": newVideoId
});
});
function onPlayerStateChange(event) {
if ( event.target.getVideoData().video_id == newVideoId ) {
console.log("new video loaded")
}
}
相关文章：
- 在onmouseover事件中更改图像，并为每个事件设置中断/间隔
- 创建元素并将事件设置为类时 JQuery 重复事件
- jQuery image.Load 事件不触发，如果 image.src 从 PageShow 事件设置并返回到同一页面
- 如何对链式事件设置条件
- 使用鼠标悬停/悬停事件设置隐藏元素的值
- 如何根据索引中控件的onchange事件设置mvc 5视图中隐藏字段的值
- 如何将事件设置为最顶级的父React样式
- 在jquery UI中为多个事件设置一个回调
- 对Textbox KeyDown事件设置jQuery自动完成
- 将单击事件设置为此事件添加的元素
- JQuery:基于点击事件设置属性
- 使用循环将事件设置为DOM对象
- 通过onclick事件设置变量
- 用CanJS为文档上触发的事件设置一个全局监听器/控制器
- 根据周视图中的第一个和最后一个事件设置minTime和maxTime
- 套接字.在客户端为该事件设置侦听器之前，服务器发出事件
- 为控制器中的存储事件设置侦听器
- 如何在html中使用onchange事件设置下拉值中的链接
- Javascript在构造函数中将dom事件设置为prototype方法
- 编写jQuery函数的好方法是为特定事件设置全局变量
