d2l-travis-deploy

dave.batiste

dlockhart

@brightspace-ui-labs/media-player

  "name": "@brightspace-ui-labs/media-player",

  "description": "A reusable media player component.",

  "repository": "https://github.com/BrightspaceUILabs/media-player.git",

    "lint": "npm run lint:eslint && npm run lint:lit && npm run lint:style",

    "lint:eslint": "eslint . --ext .js,.html",

    "lint:fix": "eslint . --ext .js,.html --fix",

    "lint:lit": "lit-analyzer \"*.js\" demo test",

    "lint:style": "stylelint \"**/*.{js,html}\"",

    "start": "web-dev-server --app-index demo/index.html --node-resolve --open --watch",

    "test": "npm run lint && npm run test:headless",

    "test:headless": "web-test-runner --files \"./test/**/*.test.js\" --node-resolve",

    "test:headless:watch": "web-test-runner --files \"./test/**/*.test.js\" --node-resolve --watch"

    "@brightspace-ui/stylelint-config": "^0.7",

    "eslint-config-brightspace": "^0.21",

    "@brightspace-ui-labs/seek-bar": "^2",

[![NPM version](https://img.shields.io/npm/v/@brightspace-ui-labs/media-player.svg)](https://www.npmjs.org/package/@brightspace-ui-labs/media-player)

> Note: this is a ["labs" component](https://daylight.d2l.dev/developing/getting-started/component-tiers/). While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:

> - [ ] [Design organization buy-in](https://daylight.d2l.dev/developing/creating-component/before-building/#working-with-design)

> - [ ] [Architectural sign-off](https://daylight.d2l.dev/developing/creating-component/before-building/#web-component-architecture)

> - [x] [Continuous integration](https://daylight.d2l.dev/developing/testing/tools/#continuous-integration)

> - [x] [Cross-browser testing](https://daylight.d2l.dev/developing/testing/cross-browser/)

> - [x] [Unit tests](https://daylight.d2l.dev/developing/testing/tools/) (if applicable)

> - [x] [Accessibility tests](https://daylight.d2l.dev/developing/testing/accessibility/)

> - [x] [Visual diff tests](https://daylight.d2l.dev/developing/testing/visual-difference/)

> - [x] Localization with Serge (if applicable)

A Lit element based media player component, designed for similarity across browsers. Capable of playing video and audio content.

![Example of video](demo/example-video.gif)

![Example of audio](demo/example-audio.gif)

npm install @brightspace-ui-labs/media-player

    import '@brightspace-ui-labs/media-player/media-player.js';

<d2l-labs-media-player src="/video.webm"></d2l-labs-media-player>

| allow-download| Boolean | false | If set, will allow the media to be downloaded.

| crossorigin | String | null | If set, will set the `crossorigin` attribute on the underlying media element to the set value.

| download-filename | String | null | If set along with `allow-download`, will use the provided value as the base of the filename (the extension will be automatically appended)

| duration-hint | Number | 1 | Measured in seconds. If set and the duration cannot be determined automatically, this value will be used instead.

| media-type | ["video", "audio"] | null | Whether the video or audio player should be rendered. If not set, a loading indicator will be displayed until set.

<d2l-labs-media-player loop src="./local-video.mp4"></d2l-labs-media-player>

| sourceType | ["audio", "video", "unknown"] | Get | The source type of the media.

| textTracks | [TextTrack] | Get | The TextTracks, for handling WebVTT. (See [MDN link](https://developer.mozilla.org/en-US/docs/Web/API/TextTrack))

// Programatically determine the current playback time of the media player

console.log(`Current playback time of the media player = ${this.document.querySelector('d2l-labs-media-player').currentTime} sec`);

| exitFullscreen() | void | Requests to exit fullscreen mode from the browser. Ignored if it is not playing video content, or if the video is not in fullscreen mode.

| play() | void | Begins playing the media. Ignored if the media is already playing.

| pause() | void | Pauses the media. Ignored if the media is already paused.

| requestFullscreen() | void | Requests fullscreen mode from the browser. Ignored if it is not playing video content, or the video is already in fullscreen mode.

// Programatically pause the media player

this.document.querySelector('d2l-labs-media-player').pause();

| cuechange | Dispatched when the currently-displayed captions cue changes. |

| durationchange | Dispatched when the video or media displayed has changed its duration |

| ended | Dispatched when the media has reached the end of its duration. |

| error | Dispatched when the media failed to load. |

| loadeddata | Dispatched when the media at the current playback position has finished loading. Often the first frame. |

| loadedmetadata | Dispatched when the metadata for the media has finished loading. |

| play | Dispatched when the media begins playing. |

| pause | Dispatched when the media is paused. |

| timeupdate | Dispatched when the currentTime of the media player has been updated. |

| trackloaded | Dispatched when a track element has loaded. |

| trackloadfailed | Dispatched when a track element could not be loaded from the provided src attribute. |

| tracksmenuitemchanged | Dispatched when the tracks menu item has changed. |

this.document.querySelector('d2l-labs-media-player').addEventListener('loadeddata', () => {

	console.log('loadeddata event has been dispatched');

The media player supports switching to different qualities. If multiple `<source>` tags are present, a quality selector will be available in the menu. In this case, do not set `src` on `d2l-labs-media-player`.

| label | String, required | | The label for the track, displayed to the user for selection.

| src | String, required | | The URL of the source file.

| default | Boolean | false | The source to be selected by default. If no source has the `default` attribute, then the first `<source>` tag is selected by default. Only one default should be set.

## Showing thumbnails preview with `thumbnails` attribute

Provide a url to the thumbnails sprite image. This sprite is a grid of images taken from the video, at a set interval.

![Example thumbnails sprite](demo/th90w160i1-samplevideo.png)

The thumbnail file name must use the following format:

`th<height>w<width>i<interval>-<hash>.[png|jpg]`

- `width` and `height` are the width/height px of each individual thumbnail

- `interval` indicates how many seconds apart each thumbnail is

		@@ -6,3 +6,3 @@ {
		"repository": "https://github.com/BrightspaceUILabs/media-player.git",
		"version": "3.9.1",
		"version": "3.9.2",
		"publishConfig": {
		@@ -9,0 +9,0 @@ "access": "public"

		@@ -54,3 +54,2 @@ # media-player
		\| hide-seek-bar \| Boolean \| false \| If set, the seek bar will not be shown. \|
		\| locale \| String \| en \| If set, will display chapter titles in the given locale when possible. \|
		\| loop \| Boolean \| false \| If set, once the media has finished playing it will replay from the beginning. \|
		@@ -57,0 +56,0 @@ \| media-type \| ["video", "audio"] \| null \| Whether the video or audio player should be rendered. If not set, a loading indicator will be displayed until set.

Worsened metrics