Я работаю с этим кодом пару дней, и я просто не могу понять это.
Я смог выполнить видеопоиск с автоматическим воспроизведением с помощью youtube api. вот мой пример:
http://www.reyesmotion.com/videosequence/index.html
Однако нам нужен массив идентификаторов видео, созданных динамически, поэтому я изменяю его так:
<script>
$(function(){
$('li').on("click",function(){
var pilename = $(this).attr('data-pile');
var videoIDs = [];
$("li[data-pile='"+pilename+"']").each(function(index){
videoIDs.push($(this).attr('id'));
var player, currentVideoId = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '425',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.loadVideoById(videoIDs[currentVideoId]);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
currentVideoId++;
if (currentVideoId < videoIDs.length) {
player.loadVideoById(videoIDs[currentVideoId]);
}
}
}
});
});
</script>
Вот эта попытка: http://www.reyesmotion.com/videoTest/index.html
Однако метод api youtube никогда не вызван.
Что-то не так с моим кодом?
Две основные причины: разрыв кода:
Чтобы исправить эту проблему, измените свой первый документ следующим образом:
Удалите функцию, которая полностью воспроизводит видео из файла, вместе с предшествующим ему кодом (div id = "player" и тегом скрипта, содержащим youtube iframe_api).
<form id="lists" method="post" action="FILE-TO-CALL.php"> <input type="hidden" id="videos" name="videos" value=""/> <input name="play_list" id="play_list" type="submit" value="Play"> </form>
$('li').on("click",function(){ var vidid = $(this).attr('id'); if (str == "") { str = "'" + vidid +"'"; }else{ str = str + ",'" + vidid +"'"; } $("#videos").val(str); //puts the str string in the hidden field });
Создайте второй файл, сохраните его и измените имя в action = "FILE-TO-CALL.php". Во втором вновь созданном файле получите значение str, отправленное с помощью формы в скрытом поле:
$vids = $_POST['videos'];
и поместите это в тело:
'<div id="player"></div><script src="http://www.youtube.com/iframe_api"></script>'
и в теге скрипта:
var videoIDs = [<?php echo $vids;?>]; //the formatted string passed from the first file
var player, currentVideoId = 0;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '350',
width: '425',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.loadVideoById(videoIDs[currentVideoId]);
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
currentVideoId++;
if (currentVideoId < videoIDs.length) {
player.loadVideoById(videoIDs[currentVideoId]);
}
}
}
Оно работает!