小贝子编程

Iframe youtube api视频事件设置



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="&#xe087;"></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="&#xe087;"></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="&#xe087;"></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")
  }
}

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium