我的应用程序有播放列表来播放我正在使用的视频
<div class="thumbnail">
<div class="video-container">
<iframe width="100%" src="//www.youtube.com/embed/{{ media.src }}" frameborder="0 " allowfullscreen></iframe>
</div>
</div>
那么现在如何将播放列表视频添加到其中。
【问题讨论】：
标签： javascript angularjs iframe
src="https://www.youtube.com/embed/videoseries?list=PL55713C70BA91BD6E" frameborder="0"
在你的情况下media.src="videoseries?list=PL55713C70BA91BD6E"
更新：
您可以使用 IFrame Player API 创建自己的播放列表：
下面是一个例子，witch 不会在堆栈溢出时运行，将代码复制粘贴到本地 html 文件中并在浏览器中打开。
player = new YT.Player('player', {
width: 600,
height: 400,
videoId: 'f4Mc-NYPHaQ',//start videos id's
playerVars: {
color: 'white',
playlist: 'YR5ApYxkU-U,Tj75Arhq5ho'//next videos in playlist
}
});
index.html 下一个
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<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);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: 600,
height: 400,
videoId: 'f4Mc-NYPHaQ',
playerVars: {
color: 'white',
playlist: 'YR5ApYxkU-U,Tj75Arhq5ho'
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
</body>
</html>【讨论】：