自定义视频播放控件样式_使用CanJS创建自定义视频播放器控件

自定义视频播放控件样式

In this guide, you will learn how to create a custom video player using the <video> element and CanJS. The custom video player will:

在本指南中，您将学习如何使用<video>元素和CanJS创建自定义视频播放器。 自定义视频播放器将：

• Have custom play and pause buttons.
  具有自定义播放和暂停按钮。
• Show the current time and duration of the video.
  显示视频的当前时间和时长。

• Have a <input type="range"> slider that can adjust the position of the video.

  有一个<input type="range">滑块可以调整视频的位置。

The final player looks like:

最终玩家如下所示：

演示地址

The following sections are broken down into the following parts:

以下各节分为以下几部分：

• The problem — A description of what the section is trying to accomplish.

  问题 -对本节要完成的工作的描述。

• What you need to know — Browser or CanJS APIs that are useful for solving the problem.

  您需要知道的 -对解决问题有用的浏览器或CanJS API。

• The solution — The solution to the problem.

  解决方案 —解决问题的方法。

建立 (Setup)

START THIS TUTORIAL BY Forking THE FOLLOWING CodePen:

通过分叉以下CodePen开始本教程 ：

Click the Edit in CodePen button. The CodePen will open in a new window. Click the Fork button.

单击Edit in CodePen按钮。 CodePen将在新窗口中打开。 单击Fork按钮。

演示地址

This CodePen:

该CodePen：

• Creates a <video> element that loads a video. Right click and select “Show controls” to see the video’s controls.

  创建一个<video>元素来加载视频。 右键单击并选择“显示控件”以查看视频的控件 。

• Loads CanJS's custom element library: Component.

  加载CanJS的自定义元素库： Component 。

问题 (The problem)

In this section, we will:

在本节中，我们将：

• Create a custom <video-player> element that takes a src attribute and creates a <video> element within itself. We should be able to create the video like:

  创建一个具有src属性的自定义<video-player>元素，并在其内部创建一个<video>元素。 我们应该能够像这样创建视频：

  <video-player src:raw="http://bit.ly/can-tom-n-jerry">
  </video-player>

• The embedded <video> element should have the native controls enabled.

  嵌入的<video>元素应启用本机控件。

When complete, the result will look exactly the same as the player when you started. The only difference is that we will be using a custom <video-player> element in the HTML tab instead of the native <video> element.

完成后，结果将与开始时的播放器完全相同。 唯一的区别是，我们将在HTML选项卡中使用自定义的<video-player>元素，而不是本机的<video>元素。

你需要知道的 (What you need to know)

To set up a basic CanJS application (or widget), you define a custom element in JavaScript and use the custom element in your page’s HTML.

要设置基本的CanJS应用程序(或小部件)，请在JavaScript中定义一个自定义元素，然后在页面的HTML使用该自定义元素。

To define a custom element, extend Component with a tag that matches the name of your custom element. For example:

要定义自定义元素，请使用与您的自定义元素名称匹配的标签扩展Component 。 例如：

Component.extend({
    tag: "video-player"
})

Then you can use this tag in your HTML page:

然后，您可以在HTML页面中使用此标记：

<video-player></video-player>

But this doesn’t do anything ... yet. Components add their own HTML through their view property:

但这还没有任何作用...。 组件通过其view属性添加自己HTML：

Component.extend({
    tag: "video-player",
    view: `<h2>I am a player!</h2>`
});

A component’s view is rendered with its ViewModel. For example, we can make a <video> display "http://bit.ly/can-tom-n-jerry" by defining a src property on the ViewModel and using it in the view like:

组件的视图使用其ViewModel呈现。 例如，我们可以通过在ViewModel上定义src属性并在如下视图中使用它来使<video>显示"http://bit.ly/can-tom-n-jerry" ：

Component.extend({
    tag: "video-player",
    view: `
        <video>
            <source src="{{src}}"/>
        </video>
    `,
    ViewModel: {
        src: {type: "string", default: "http://bit.ly/can-tom-n-jerry"}
    }
});

