Nero Punished Miscreants

    ember-videojs

    0.0.25 • Public • Published

    ember-videojs

    Use VideoJS HTML5 video player components in your Ember project.

    Compatibility

    • Ember.js v2.18 or above
    • Ember CLI v2.13 or above
    • Node.js v8 or above

    Installation

    ember install ember-videojs
    

    Usage

    {{videojs-player src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" poster="https://vjs.zencdn.net/v/oceans.png"}}

    Add multiple sources.

    {{videojs-player sources=sources}}
    this.set("sources", [
      {
        type: "video/mp4",
        src="https://vjs.zencdn.net/v/oceans.mp4"
      },
      {
        type: "video/webm",
        src="https://vjs.zencdn.net/v/oceans.webm"
      },
    ]);

    VideoJS documentation

    Autoplay

    • autoplay: true|false
    {{videojs-player autoplay=true}}

    Controls

    • controls: true|false
    {{videojs-player controls=true}}

    Plays inline

    Plays inline for mobile Safari.

    • playsinline: true|false
    {{videojs-player playsinline=true}}

    Click to play without controls

    {{!-- app/templates/components/player.hbs}}
    {{videojs-player controls=false click=(action "togglePlay")}}
    // app/components/player.js
    
    actions: {
      togglePlay: function(player) {
        if (player.paused()) {
          player.play();
        } else {
          player.pause();
        }
      }
    }

    Sizing

    • width: an integer in pixels (VideoJS doesn't support CSS style sizing)
    • height: an integer in pixels (VideoJS doesn't support CSS style sizing)
    • fluid: adds the .vjs-fluid class and will scale to fit the container and content.
    {{videojs-player width=640 height=320}}
    {{videojs-player fluid=true}}

    AspectRatio

    • aspectRatio: This option is in the form of two integers separated by a colon: for example 16:9 or 4:3.
    {{videojs-player aspectRatio='16:9'}}

    LiveUI

    Use new Live UI for live streams.

    • liveui: This option is a boolean
    {{videojs-player liveui=true}}

    For more details please read official documentation https://docs.videojs.com/tutorial-live.html

    360 videos and VR

    Install the videojs-vr plugin

    • npm install --save videojs-vr

    Add the import statement to your ember-cli-build.js file.

    app.import('node_modules/videojs-vr/dist/videojs-vr.min.js');
    app.import('node_modules/videojs-vr/dist/videojs-vr.min.js');
    

    Add the vr-projection attribute to your component

    • vr-projection: '360', 'Sphere', or 'equirectangular'
    {{videojs-player vrProjection="360"}}

    Skinning

    VideoJS doesn't provide a way to interact with it's styles. Just override them in your styles.css.

      .video-js .vjs-big-play-button {};
      .video-js .vjs-big-vr-play-button {};
    
      .video-js .vjs-control-bar {};
      .vjs-has-started .vjs-control-bar {};
    
      .video-js .vjs-control {};
      .vjs-icon-play:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before {};
    
      .vjs-icon-play:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before {};
    
      .video-js .vjs-volume-panel {};
    
      .video-js .vjs-mute-control {};
      .vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {};
    
      .video-js .vjs-progress-control {};
    
      .video-js .vjs-progress-holder .vjs-play-progress, .video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div {};
    
      .video-js .vjs-time-control {};
    
      .video-js .vjs-fullscreen-control {};
      .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {};
    
      .vjs-icon-subtitles, .video-js .vjs-subtitles-button .vjs-icon-placeholder, .video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder {};
    
      .vjs-icon-subtitles:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before, .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before {};
    
      /* Uses inline styles on the grandchild */
      .vjs-text-track-display {};

    Closed captions and subtitles

    Add a text track to your video in the WebVTT format.

    • textTrack: [track URL]
    {{videojs-player textTrack="captions-mi.vtt"}}

    Add multiple tracks or configure the text track options in your component.

    {{videojs-player textTracks=textTracks}}
    this.set("textTracks", [
      {
        kind: "captions",
        label: "Maori",
        language: "mi",
        src="captions-mi.vtt",
        type="text/vtt"
      },
      {
        kind: "captions",
        label: "English",
        language: "en",
        src="captions-en.vtt",
        type="text/vtt"
      }
    ]);

    Contributing

    See the Contributing guide for details.

    License

    This project is licensed under the MIT License.

    Install

    npm i ember-videojs

    DownloadsWeekly Downloads

    166

    Version

    0.0.25

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • queenvictoria