使用此搜索功能,我可以根据搜索条件填充视频列表。
// Execute search
function search(){
// Clear Results
$('#results').html('');
$('#buttons').html('');
// Get Form Input
q = $('#query').val();
// Run GET Request on API
$.get(
"https://www.googleapis.com/youtube/v3/search",{
part: 'snippet, id',
q: q,
type:'video',
key: 'YouTubeData_API_KEY'},
function(data){
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
// Log Data
console.log(data);
$.each(data.items, function(i, item){
// Get Output
var output = getOutput(item);
// Display Results
$('#results').append(output);
});
var buttons = getButtons(prevPageToken, nextPageToken);
// Display Buttons
$('#buttons').append(buttons);
// Display video in a modal
$('.video-title').click(function (event) {
event.preventDefault();
// unhide modal here when you see the console.log populate
console.log('you clicked the title');
$('#modal').removeClass('hidden');
});
}
);
}
然而,当点击视频标题时,我试图将其填充到模态/灯箱中。我试图通过使用此函数构建输出来实现此目的。
// Build Output
function getOutput(item){
var videoId = item.id.videoId;
var title = item.snippet.title;
var description = item.snippet.description;
var thumb = item.snippet.thumbnails.high.url;
var channelTitle = item.snippet.channelTitle;
var videoDate = item.snippet.publishedAt;
// Build Output String
var output = '<li>' +
'<div class="list-left">' +
'<img src="'+thumb+'">' +
'</div>' +
'<div class="list-right">' +
'<h3>' +
'<a class="video-title" href="http://www.youtube.com/embed/'+videoId+'">'+title+'</a>'+
'</h3>' +
'<small>By <span class="cTitle">'+channelTitle+'</span> on '+videoDate+'</small>' +
'<p>'+description+'</p>' +
'</div>' +
'</li>' +
'<div class="clearfix"></div>' +
'';
return output;
}
我一直试图弄清楚如何显示模态并让用户播放视频。我定位的div只是......
<div class="hidden" id="modal"></div>
如果你能提供帮助,我会很感激。
答案 0 :(得分:0)
我建议您将来检查bootsnipp.com这些类型的问题/片段。
这是一个完全符合您要求的片段 bootsnipp.com/snippets/D2Pnq
以下是该代码段的代码。
HTML
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron text-center">
<a href='#myModal' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#playerModal'>
Youtube Video
</a>
</div>
<div class="modal fade" id='playerModal' role='dialog' tabindex='-1'>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-label='Close' data-dismiss='modal', type='button'>
<span aria-hidden='true'>×</span></button>
<h4 class="modal-title">Video title</h4>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<div id="player" class="embed-responsive-item"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss='modal' type='button'>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT
// Youtube API Functions (https://developers.google.com/youtube/iframe_api_reference)
// =============================================
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
//### Variables
var player;
var playerModal = $('#playerModal');
//### Youtube API
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'L2Ew6JzfZC8'
});
}
//### Modal Controls (http://getbootstrap.com/javascript/#modals)
// Modal when show, begin to play video
playerModal.on('show.bs.modal', function (e) {
player.playVideo();
});
// Modal when hidden, pause or stop playing video
playerModal.on('hidden.bs.modal', function (e) {
player.pauseVideo();
//player.stopVideo();
});