关于YouTubeiframeAPI文档的开发和使用
时间：2023-03-30 16:26:54
CSS
一、开发需求：1、因公司业务需要，需要在官网设置视频banner进行展示和推广。由于公司服务器带宽问题，视频不会发布在自己的服务器上。使用YouTube的iframe进行视频展示2.页面需要适配屏幕，根据页面的高宽做自适应调整3.自动播放视频，适配各个浏览器2.开发流程（一）。原网站多次进行视频嵌入，都是直接使用iframe标签进行布局，然后添加相应的YouTube参数进行视频展示，并使用相应的YouTube参数调整播放。但是因为添加了对应的‘autoplay’，所以不能自动播放。了解了API文档后，不是直接使用iframe标签调用，而是使用jsapi函数调用自动播放//1.设置对应的dom元素
//2.使用js异步加载API代码tag.src="https://www.youtube.com/iframe_api";varfirstScriptTag=document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);//3.创建一个iframe，设置YouTubeiframe对应的参数varplayer；functiononYouTubeIframeAPIReady(){player=newYT.Player('player',{videoId:'rrWFG9qVu0w',playerVars:{controls:0,//取消播放控制loop:1,//循环播放showinfo:0,//取消上传者信息playlist:'rrWFG9qVu0w',//视频IPenablejsapi:1,//允许通过api调用playsinline:1//允许ios视频??播放},events:{'onReady':onPlayerReady,//页面加载完毕视频已播放}});}//4。加载API并调用以下函数functiononPlayerReady(event){event.target.playVideo();//允许视频自动播放事件.target.mute();//允许视频静音}*注意：1.因为有些浏览器不会允许自动播放带音频的视频文件，所以如果要自动播放适配各个浏览器，需要设置当iframe加载完成时，设置视频静音：[event.target.mute();]2.由于需要在iOS设备上播放，如果不设置[playsinline:1]，虽然PC端的Safari浏览器可以自动播放，但是手机端浏览器如果不设置是不会自动播放的，所以需要添加参数：[playsinline:1]*三、样式设计使用js监听页面获取页面宽度加载完毕，并使用页面宽高比为16:9，设置页面宽高，需要监听页面宽度变化调整布局宽16:长9YouTube官方Api链接：https：//developers.google.com...
