「简单实战」YouTube IFrame Player API 的使用

前言

业务需求需要在自己的网页上嵌入油管( youtube)上的视频,所以去踩了油管 IFrame Player API的坑。其实和大多数国内视频网站的 ifram Embed方式是相似,比如说爱奇艺、腾讯视频、优酷等。在这些视频网站上你会发现都有分享功能,其中有一项就是通用代码。油管提供的 IFrame Player API也是类似的方案。

0. 网页中基本使用

要使用 IFrame Player API需要浏览器支持 postMessage功能。

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

<!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进度条颜色,只有两种可选 redwhite,设置成 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有效的参数值playlistsearchuser_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里面有 onReadyonStateChange其实对应的就是相应的钩子函数。

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参数的值可以为smallmediumlargehd720hd1080highresdefault
getDuration()返回当前正在播放的视频的时长
getVideoUrl()返回当前已加载/正在播放的视频的 YouTube.com网址
getVideoEmbedCode()返回当前已加载/正在播放的视频的嵌入代码。
getPlaylist()按当前顺序返回播放列表中视频ID的数组。
getPlaylistIndex()返回当前正在播放的播放列表中视频的索引。

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

如果需要在 vue中使用,大家可以到github上搜索一下 vue-youtube(当然不是我写的啦!别人的轮子),videojs也有一个 plugin可以支持播放 youtube的视频。 除了上面那些 youtube iframe api还可以播放360全景视频,也有相关的 API。这里没有业务需求,也就没有多看。

4. 说好的拒绝拖延,我竟然一个多月没有写(感谢关注)

公众号:前端曰

公众号ID:js-say

ps:是(yue)不是(ri)

原文链接:segmentfault.com

上一篇:XMLHTTPRequest属性、方法、事件整理大全。
下一篇:JS学习笔记(第14章)(表单脚本)

相关推荐

  • 高阶组件 + New Context API = ?

    1. 前言 继上次小试牛刀(https://github.com/SmallStoneSK/Blog/issues/6)尝到高价组件的甜头之后,现已深陷其中无法自拔。。。

    2 年前
  • 面试!你真的准备好了吗?|手写API系列梳理

    "不畏惧,不讲究,未来的日子好好努力"——大家好!我是小芝麻😄 标题党,它又、又、又来了...... (/public/upload/ce1d43cfb86634a10b9c8a07be33...

    1 个月前
  • 除了composition API,vue3.0文档又带来了什么新东西?

    (/public/upload/bceee5bf249edce49d803dcfff22199b) 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器...

    21 天前
  • 附实例!实现iframe父窗体与子窗体的通信

    欢迎大家前往腾讯云社区(https://cloud.tencent.com/developer/?fromSource=waitui),获取更多腾讯海量技术实践干货哦~ 本文由前端林子(https...

    2 年前
  • 重载/刷新iframe的最好方法是什么?

    Xufoxcaffo(https://stackoverflow.com/users/4642212/xufox)提出了一个问题:What’s the best way to reload / ref...

    2 年前
  • 重构 - 设计API的扩展机制

    1.前言 上篇文章,主要介绍了重构的一些概念和一些简单的实例。这一次,详细的说下项目中的一个重构场景给API设计扩展机制。目的就是为了方便以后能灵活应对需求的改变。

    2 年前
  • 重新开坑,在 react 中使用 composition API

    emmm大家好,那个,虽然最近新型肺炎,搞的人心惶惶,没啥动力写码 其实我也没啥可写的了,但是闲着也是闲着,然后记起来 smox 弃坑了还有一堆星星,想着怎么重新开坑 背景 smox 弃坑,不是我任性...

    7 个月前
  • 遮罩层 + Iframe实现界面自动显示

    前言 这周由于科三的考试耽误了两天,提前一天要去熟悉考场,第二天要考试,好在第二天晚上赶回来了,两天没敲代码就感觉别扭,这周写了点日志系统,写了点作业系统,果然技术还不到家,思路上出了点小问题。

    4 个月前
  • 载入的iframe页面会挡住父级页面一切冒泡事件,怎么破?

    最近遇到个坑,页面引入了一个iframe,结果页面上所有的点击事件都失效了。解决办法是手动绑定iframe里面事件,在事件里面触发当前窗口事件 ...

    3 个月前
  • 跨域修改iframe页面内容

    原理 image.png(https://img.javascriptcn.com/d4cd000b92d95a5c29671ccf8e8631b1 "image.png") 主站点内嵌代理页面,...

    9 个月前

官方社区

扫码加入 JavaScript 社区