Cách tự động thay đổi video Trình phát YoutubeID

Question

Tôi muốn sử dụng mã YT.Player để tôi có thể phát hiện sự kiện. Tôi có tệp CSV với ID video Youtube và chức năng đặt ID trong một mảng và muốn có thể tự động thay đổi ID khi người dùng nhấp vào hình ảnh. Về cơ bản như thế này:

html

<!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
<div id="player"></div> 

javascript

// 2. This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

// 3. This function creates an <iframe> (and YouTube player) 
// after the API code downloads. 
// NOTE: videoId is taken out and instead is placed as the generated IFRAME src from the postSelection function 

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '100%', 
     width: '100%', 
     videoId: '<<CALL TO FUNCTION OR VARIABLE HERE>>', 
     events: { 
     //'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 

Nếu bạn đã quen thuộc với mã này thì những gì xảy ra là #player DIV được thay thế bằng IFRAME. Tôi có thể thay đổi nguồn IFRAME bằng chức năng này:

function postSelection() { 
    $("#player").attr("src", _selected.attributes.url); //_selected.attributes.url comes from the CVS file 
} 

Nhưng điều này rất lỗi và không thân thiện với trình duyệt. Nếu tôi sử dụng IFRAME chuẩn chứ không phải API trình phát YT thì mọi thứ đều hoạt động tốt. Nhưng tôi muốn phát hiện kết thúc, và tạm dừng và như vậy, vì vậy tôi phải sử dụng API. Tôi đoán là nó là một vấn đề với nhà nước và sự kiên trì đó bị mất đi một số nơi trong việc tạo ra IFRAME.

Trân trọng.

Answer 1

Điều này rất đơn giản để thực hiện với api js. Khi bạn muốn tải một video mới, chỉ cần gọi player.loadVideoById(videoId); Chi tiết tại https://developers.google.com/youtube/iframe_api_reference#loadVideoById