YouTube IFrame Player API 的使用

油管的文档直接放了示例代码：

<!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', {height: '360',width: '640',videoId: 'M7lc1UVf-VE',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();}</script></body>
</html>

直接给出了注释，很清晰明了。当然 https://www.youtube.com/iframe_api 也是可以直接用 script 标签直接引入。其中 videoId 可以在油管上找到。我们随便找一个视频就可以在地址栏看到 https://www.youtube.com/watch?v=PkZNo7MFNFg 后面的 v=PkZNo7MFNFg 这个就是 videoId 。

1. 基本参数

油管的 IFrame Player API 可自定义的程度并不高，可能也是出于要保护对自家产品利益的目的，视频播放结束后推荐列表之类的是去不掉的。

参数名	说明
`autoplay`	取值0和1，自动播放。默认为0。（我自己试了好像不生效，Stack Overflow 上有人说改了）
`cc_lang_pref`	显示字幕的默认语言，取值为 ISO 639-1双字母语言代码
`cc_load_policy`	值：`1`。默认根据用户偏好设置确定的。设为`1`会使系统在默认情况下显示字幕，即使在用户关闭字幕。
`color`	进度条颜色，只有两种可选 `red` 和 `white`，设置成 `white` 时，`modestbranding` 无效。
`modestbranding`	是否显示 `YouTube` 徽标。
`controls`	是否显示播放器控件 0 不显示，1 显示，默认 1。
`disablekb`	是否允许键盘控制，0 允许，1 不允许，默认 0。
`enablejsapi`	是否允许通过 `IFrame API` 控制播放器。0 不允许，1 允许，默认 0。
`end`	播放多少秒后停止。（正整数）
`fs`	是否显示全屏按钮，0 不显示，1 显示，默认 1。
`hl`	播放器多语言。取值为 [ISO 639-1双字母语言代码。
`iv_load_policy`	显示视频注释，而设置为`3`不会显示视频注释。默认值为`1`。（我没发现默认注释是啥玩意）
`listType`	有效的参数值`playlist`，`search`和`user_uploads`。
`list`	结合 `listType` 确定播放列表的内容。
`loop`	循环播放视频，0 不循环，1循环。默认值为 0。单视频时需要在`playlist`放一个相同`videoId`
`origin`	大致就是安全域名吧。`enablejsapi`为 1 的时候，这个参数是当前域名。
`playlist`	要播放的视频列表，以逗号分隔的视频ID。
`playsinline`	控制在 `iOS` 全屏播放。0 全屏，1 不全屏。
`start`	从多少秒开始播放。（正整数）
`widget_referrer`	看了半天没看明白的 `api` 。(大致好像是表示来源……)
`rel`	播放结束后显示相关视频。0 不显示，1 显示。（这个`api`已经修改为0推荐同频道，1推荐相关）
`showinfo` （弃用）	是否显示视频标题和上传者等信息。0 不显示，1 显示。

在 onYouTubeIframeAPIReady 方法中直接传参就可以了，如下：

function onYouTubeIframeAPIReady() {player = new YT.Player('player', {height: '360',width: '640',videoId: 'PkZNo7MFNFg',playerVars: {enablejsapi: 1,autoplay: 1,controls: 0,loop: 1,cc_lang_pref: 'en',iv_load_policy: 1,        },events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange}});
}

2. 钩子函数（hook）

从上面的代码案例大家其实也看到了，在 events 里面有 onReady，onStateChange 其实对应的就是相应的钩子函数。

hook	作用
`onReady`	在播放器准备就绪后触发。
`onStateChange`	视频状态发生改变时会触发。
`onPlaybackQualityChange`	视频播放质量发生变化时触发。
`onPlaybackRateChange`	视频播放速率发生变化时触发。
`onError`	播放器中发生错误时触发。
`onApiChange`	播放器已加载（或卸载）具有公开 `API` 方法的模块触发。

使用方法就像案例一样。

3. `YT.Player` 对象方法（几个常用的）

