4.播放器控件和数据

现在，您已经在实战中看到了YouTube的iFrame API，是时候来深入了解它是如何工作了。首先让我们来看看一些基本的播放器控制和数据。当您准备好点击演示应用页面顶部的Player Controls and Data 链接。

好的。让我们来看看到底发生了什么。你应该看到视频开始播放，暂停几秒钟后，几秒钟后，一个新的视频开始播放，然后将该视频停止播放。你可以在player目录找到这个页面中的player_control.html和player_control.js代码文件。让我们来深入了解！

代码设置

player_control.html

<!DOCTYPE html>
<html>
<head>
    <!-- page title -->
    <title>YouTube in Your App</title>
    <!-- Style imports for Material Design Lite -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- This code loads the iFrame Player API code asynchronously.-->
    <script src="https://www.youtube.com/iframe_api"></script>

    <!-- This is the source of the Javscript for the demo -->
    <script src="player_control.js"></script>

</head>
<body>
<!-- Header -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">YouTube in Your App</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="index.html">Demo</a>
                <a class="mdl-navigation__link" href="#"><b>Player Controls and Data</b></a>
                <a class="mdl-navigation__link" href="event_listeners.html">Event Listeners</a>
            </nav>
        </div>
    </header>

    <!-- Page contents -->
    <main class="mdl-layout__content">
        <div class="mdl-grid">

            <!-- Player -->
            <div class="mdl-cell mdl-cell--8-col">
                <!-- The iframe video player will replace this <div> tag. -->
                <div id="player"></div>
            </div>

            <!-- Table for displaying data from a function you will implement -->
            <table class="mdl-data-table">
                <tr>
                    <td>Content:</td>
                    <td>
                        <span id="content">(None)</span>
                    </td>
                </tr>
            </table>

    </main>
</div>
</body>
</html>

乍一看player_control.html只是一些套路化的HTML，但这里有3条重要线路，使YouTube播放器正常工作。第一个是：

  • <script src = "https://www.youtube.com/iframe_api"></script>

该行将YouTube播放器加载到页面上，并使用YouTube iFrame播放器替换ID为player的div。自动播放，暂停，停止和视频加载这些额外的神奇控制是在外部JavaScript文件player_control.js中。

播放器配置

player_control.js

var player;
// Callback for when the YouTube iFrame player is ready
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    // Set Player height and width
    height: '390',
    width: '640',
    // Set the id of the video to be played
    videoId: 'M7lc1UVf-VE',
    // Setup event listeners
    // These are covered in the next section
    events: {
      'onReady': onPlayerReady
    }
  });
};

player_control.js的第一部分设置了YouTube播放器。该行

在player_control.html引入YouTube播放器，但它不会告诉你播放什么视频，甚至播放器应该是什么大小！第一行设置变量player作为全局变量，因此函数可以在之后访问它。

该player变量是很重要的：YouTube播放器的所有命令将如何发布。

接下来，函数onYouTubeIframeAPIReady被定义。 onYouTubeIframeAPIReady是一旦iFrame加载完毕时就调用，并准备好API调用的一个特殊函数。一旦iFrame API准备就绪，就会创建一个具有定义的高度和宽度的新YT.Player，并创建videoId。事件对象设置事件侦听器，这些将在下一节中介绍。现在所有我们需要知道的是，一旦播放器准备就绪，函数onPlayerReady将被调用。

调用iFrame API

player_control.js

function onPlayerReady (){
  player.playVideo();
  setTimeout(pauseVideo, 4000);
  setTimeout(loadNewVideo, 6000);
  setTimeout(stopVideo, 8500)
};

player_control.js的下一部分是实现自动播放和视频加载。播放器准备就绪时调用函数onPlayerReady并调用player.playVideo（）；这个说法完全符合你的想法：播放视频！接下来，函数pauseVideo，loadNewVideo和stopVideo这些函数被递增的延时调用。这些功能分别地被定义为简单的播放器语句player.pauseVideo（）; player.loadVideoById（“me91AGSVsyo”）;和player.stopVideo（）;。

练习

在getContent函数中使用本脚手架，实现一个在下面介绍的的API：

在player_control.js中，取消函数onPlayerReady中的setInterval(getContent, 1000);的注释，以确保您的函数调用和更新！

如果您已经正确完成了所有操作，您应该会在YouTube播放器下方看到您从iFrame API中检索到的数据。对于iFrame API支持的所有方法，请查看文档。

Previous3.试用演示Next5.事件监听器

Last updated