内嵌多个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(); }); |
整个使用过程没问题,就是获取频道播放列表这里有个巨坑,刚好踩到了
最后查到
这里说到
1 | 调用loadPlaylist 有两种方式一种是直接传参数,另一种是json方式,当中直接传参是无效的,可能是一个BUG,然而我一直踩到这个坑。使用这个插件,最好都用JSON格式吧。<br><br> |
1 2 3 4 | player.loadPlaylist ({ listType: 'playlist' , list: 'PLEL8booG6gbCZJwSUkvEWZYdUuzxuLHJo' }); |
分类:
javascript && Jq
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 个人数据保全计划:从印象笔记迁移到joplin
· Vue3.5常用特性整理
· 重拾 SSH:从基础到安全加固
· 为什么UNIX使用init进程启动其他进程?