But we want the <video-player> to take a src attribute value itself and use that for the <source>’s src. For example, if we wanted the video to play "http://dl3.webmfiles.org/big-buck-bunny_trailer.webm" instead of "http://bit.ly/can-tom-n-jerry", we would:

但是我们希望<video-player>本身采用src属性值，并将其用于<source>的src 。 例如，如果我们希望视频播放"http://dl3.webmfiles.org/big-buck-bunny_trailer.webm"而不是"http://bit.ly/can-tom-n-jerry" ，那么我们将：

1. Update <video-player> to pass "http://dl3.webmfiles.org/big-buck-bunny_trailer.webm" with toChild:raw:

   更新<video-player>以通过toChild：raw传递"http://dl3.webmfiles.org/big-buck-bunny_trailer.webm" ：

   <video-player src:raw="http://dl3.webmfiles.org/big-buck-bunny_trailer.webm"/>

2. Update the ViewModel to define a src property like:

   更新ViewModel以定义src属性，例如：

   Component.extend({
       tag: "video-player",
       view: `
           <video>
               <source src="{{src}}"/> {{!}}
           </video>
       `,
       ViewModel: {
           src: "string"
       }
   });

Finally, to have a <video> element show the native controls, add a controls attribute like:

最后，要使<video>元素显示本机控件，请添加如下controls属性：

<video controls>

解决方案 (The solution)

Update the JS tab to:

将JS标签更新为：

import {Component} from "//unpkg.com/can@5/core.mjs";

Component.extend({                        //
    tag: "video-player",                  //
    view: `                              {{!}}
        <video controls>                 {{!}}
            <source src="{{src}}"/>      {{!}}
        </video>                         {{!}}
    `,                                    //
    ViewModel: {                          //
        src: "string",                    //
    }                                     //
});                                       //

Update the HTML to:

将HTML更新为：

<video-player src:raw="http://bit.ly/can-tom-n-jerry"></video-player>   <!---->

在播放和暂停视频时更改播放/暂停按钮 (Make play / pause button change as video is played and paused)

问题 (The problem)

When the video is played or paused using the native controls, we want to change the content of a <button> to say “Play” or “Pause”.

使用本机控件播放或暂停视频时，我们希望将<button>的内容更改为“播放”或“暂停” 。

When the video is played, the button should say “Pause”. When the video is paused, the button should say “Play”.

播放视频时，按钮应显示“暂停” 。 视频暂停时，按钮应显示“播放” 。

We want the button to be within a <div> after the video element like:

我们希望按钮位于视频元素之后的<div>内，例如：

</video>
<div>
    <button>Play</button>
</div>

你需要知道的 (What you need to know)

