Video Player

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/video"></script>

NPM#

npm i @pearson-ux/video --save

Dependancies#

You will need two other Web Components as dependancies. Include these script in the <head> of your document, above the video script:

<script src="https://unpkg.com/@pearson-ux/icon"></script><script src="https://unpkg.com/@pearson-ux/toggle"></script>

Demo#

<pearson-video url="//ux.pearson.com/prototypes/itpro-css-gravity/src/media/CCVC_1_0_0.mp4" poster="7" title="Title" subtitle="Subtitle" started="false"></pearson-video>

Smaller Video#

<pearson-video  url="//ux.pearson.com/prototypes/itpro-css-gravity/src/media/CCVC_1_0_0.mp4" poster="7" title="Title" subtitle="Subtitle" started="false" small="true"></pearson-video>

Structure#

Follow these steps to successfully build out a video player component. Start by adding a <pearson-video> element.

<pearson-video></pearson-video>

Add a video src url to the url attribute of the element

    <pearson-video url="//ux.pearson.com/prototypes/itpro-css-gravity/src/media/CCVC_1_0_0.mp4"></pearson-video>

Next you'll need to add a title and subtitle attribute

    <pearson-video title="title" subtitle="title" url="//ux.pearson.com/prototypes/itpro-css-gravity/src/media/CCVC_1_0_0.mp4"></pearson-video>

If you would like to display a certain frame of the video as a poster image, add the attribute poster with the value being the second you want the frame to capture

    <pearson-video poster="7" title="title" subtitle="title" url="//ux.pearson.com/prototypes/itpro-css-gravity/src/media/CCVC_1_0_0.mp4"></pearson-video>

API#

Required#

Attribute	Type	Default	Description
`url`	`string`	unset	Adds a video src to the player.
`title`	`string`	'unset'	Accepts a string as the title of the video
`subtitle`	`string`	'unset'	Accepts a string as the sub title of the video

Optional#

Attribute	Type	Default	Description
`status`	`string`	'pause'	Accepts the values `play` and `pause`. This will stop or play the video.
`poster`	`string`	'unset'	Accepts a number value that will be the second you want the poster captured.
`menu`	`string`	'off'	Accepts the values `off`,`open` and `submenu`. These attributes open the settings menus.
`playback`	`string`	'normal'	Accepts the values `slowest`,`slow`,`normal`,`fast` and `fastest`. These attributes change the playback speed.
`started`	`string`	'unset'	Accepts the values `true` and `false`. If set to true, this adds a b/w filter to the video poster
`requestFullScreen`	`function`	'method'	Opens the video in full screen

Events#

The pearson-video component emits an event called timeUpdate when the video is played, it returns a details object with the elapsed time and duration of the video.

  document.addEventListener('timeElapsed', event => {    // returns duration and time elapsed    console.log(event.detail)  })

IT PRO USERS: You can access the components title and subtitle property by referencing the pearson-video elements data object.

    const videoPlayer = document.querySelector('pearson-video');    console.log(videoPlayer.data.title, videoPlayer.data.subTitle)

Fullscreen#

The pearson-video component can be opened to full screen by using the requestFullScreen method.

const video = document.querySelector('pearson-video'),       button = document.querySelector('button');
button.addEventListener('click', event => {  video.requestFullscreen()})

For more details on the video element: The Video Embed element - MDN