专栏首页前端讲堂「简单实战」YouTube Iframe API 的使用

「简单实战」YouTube Iframe 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

进度条颜色,只有两种可选 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 里面有 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 参数的值可以为small、medium、large、hd720、hd1080、highres 或 default。

getDuration()

返回当前正在播放的视频的时长

getVideoUrl()

返回当前已加载/正在播放的视频的 YouTube.com 网址

getVideoEmbedCode()

返回当前已加载/正在播放的视频的嵌入代码。

getPlaylist()

按当前顺序返回播放列表中视频ID的数组。

getPlaylistIndex()

返回当前正在播放的播放列表中视频的索引。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 9102年了,Array数组的方法赶紧用起来!

    写久了业务代码的我,已经要被社会抛弃了。今天回过头去巩固基础知识,发现有很多自己业务中不经常用,或者说是不知道那个方法,导致自己重写一个方法去实现。关于Arra...

    拾贰
  • 【多图警告】学会JavaScript测试你就是同行中最亮的仔(妹)

    #### ATDD: Acceptance Test Driven Development(验收测试驱动开发)

    拾贰
  • 「位运算」计算机基础复习

    这两天有点闲,划水太严重。没有学习啥东西,跑去翻了一下书,看到 &, |, ^, ~, << ,>> 这些位运算。然后就想起来了计算机的 原码,反码 和 补码。...

    拾贰
  • 如何在视频云管理平台获取VLC视频流播放地址?

    我们知道在视频监控日益完善的今天,进行视频的综合管理是一件具有挑战的事请。如何将不同协议的摄像头进行统一的管理?这也是我们研发智能视频云管理平台的初衷。

    EasyNVR
  • C++ OpenCV播放视频及调用摄像头显示

    前一篇我们介绍了 《C++ OpenCV摄像头及视频操作类VideoCapture介绍》,我们现在就针对这个类里的API进行DEMO的演示。

    Vaccae
  • 记录每一天

    断断续续学习.NET也有快一年半了  一直没有怎么在意记录总结这件事,看到很多前辈留下了很多的知识总结让我受益良多,在这里也想在以后的工作闲暇之余多记录多总结 ...

    互联网CEO
  • 黑科技DeepFake检测方法:利用心跳做信号,还能「揪出」造假模型

    伪造人像视频生成技术给社会带来了新的威胁,例如利用逼真的伪造图像和视频进行政治宣传、名人模仿、伪造证据以及其他与身份有关的操作。伴随着这些生成技术的发展,出现了...

    机器之心
  • 网页视频加密成熟方案简介【H5/M3U8/Hls】

    视频网站运营者都很关注自己网站视频的版权,怎样防止下载,防止传播,防止翻录等功能,今天给大家介绍一个成熟方案:

    点量小崔
  • 使用SurfaceView进行rtsp格式流的播放

    longzeqiu
  • 视频体验质量指标的标准

    本文是来自MHV(Mile High Video)2019的演讲,演讲者是来自于Mux的Steve Heffernan。本次演讲主要接受了CTA标准工作组R04 ...

    用户1324186

扫码关注云+社区

领取腾讯云代金券