Skip to content

Latest commit

 

History

History
203 lines (162 loc) · 9.36 KB

README.md

File metadata and controls

203 lines (162 loc) · 9.36 KB
Raw

<mp4-video-player>

A simple and customizable MP4 video player web component created using Polymer 3.

npm (scoped with tag) Build Status on mp4-video-player npm

Player

Installation

$ npm install --save @thuoe/mp4-video-player

Import within a Polymer 3 element

import { PolymerElement, html } from '@polymer/polymer';
import '@thuoe/mp4-video-player';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <mp4-video-player></mp4-video-player>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Running Demo

$ npm start

This involves using the Polymer CLI command polymer serve.

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install the element's dependencies. This development server will transpile ES6 code to ES5 using Babel during runtime.

The live demo page will be available to view via http://127.0.0.1:8081/components/@thuoe/mp4-video-player/

Running Tests

$ npm test

Running ESLint

$ npm run lint

Video Player Properties

The following properties below are accessible and writable to use:

Property Description Type Default Value
title Title positioned on top of the video player String undefined
src File path to .mp4 video String undefined
poster File path to poster image. It can be a relative or absolute URL String undefined
timelinePreview Determines if the timeline preview above the track appears when hovering Boolean false
autoPlay Whether the video should start playing as soon as it is loaded Boolean false
loop Whether the video should start over again, every time it is finished Boolean false
volume The volume scaled from 0-1 Number 0.5
time The current time in seconds of the video playback Number 0
skipBy Skip ahead or behind (in seconds) the current time based on the right or left arrow keys respectively Number 5

Video Player Read-Only Properties

The following properties below are accessible but cannot be altered dynamically:

Read-only property Description Type Default Value
duration The total duration of the video file after it has loaded Number 0
playing If the video is playing Boolean false
muted If the video is muted Boolean false
ended If the video has ended Boolean false
fullscreen If the video is in fullscreen mode Boolean false

Custom CSS Properties

The following custom CSS variables are also available for custom styling the video player:

Custom property Description Default Value
--video-title-color Color of the video title rgba(255,255,255,.9)
--video-large-play-button-color Large play button color #d32f2f
--video-large-play-button-hover-color Large play button hover color #9a0007
--video-track-fill-color Track fill color #d32f2f
--video-thumb-color Thumb color used for dragging #fff
--video-control-icons-background-hover-color Control icons background hover color #d32f2f
---video-time-preview-background-color Timeline preview background color #d32f2f
--video-menu-background-color Menu background color rgba(255,255,255,.9)
--video-menu-item-color Menu item background color rgba(255,255,255,.9)
--video-menu-item-icon-color Menu icon color black
--video-menu-item-hover-color Menu item hover color #d32f2f
--video-menu-item-icon-hover-color Menu icon hover color white
--video-tooltip-background-color Tooltip background color rgba(255,255,255,.9)
--video-pulse-icon-color Pulse icon background color #d32f2f
--video-font-family Font-family used throughout video player Arial, Helvetica, sans-serif

HTML Example:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <title>mp4-video-player demo</title>
    <script type="module">
        import '@webcomponents/webcomponentsjs/webcomponents-loader.js';
        // custom-style element invokes the custom properties polyfill
        import '@polymer/polymer/lib/elements/custom-style.js';
        import '@thuoe/mp4-video-player/mp4-video-player.js'
    </script>
</head>
<body>
    <h3>Video player using custom CSS properties</h3>
    <!-- ensure that custom props are polyfilled on browsers that don't support them -->
    <custom-style>
        <style is="custom-style">
            mp4-video-player {
                /* Set the values for the custom CSS properties */
                --video-thumb-color: red;
                --video-tooltip-background-color: orange;
                --video-menu-item-hover-color: magenta;
            }
        </style>
    </custom-style>
    <mp4-video-player></mp4-video-player>
</body>
</html>

Or you can dynamically change the CSS properties at runtime..

window.addEventListener('WebComponentsReady', () => {
  // when the video player element has finished initializing..
  const player = document.querySelector('mp4-video-player');
  player.updateStyles({
      '--video-min-width': '750px',
      '--video-min-height': '300px',
      '--video-title-color': 'red'
      ...
  });  
});

Keyboard Shortcuts

This video player has intergrated the following shortcuts to further enhance playback experience:

Keyboard Shortcut Intended Action
space or p Toggle play
m Toggle mute
f Toggle fullscreen
→ Skip ahead
← Skip behind
↑ Volume up
↓ Volume down

Custom Events

The player has a suite of events created using the CustomEvent API at your disposal to listen out for:

Event Description event.detail properties
play When the video begins to play currentTime
pause When the video has been paused currentTime
ended When the video has ended currentTime
exitFullscreen When exiting fullscreen mode currentTime
enterFullscreen When entering fullscreen mode currentTime
timeUpdated When the current time has updated to a new position currentTime
volumeChange When the volume has been changed volume

Code Example:

const videoPlayer = document.querySelector('mp4-video-player');
videoPlayer.addEventListener('timeUpdated', (event) => {
  console.log('Time Updated!', event.detail.currentTime);
});