方法名	作用
`playVideo()`	播放
`pauseVideo()`	暂停
`stopVideo()`	停止
`seekTo(seconds:Number, allowSeekAhead:Boolean)`	跳转到视频多少秒。`seconds`要跳转的秒数，`allowSeekAhead` 当秒数已经超出已缓冲时间，是否发出请求
`nextVideo()`	播放下一个视频
`previousVideo()`	播放上一个视频
`playVideoAt(index:Number)`	播放指定视频（`index` 必传，为视频列表下表）
`mute()`	设置为静音
`unMute()`	取消为静音
`isMuted()`	获取当前是否静音
`setVolume(volume:Number)`	设置播放器的当前音量
`getVolume()`	获取播放器的当前音量
`setSize(width:Number, height:Number)`	设置视频大小（单位：像素）
`getPlayerState()`	返回播放器的状态
`getCurrentTime()`	返回视频已播放的时长
`getPlaybackQuality()`	当前视频的实际质量
`setPlaybackQuality(suggestedQuality:String)`	设置当前视频的建议质量。`suggestedQuality` 参数的值可以为`small`、`medium`、`large`、`hd720`、`hd1080`、`highres` 或 `default`。
`getDuration()`	返回当前正在播放的视频的时长
`getVideoUrl()`	返回当前已加载/正在播放的视频的 `YouTube.com` 网址
`getVideoEmbedCode()`	返回当前已加载/正在播放的视频的嵌入代码。
`getPlaylist()`	按当前顺序返回播放列表中视频ID的数组。
`getPlaylistIndex()`	返回当前正在播放的播放列表中视频的索引。

使用方法我想不用说，大家都知道怎么用啦。player.playVideo()

YouTube IFrame Player API 的使用相关推荐

YouTube iframe嵌入式播放器及播放器参数自动播放，循环播放，播放列表，不显示 YouTube 徽标
YouTube 嵌入式播放器及播放器参数概览本文档介绍如何在应用中嵌入 YouTube 播放器,并定义了 YouTube 嵌入式播放器可以使用的参数. 通过将参数附加到 iframe 网址末尾,您 ...
【HTML 往日冒险 09】多媒体插件音频audio 视频video iframe YouTube iframe bilibili
HTML 往日冒险 09 HTML 多媒体 HTML 插件 plug-in 音频 audio 视频 video YouTube HTML 多媒体 Web 上的多媒体指的是音效.音乐.视频和动画不同的 ...
一个简单的图层，让您可以在YouTube API上发挥想象力
VueYoutube (VueYoutube) A simple component for a powerful API. vue-youtube provides a simple layer f ...
如何使用Google Analytics（分析）设置和跟踪YouTube频道的效果
Managing a YouTube channel is a lot of work. It includes content experimentation which can make or b ...
嵌入式智能家居项目视频监控_智能化您的视频嵌入
嵌入式智能家居项目视频监控 Video content is taking over the Internet. The trend began long ago and the most recen ...
如何在YouTube Api限额的情况下获取更多视频
文章来自自己的博客 YouTube视频谷歌限制了YouTube api v3的请求量,一天10000配额,这里不是10000次请求,每次请求根据不同参数消耗不同配额.为了摆脱这种限制而获得更多的新发 ...
引入神经网络 API 1.1、支持全面屏，Android 9.0 来了！
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! iPhone X 那个一直被吐槽的刘海儿,被众多 Android 手机纷纷用上了. 据 Go ...
react 使用 Youtube 播放器
使用其他元素的事件来播放和暂停 youtube 组件, 类似老头环官网那种, 点击后直接全屏播放 youtube 视频老头环官网: ELDEN RING | Official Website (EN ...
Youtube、Facebook、Insgram三平台数据获取方式之前篇
Youtube.Facebook.Insgram三平台数据获取方式之前篇本篇文章主要介绍项目背景和最终实现效果,每个平台具体的操作方式请自行选择观看. 提前说明:每个平台仅获取视频相关信息并不涉 ...
youtube 播放列表
先是css <style type="text/css"> /* 缩略图 css */ #thumb{float:right;margin-right:24px; }. ...

YouTube IFrame Player API 的使用

1. 基本参数

2. 钩子函数（hook）

3. `YT.Player` 对象方法（几个常用的）

YouTube IFrame Player API 的使用相关推荐

最新文章

热门文章

YouTube IFrame Player API 的使用

1. 基本参数

2. 钩子函数（hook）

3. YT.Player 对象方法（几个常用的）

YouTube IFrame Player API 的使用相关推荐

最新文章

热门文章

3. `YT.Player` 对象方法（几个常用的）