use*_*928 11 html javascript youtube-api
我有一个无边框的Youtube iframe api播放器播放Youtube播放列表.一切正常,但我想在播放器下方的div中显示当前播放视频的标题,但我不知道如何做到这一点任何帮助将非常感激.
我尝试过stackoverflow中的其他示例,但它们用于内联播放列表,对于有100多个视频的youtube播放列表并且我的脚本知识非常有限,我从来没有让它们工作,谷歌api网站似乎没有涵盖我正在寻找的东西.我尝试了获得标题的jwplayer,但是随机播放功能很差并且一次又一次地播放相同的视频,有时一次播放多次视频.我找到了一个脚本来排除洗牌问题,但我放弃了获取标题功能.我决定坚持使用youtube,并希望有人可以帮助我.
所以我再次非常感谢您对此表示感谢.这就是我所拥有的
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script>
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars : { 'rel' : 0, 'showinfo' :0, 'autoplay': 1, 'controls': 0 },
events: {
'onReady': onPlayerReady
}
});
}
var getRandom = function(min, max) {
return Math.random() * (max - min) + min;
`enter code here`};
var playRandomTrack = function() {
num = getRandom(0, 99);
player.playVideoAt(num);
};
function onPlayerReady(event) {
player.loadPlaylist({'listType': 'playlist', 'list': 'PLmc_AnfxCB6t6Lwwgx3x5OxfNOWwHluU-','index': '99','startSeconds': '0','suggestedQuality': 'hd720'});
player.setShuffle({'shufflePlaylist' : 1});
}
</script>
</body>
</html>
Gsx*_*Gsx 15
对于第一个视频,将其添加到onPlayerReady():
var intId = setInterval( function() {
// Check if player is initialized and the video is loaded
if ( player ) {
// States: 1: playing, 2: paused, 5: stopped
if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
// Set the innerText of div with id="title" to player title
document.getElementById( "title" ).innerText = player.getVideoData().title;
clearInterval( intId );
}
}
}, 100 );
并将其添加到playRandomTrack():
// Delay the loop because otherwise player.getPlayerState() still returns 1 because the previous video is not unloaded yet
setTimeout( function() {
var intId = setInterval( function() {
if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
document.getElementById( "title" ).innerText = player.getVideoData().title;
clearInterval( intId );
}
}, 100 );
}, 100 );
所以你的整个代码变成:
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<div id="title"></div>
<script>
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
height: '390',
width: '640',
playerVars: {
'rel': 0,
'showinfo': 0,
'autoplay': 1,
'controls': 0
},
events: {
'onReady': onPlayerReady
}
} );
}
var getRandom = function( min, max ) {
return Math.random() * ( max - min ) + min;
};
var playRandomTrack = function() {
num = getRandom( 0, 99 );
player.playVideoAt( num );
setTimeout( function() {
var intId = setInterval( function() {
if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
document.getElementById( "title" ).innerText = player.getVideoData().title;
clearInterval( intId );
}
}, 100 );
}, 100 );
};
function onPlayerReady( event ) {
player.loadPlaylist( {
'listType': 'playlist',
'list': 'PLmc_AnfxCB6t6Lwwgx3x5OxfNOWwHluU-',
'index': '99',
'startSeconds': '0',
'suggestedQuality': 'hd720'
} );
player.setShuffle( {
'shufflePlaylist': 1
} );
var intId = setInterval( function() {
if ( player ) {
if ( [ 1, 2, 5 ].indexOf( player.getPlayerState() ) >= 0 ) {
document.getElementById( "title" ).innerText = player.getVideoData().title;
clearInterval( intId );
}
}
}, 100 );
}
</script>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
13499 次 |
| 最近记录： |