Skip to main content

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​

AttributeTypeDefaultDescription
urlstringunsetAdds a video src to the player.
titlestring'unset'Accepts a string as the title of the video
subtitlestring'unset'Accepts a string as the sub title of the video

Optional​

AttributeTypeDefaultDescription
statusstring'pause'Accepts the values play and pause. This will stop or play the video.
posterstring'unset'Accepts a number value that will be the second you want the poster captured.
menustring'off'Accepts the values off,open and submenu. These attributes open the settings menus.
playbackstring'normal'Accepts the values slowest,slow,normal,fast and fastest. These attributes change the playback speed.
startedstring'unset'Accepts the values true and false. If set to true, this adds a b/w filter to the video poster
requestFullScreenfunction'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