Youtube API显示随机视频和缩略图
问题描述:
我有视频加载和播放,但我无法得到缩略图显示在视频的侧面。Youtube API显示随机视频和缩略图
下面是代码:
<script>
function rotateYT() {
var videos = ['usewkEuDVjU',
'IL9iemWe_g8',
'gGMi60M5O98',
'SN3CgQvqzAo',
'W1YFnHjjG8s',
'l9qMYZvG7EE',
'j_ljOjr54gc',
'MhczSQtIgNM',
'j_ljOjr54gc',
'T-GPePrh7rw',
'LTNQFYARFOk',
'ehciyVuCyvs',
'g4xSmh0LF6Y',
'shM7cV-fR9o',];
var index=Math.floor(Math.random() * videos.length);
return videos[index];
}
</script>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
var videoID = rotateYT();
player = new YT.Player('player', {
height: '100%',
width: '100%',
border: '0',
version: '3',
showinfo: '0',
rel: '0',
controls: '0',
loop: '0',
allowfullscreen: '0',
videoId: videoID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// autoplay video
function onPlayerReady(event) {
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location="mainvids1computers.html" // redirect
}
}
</script>
<div id="player" style="position:fixed; top:0%; left:0%; width:100px; height:100px;">
<img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style="top:100px; left:100px; width:120px; height:180px;">
</div>
我的问题是追加+视频[指数] +与img标签。目前我所得到的是默认的img,所以它显然没有获得视频ID并正确追加。我怎样才能解决这个问题?
答
匹配视频和缩略图添加videoID
外部功能,对于您的播放器缩略图,它不应该调用像<img src="http://img.youtube.com/vi/'+videos[index]+'1.jpg/" style=...
这是无效的JavaScript。最后的onYouTubePlayerAPIReady
应该在window
对象上。
function rotateYT() {
var videos = ['usewkEuDVjU',
'IL9iemWe_g8',
'gGMi60M5O98',
'SN3CgQvqzAo',
'W1YFnHjjG8s',
'l9qMYZvG7EE',
'j_ljOjr54gc',
'MhczSQtIgNM',
'j_ljOjr54gc',
'T-GPePrh7rw',
'LTNQFYARFOk',
'ehciyVuCyvs',
'g4xSmh0LF6Y',
'shM7cV-fR9o',
];
var index = Math.floor(Math.random() * videos.length);
return videos[index];
}
// get random video ID
var videoID = rotateYT();
document.getElementById('player-thumb').src = 'https://img.youtube.com/vi/'+ videoID +'/1.jpg';
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// create youtube player
var player;
window.onYouTubePlayerAPIReady = function() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
border: '0',
version: '3',
showinfo: '0',
rel: '0',
controls: '1',
loop: '0',
allowfullscreen: '0',
videoId: videoID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// autoplay video
function onPlayerReady(event) {
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location = "mainvids1computers.html" // redirect
}
}
<div id="player" style="position:fixed; top:0%; left:0%; width:240px; height:180px;" allowfullscreen>
<img id="player-thumb" src="https://img.youtube.com/vi/default.jpg" style="top:100px; left:100px; width:240px; height:180px;">
</div>
答
上ewwink的回答对任何人whome在爬阶梯一样像我只是一个更新...
在这里,你现在可以看到缩略图月1日,而无需加载视频。然后鼠标事件的视频负载...
继承人的代码...
<div id="player" style="position:fixed; top:0%; left:0%; width:100px; height:100px;" allowfullscreen>
</div>
<div id="ewwinkthumbnailed-it">
<img id="player-thumb" src="https://img.youtube.com/vi/default.jpg" style="position:absolute; top:0px; left:120px; width:100px; height:100px;" onmouseover="change();">
</div>
<script>
function rotateYT() {
var videos = ['usewkEuDVjU',
'IL9iemWe_g8',
'gGMi60M5O98',
'SN3CgQvqzAo',
'W1YFnHjjG8s',
'l9qMYZvG7EE',
'j_ljOjr54gc',
'MhczSQtIgNM',
'j_ljOjr54gc',
'T-GPePrh7rw',
'LTNQFYARFOk',
'ehciyVuCyvs',
'g4xSmh0LF6Y',
'shM7cV-fR9o',
];
var index = Math.floor(Math.random() * videos.length);
return videos[index];
}
// get random video ID
var videoID = rotateYT();
document.getElementById('player-thumb').src = 'https://img.youtube.com/vi/'+ videoID +'/1.jpg';
// 2. This code loads the IFrame Player API code asynchronously.
function change() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// create youtube player
var player;
window.onYouTubePlayerAPIReady = function() {
player = new YT.Player('player', {
height: '100px',
width: '100px',
border: '0',
version: '3',
showinfo: '0',
rel: '0',
controls: '1',
loop: '0',
allowfullscreen: '0',
videoId: videoID,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// autoplay video
function onPlayerReady(event) {
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location = "mainvids1computers.html" // redirect
}
}
};
</script>
好的,谢谢你,先生,我很欣赏的信息和工作周围v.much,我觉得最好还是有解决方案然后弄清楚它是如何工作的,而不是整天绞尽脑汁,没有线索......所以我非常满意你的帮助。我已经稍微改变了代码,以适应我自己的代码......我将它发布给任何可能有类似问题的人。谢谢 – russbaker2016