内嵌多个youtube视频并展现该频道所有视频列表

 使用 YouTube IFrame Player API

https://developers.google.com/youtube/player_parameters?hl=zh-cn

自己的需求:多个视频同一页播放并且YOUTUBE播放器内需要展现出该频道内的所有视频列表

主要代码:

后台填入视频ID和列表ID传到前端

1
<span class="open-video" data-id="{$value.Youtube_id}" data-listid="{$value.Youtube_listid}"><a href="javascript:void(0);">Youtube</a></span>

播放器HTML代码:

复制代码

弹出层

<div class="video">

  <div class="video-title">YOUTUBE VIDEO PLAY<span><a href="javascript:void(0);" class="close-video">Close</a></span></div>

  <video id="my-video"></video>
</div>

 
复制代码

script代码基本复制demo的

只是做了个动态获取视频ID和列表ID 然后触发播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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('my-video', {
    height: '550',
    width: '1000',
    autoplay:0,
    videoId: '3-__8xjeckg',
    controls:1,
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
 
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}
 
// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}
function stopVideo() {
  player.stopVideo();
}
 
    $('.close-video').click(function(){
        player.stopVideo();
        $('.video').hide();
        $('.video-bg').hide();
    });
 
    $('.open-video').click(function(){
      //console.log($(this).data('listid'));
 player.loadVideoById($(this).data('listid'), 5, "large"); 
      player.loadPlaylist ({listType:'playlist',
              list:$(this).data('listid')});
 
        player.playVideo();
        $('.video').show();
        $('.video-bg').show();
    });

整个使用过程没问题,就是获取频道播放列表这里有个巨坑,刚好踩到了

最后查到

https://stackoverflow.com/questions/13866377/calling-youtube-player-api-loadplaylist-returns-bad-request-error-400

这里说到

1
调用loadPlaylist 有两种方式一种是直接传参数,另一种是json方式,当中直接传参是无效的,可能是一个BUG,然而我一直踩到这个坑。使用这个插件,最好都用JSON格式吧。<br><br>
1
2
3
4
player.loadPlaylist ({
    listType:'playlist',
    list:'PLEL8booG6gbCZJwSUkvEWZYdUuzxuLHJo'
});

  

 

posted @   百事可口  阅读(28942)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
阅读排行:
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 为什么UNIX使用init进程启动其他进程?
点击右上角即可分享
微信分享提示