• To change the HTML content of the page, use {{#if(expression)}} and {{else}} like:

  要更改页面HTML内容，请使用{{#if(expression)}}和{{else}}，如下所示：

  <button>{{#if(playing)}} Pause {{else}} Play {{/if}}</button>

• The view responds to values in the ViewModel. To create a boolean value in the ViewModel do:

  该视图响应ViewModel中的值。 要在ViewModel中创建boolean值，请执行以下操作：

  ViewModel: {
      // ...
      playing: "boolean",
  }

• Methods can be used to change the ViewModel. The following might create methods that change the playing value:

  方法可用于更改ViewModel 。 以下可能会创建更改playing价值的方法：

  ViewModel: {
      // ...
      play() {
          this.playing = true;
      },
      pause() {
          this.playing = false;
      },
  }

• You can listen to events on the DOM with on:event. For example, the following might listen to a click on a <div> and call doSomething():

  您可以使用on：event监听DOM 上的事件 。 例如，以下内容可能会监听<div>的点击并调用doSomething() ：

  <div on:click="doSomething()">

  <video> elements have a variety of useful events, including play and pause events that are emitted when the video is played or paused.

  <video>元素具有各种有用的事件 ，包括在播放或暂停视频时发出的播放和暂停事件。

解决方案 (The solution)

Update the JavaScript tab to:

将JavaScript标签更新为：

import {Component} from "//unpkg.com/can@5/core.mjs";

Component.extend({
    tag: "video-player",
    view: `
        <video controls
            on:play="play()"                                      {{!}}
            on:pause="pause()">                                   {{!}}
            <source src="{{src}}"/>
        </video>
        <div>                                                     {{!}}
            <button>                                              {{!}}
                {{#if(playing)}} Pause {{else}} Play {{/if}}      {{!}}
            </button>                                             {{!}}
        </div>                                                    {{!}}
    `,
    ViewModel: {
        src: "string",
        playing: "boolean",                                        //

        play() {                                                   //
            this.playing = true;                                   //
        },                                                         //
        pause() {                                                  //
            this.playing = false;                                  //
        },                                                         //
    }
});

使单击“播放/暂停”按钮播放或暂停视频 (Make clicking the play/pause button play or pause the video)

问题 (The problem)

When the play/pause <button> we created in the previous section is clicked, we want to either play or pause the video.

当单击上一节中创建的播放/暂停 <button> ，我们要播放或暂停视频。

你需要知道的 (What you need to know)

CanJS prefers to manage the state of your application in ViewModel. The <video> player has state, such as if the video is playing. When the play/pause button is clicked, we want to update the state of the ViewModel and have the ViewModel update the state of the video player as a side effect.

CanJS倾向于在ViewModel中管理应用程序的状态。 <video>播放器具有状态，例如正在playing视频。 单击“ 播放/暂停”按钮时，我们要更新ViewModel的状态，并让ViewModel更新视频播放器的状态作为副作用。

What this means is that instead of something like:

这意味着它不是这样的：

togglePlay() {
    if ( videoElement.paused ) {
        videoElement.play()
    } else {
        videoElement.pause()
    }
}

We update the state like:

我们将状态更新为：

togglePlay() {
    this.playing = !this.playing;
}

And listen to when playing changes and update the video element like:

并在playing更改时收听并更新video元素，例如：

viewModel.listenTo("playing", function(event, isPlaying) {
    if ( isPlaying ) {
        videoElement.play()
    } else {
        videoElement.pause()
    }
})

This means that you need to:

这意味着您需要：

1. Listen to when the <button> is clicked and call a ViewModel method that updates the playing state.

   收听单击<button>时的声音，并调用更新playing状态的ViewModel方法。

2. Listen to when the playing state changes and update the state of the <video> element.

   收听playing状态更改时的playing并更新<video>元素的状态。

You already know everything you need to know for step #1. (Have the button call a togglePlay method with on:click="togglePlay()" and make the togglePlay() method toggle the state of the playing property.)

你已经知道你需要知道的步骤＃1的一切。 (让按钮使用on:click="togglePlay()"调用togglePlay方法，并使togglePlay()方法切换playing属性的状态。)

For step #2, you need to use the connectedCallback lifecycle hook. This hook gives you access to the component’s element and is a good place to do side-effects. Its use looks like this:

对于步骤2 ，您需要使用connectedCallback生命周期挂钩。 该挂钩使您可以访问组件的元素，并且是处理副作用的好地方。 它的用法如下所示：

ViewModel: {
    // ...
    connectedCallback(element) {
        // perform mischief
    }
}

connectedCallback gets called once the component’s element is in the page. You can use listenTo to listen to changes in the ViewModel’s properties and perform side-effects. The following listens to when playing changes:

一旦组件的element在页面中，就会调用connectedCallback 。 您可以使用listenTo来侦听ViewModel的属性中的更改并执行副作用。 playing更改时，以下内容会监听：

ViewModel: {
    // ...
    connectedCallback(element) {
        this.listenTo("playing", function(event, isPlaying) {

        })
    }
}

Use querySelector to get the <video> element from the <video-player> like:

使用querySelector从<video-player>获取<video>元素，例如：

element.querySelector("video")

<video> elements have a .play() and .pause() methods that can start and stop a video.

<video>元素具有可以启动和停止视频的.play()和.pause()方法。

解决方案 (The solution)

Update the JavaScript tab to:

将JavaScript标签更新为：

import {Component} from "//unpkg.com/can@5/core.mjs";

Component.extend({
    tag: "video-player",
    view: `
        <video controls
            on:play="play()"
            on:pause="pause()">
            <source src="{{src}}"/>
        </video>
        <div>
            <button on:click="togglePlay()">                        {{!}}
                {{#if(playing)}} Pause {{else}} Play {{/if}}
            </button>
        </div>
    `,
    ViewModel: {
        src: "string",
        playing: "boolean",

        play() {
            this.playing = true;
        },
        pause() {
            this.playing = false;
        },
        togglePlay() {                                               //
            this.playing = !this.playing;                            //
        },                                                           //

        connectedCallback(element) {                                 //
            this.listenTo("playing", function(event, isPlaying) {    //
                if (isPlaying) {                                     //
                    element.querySelector("video").play();           //
                } else {                                             //
                    element.querySelector("video").pause();          //
                }                                                    //
            });                                                      //
        }                                                            //
    }
});

显示当前时间和持续时间 (Show current time and duration)

问题 (The problem)

Show the current time and duration of the video element. The time and duration should be formatted like: mm:SS. They should be presented within two spans like:

显示视频元素的当前时间和持续时间。 时间和持续时间的格式应为： mm:SS 。 它们应在两个范围内显示：

</button>
<span>1:22</span>
<span>2:45</span>

你需要知道的 (What you need to know)

1. Methods can be used to format values in can-stache. For example, you can uppercase values like this:

   可以使用方法来格式化can-stache中的值。 例如，您可以像这样大写值：

   <span>{{upper(value)}}</span>

   With a method like:

   使用类似的方法：

   ViewModel: {
       // ...
       upper(value) {
           return value.toString().toUpperCase();
       }
   }

   The following can be used to format time:

   以下内容可用于格式化时间：

   formatTime(time) {
       if (time === null || time === undefined) {
           return "--";
       }
       const minutes = Math.floor(time / 60);
       let seconds = Math.floor(time - minutes * 60);
       if (seconds < 10) {
           seconds = "0" + seconds;
       }
       return minutes + ":" + seconds;
   }

2. Time is given as a number. Use the following to create a number property on the ViewModel:

   时间以数字形式给出。 使用以下命令在ViewModel上创建一个number属性：

   ViewModel: {
       // ...
       duration: "number",
       currentTime: "number"
   }

3. <video> elements emit a loadmetadata event when they know how long the video is. They also emit a timeupdate event when the video’s current play position changes.

   <video>元素在知道视频多长时间时会发出loadmetadata事件 。 当视频的当前播放位置更改时，它们还会发出timeupdate事件 。

   • videoElement.duration reads the duration of a video.videoElement.duration读取视频的时长。
   • videoElement.currentTime reads the current play position of a video.videoElement.currentTime读取视频的当前播放位置。

4. You can get the element in an stache on:event binding with scope.element like:

   您可以使用scope.element像下面这样on:event绑定中获取元素：

   <video on:timeupdate="updateTimes(scope.element)"/>

解决方案 (The solution)

Update the JavaScript tab to:

将JavaScript标签更新为：

import {Component} from "//unpkg.com/can@5/core.mjs";

Component.extend({
    tag: "video-player",
    view: `
        <video controls
            on:play="play()"
            on:pause="pause()"
            on:timeupdate="updateTimes(scope.element)"           {{!}}
            on:loadedmetadata="updateTimes(scope.element)">      {{!}}
            <source src="{{src}}"/>
        </video>
        <div>
            <button on:click="togglePlay()">
                {{#if(playing)}} Pause {{else}} Play {{/if}}
            </button>
            <span>{{formatTime(currentTime)}}</span> /           {{!}}
            <span>{{formatTime(duration)}} </span>               {{!}}
        </div>
    `,
    ViewModel: {
        src: "string",
        playing: "boolean",
        duration: "number",                                       //
        currentTime: "number",                                    //

        updateTimes(videoElement) {                               //
            this.currentTime = videoElement.currentTime || 0;     //
            this.duration = videoElement.duration;                //
        },                                                        //
        formatTime(time) {                                        //
            if (time === null || time === undefined) {            //
                return "--";                                      //
            }                                                     //
            const minutes = Math.floor(time / 60);                //
            let seconds = Math.floor(time - minutes * 60);        //
            if (seconds < 10) {                                   //
                seconds = "0" + seconds;                          //
            }                                                     //
            return minutes + ":" + seconds;                       //
        },                                                        //
        play() {
            this.playing = true;
        },
        pause() {
            this.playing = false;
        },
        togglePlay() {
            this.playing = !this.playing;
        },

        connectedCallback(element) {
            this.listenTo("playing", function(event, isPlaying) {
                if (isPlaying) {
                    element.querySelector("video").play();
                } else {
                    element.querySelector("video").pause();
                }
            });
        }
    }
});

使范围在当前时间显示位置滑块 (Make range show position slider at current time)

问题 (The problem)

Create a <input type="range"/> element that changes its position as the video playing position changes.

创建一个<input type="range"/>元素，该元素随视频播放位置的变化而改变其位置。

The <input type="range"/> element should be after the <button> and before the currentTime span like:

<input type="range"/>元素应位于<button>和currentTime跨度之前，例如：

</button>
<input type="range"/>
<span>{{formatTime(currentTime)}}</span> /

你需要知道的 (What you need to know)

• The range input can have an initial value, max value, and step size specified like:

  范围输入可以指定一个初始值，最大值和步长，例如：

  <input type="range" value="0" max="1" step="any"/>

• The range will have values from 0 to 1. We will need to translate the currentTime to a number between 0 and 1. We can do this with a computed getter property like:

  范围的值从0到1。我们需要将currentTime转换为0到1之间的数字。我们可以使用计算得到的getter属性来完成此操作，例如：

  ViewModel: {
      // ...
      get percentComplete() {
          return this.currentTime / this.duration;
      },
  }

• Use key:from to update a value from a ViewModel property like:

  使用key：from从ViewModel属性更新值，例如：

  <input value:from="percentComplete"/>

解决方案 (The solution)

Update the JavaScript tab to:

将JavaScript标签更新为：

import {Component} from "//unpkg.com/can@5/core.mjs";

Component.extend({
    tag: "video-player",
    view: `
        <video controls
            on:play="play()"
            on:pause="pause()"
            on:timeupdate="updateTimes(scope.element)"
            on:loadedmetadata="updateTimes(scope.element)">
            <source src="{{src}}"/>
        </video>
        <div>
            <button on:click="togglePlay()">
                {{#if(playing)}} Pause {{else}} Play {{/if}}
            </button>
            <input type="range" value="0" max="1" step="any"        {{!}}
                    value:from="percentComplete"/>                  {{!}}
            <span>{{formatTime(currentTime)}}</span> /
            <span>{{formatTime(duration)}} </span>
        </div>
    `,
    ViewModel: {
        src: "string",
        playing: "boolean",
        duration: "number",
        currentTime: "number",

        get percentComplete() {                                      //
            return this.currentTime / this.duration;                 //
        },                                                           //

        updateTimes(videoElement) {
            this.currentTime = videoElement.currentTime || 0;
            this.duration = videoElement.duration;
        },
        formatTime(time) {
            if (time === null || time === undefined) {
                return "--";
            }
            const minutes = Math.floor(time / 60);
            let seconds = Math.floor(time - minutes * 60);
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return minutes + ":" + seconds;
        },
        play() {
            this.playing = true;
        },
        pause() {
            this.playing = false;
        },
        togglePlay() {
            this.playing = !this.playing;
        },

        connectedCallback(element) {
            this.listenTo("playing", function(event, isPlaying) {
                if (isPlaying) {
                    element.querySelector("video").play();
                } else {
                    element.querySelector("video").pause();
                }
            });
        }
    }
});

使滑动范围更新当前时间 (Make sliding the range update the current time)

问题 (The problem)

In this section we will:

在本节中，我们将：

• Remove the native controls from the video player. We don’t need them anymore!
  从视频播放器中删除本机控件。 我们不再需要它们了！
• Make it so when a user moves the range slider, the video position updates.
  当用户移动范围滑块时，视频位置会更新。

你需要知道的 (What you need to know)

Similar to when we made the play/pause button play or pause the video, we will want to update the currentTime property and then listen to when currentTime changes and update the <video> element’s currentTime as a side-effect.

类似于使播放/暂停按钮播放或暂停视频时 ，我们将要更新currentTime属性，然后在currentTime变化时进行监听，并更新<video>元素的currentTime作为副作用 。

This time, we need to translate the sliders values between 0 and 1 to currentTime values. We can do this by creating a percentComplete setter that updates currentTime like:

这次，我们需要将0到1之间的滑块值转换为currentTime值。 为此，我们可以创建一个percentComplete 设置器来更新currentTime例如：

ViewModel: {
    // ...
    get percentComplete() {
        return this.currentTime / this.duration;
    },
    set percentComplete(newVal) {
        this.currentTime = newVal * this.duration;
    },
    // ...
}

Use key:bind to two-way bind a value to a ViewModel property:

使用key：bind双向绑定一个值到ViewModel属性：

<input value:bind="someViewModelProperty"/>

解决方案 (The solution)

Update the JavaScript tab to:

将JavaScript标签更新为：

import {Component} from "//unpkg.com/can@5/core.mjs";

Component.extend({
    tag: "video-player",
    view: `
        <video                                                          {{!}}
            on:play="play()"
            on:pause="pause()"
            on:timeupdate="updateTimes(scope.element)"
            on:loadedmetadata="updateTimes(scope.element)">
            <source src="{{src}}"/>
        </video>
        <div>
            <button on:click="togglePlay()">
                {{#if(playing)}} Pause {{else}} Play {{/if}}
            </button>
            <input type="range" value="0" max="1" step="any"
                    value:bind="percentComplete"/>                      {{!}}
            <span>{{formatTime(currentTime)}}</span> /
            <span>{{formatTime(duration)}} </span>
        </div>
    `,
    ViewModel: {
        src: "string",
        playing: "boolean",
        duration: "number",
        currentTime: "number",

        get percentComplete() {
            return this.currentTime / this.duration;
        },
        set percentComplete(newVal) {                                    //
            this.currentTime = newVal * this.duration;                   //
        },                                                               //

        updateTimes(videoElement) {
            this.currentTime = videoElement.currentTime || 0;
            this.duration = videoElement.duration;
        },
        formatTime(time) {
            if (time === null || time === undefined) {
                return "--";
            }
            const minutes = Math.floor(time / 60);
            let seconds = Math.floor(time - minutes * 60);
            if (seconds < 10) {
                seconds = "0" + seconds;
            }
            return minutes + ":" + seconds;
        },
        play() {
            this.playing = true;
        },
        pause() {
            this.playing = false;
        },
        togglePlay() {
            this.playing = !this.playing;
        },

        connectedCallback(element) {
            this.listenTo("playing", function(event, isPlaying) {
                if (isPlaying) {
                    element.querySelector("video").play();
                } else {
                    element.querySelector("video").pause();
                }
            });
            this.listenTo("currentTime", function(event, currentTime) {  //
                const videoElement = element.querySelector("video");     //
                if (currentTime !== videoElement.currentTime) {          //
                    videoElement.currentTime = currentTime;              //
                }                                                        //
            });                                                          //
        }
    }
});

结果 (Result)

When finished, you should see something like the following JS Bin:

完成后，您应该会看到类似以下JS Bin的内容：

演示地址

翻译自: https://davidwalsh.name/custom-html5-video

自定义视频播放控件样式