Video Player

Purpose

Use videos to provide marketing or support information best explained dynamically or using animation.

Requirements

The DLS video component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.

Usage

There are three variations of videos: headline video, feature video, and support video. Interactions and animations remain consistent across the variations. Include a caption file with all video assets for accessibility.

Specs - Closed Caption

Caption Text = Body 1, White, center-align
Background Radius = 3px
Background = Black, 80% opacity

Specs - Playhead

Icons = Medium, White
Video Timer = Body 1, White
Video Timeline = Bright Blue (progress), White (background)
Timeline Height = 6px
Background Radius = 3px
Background = Black, 80% opacity

Support Video

Specs - Support Video

Support video uses native browser for player controls.

Example - Support Video

Protection and Rewards as you shop? Simple.

Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card. Rewards available on eligible cards. Conditions apply. Available on eligible cards and devices. Eligible cards are active American Express Consumer, Small Business or Corporate Cards (excluding Corporate Purchasing Cards and Corporate Meeting Cards) issued by Amex Bank of Canada. Prepaid cards and products (such as the American Express Gift Card) are not eligible.

Copy

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div data-toggle="video" class="video">
            <video controls poster="../../assets/img/visuals/components/videos/poster.jpg" aria-labelledby="support-video-title">
                <source src="../../assets/img/visuals/components/videos/introducing-amex-apple-pay.mp4" type="video/mp4">
                <track kind="descriptions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
                <track kind="captions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
            </video>
        </div>
        <div>
            <h3 class="heading-4 margin-t margin-1-b dls-deep-blue" id="support-video-title">Protection and Rewards as you shop? Simple.</h3>
            <p class="body-1">Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card. 
                Rewards available on eligible cards. Conditions apply. Available on eligible cards and devices. Eligible cards are active American Express Consumer,
                Small Business or Corporate Cards (excluding Corporate Purchasing Cards and Corporate Meeting Cards) issued by Amex Bank of Canada.
                Prepaid cards and products (such as the American Express Gift Card) are not eligible.</p>
        </div>
    </div>
</div>

Support Video

Specs - Support Video

Support video uses native browser for player controls.

Example - Support Video

Protection and Rewards as you shop? Simple.

Copy

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div data-toggle="video" class="video">
            <video controls poster="../../assets/img/visuals/components/videos/poster.jpg" aria-labelledby="support-video-title">
                <source src="../../assets/img/visuals/components/videos/introducing-amex-apple-pay.mp4" type="video/mp4">
                <track kind="descriptions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
                <track kind="captions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
            </video>
        </div>
        <div>
            <h3 class="heading-4 margin-t margin-1-b dls-deep-blue" id="support-video-title">Protection and Rewards as you shop? Simple.</h3>
            <p class="body-1">Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card. 
                Rewards available on eligible cards. Conditions apply. Available on eligible cards and devices. Eligible cards are active American Express Consumer,
                Small Business or Corporate Cards (excluding Corporate Purchasing Cards and Corporate Meeting Cards) issued by Amex Bank of Canada.
                Prepaid cards and products (such as the American Express Gift Card) are not eligible.</p>
        </div>
    </div>
</div>

Headline Video

Deprecated

Specs - Headline Video

Width = Page wrapper width
Height = Dependent on original video aspect ratio
Main Play/Pause Icon = X-Large, White, Outline (default), Filled (hover)
Title Font = Heading 4, Deep Blue
Body Font = Body 1, Gray 06
Video Interaction = On load, video is paused, closed captioning is on by default
Playhead Interaction = On load, playhead shows and fades out after 4 seconds

Example - Headline Video

Protection and Rewards as you shop? Simple.

Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card.

Copy

<div data-toggle="video" class="video">
    <video poster="../../assets/img/visuals/components/videos/poster.jpg" aria-labelledby="headline-video-title">
        <source src="../../assets/img/visuals/components/videos/introducing-amex-apple-pay.mp4" type="video/mp4">
        <track kind="descriptions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
        <track kind="captions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
    </video>
    <div class="video-overlay">
      <button class="dls-icon-play-circle icon icon-xl icon-hover dls-white" aria-label="play" title="Play"></button>
    </div>
    <div class="video-footer">
      <div class="video-caption hidden"></div>
      <div class="video-controls flex-align-items-center">
        <button class="icon icon-md icon-hover dls-icon-play" title="Play"></button>
        <div data-time>00:00</div>
        <div class="flex-item-grow position-relative">
          <label for="timeline" class="sr-only">Video progess:</label>
          <progress id="timeline" value="0" max="100">0 %</progress>
        </div>
        <div data-duration></div>
        <div class="video-volume">
          <button class="icon icon-md icon-hover dls-icon-sound-on" aria-label="Turn volume on/off" title="Volume"></button>
          <div class="volume-slider">
            <label for="vol" class="sr-only">Volume</label>
            <input
                id="vol"
                type="range"
                min="0"
                max="10" />
          </div>
        </div>
        <button class="icon icon-md icon-hover dls-icon-captions-off" aria-label="Turn caption on/off" title="Caption"></button>
        <button class="icon icon-md icon-hover dls-icon-expand" aria-label="Open/close fullscreen" title="Full Screen"></button>
      </div>
    </div>
</div>
<div>
    <h3 class="heading-4 margin-t margin-1-b dls-deep-blue" id="headline-video-title">Protection and Rewards as you shop? Simple.</h3>
    <p class="body-1">Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card.</p>
</div>

Feature Video

Deprecated

Specs - Feature Video

Example - Feature Video

Protection and Rewards as you shop? Simple.

Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card.

Copy

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div data-toggle="video" class="video">
            <video poster="../../assets/img/visuals/components/videos/poster.jpg" aria-labelledby="feature-video-title">
                <source src="../../assets/img/visuals/components/videos/introducing-amex-apple-pay.mp4" type="video/mp4">
                <track kind="descriptions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
                <track kind="captions" label="English captions" src="../../assets/video/video.vtt" srclang="en" default="">
            </video>
            <div class="video-overlay">
              <button class="dls-icon-play-circle icon icon-xl icon-hover dls-white" aria-label="play" title="Play"></button>
            </div>
            <div class="video-footer">
              <div class="video-caption hidden"></div>
              <div class="video-controls flex-align-items-center">
                <button class="icon icon-md icon-hover dls-icon-play" title="Play"></button>
                <div data-time>00:00</div>
                <div class="flex-item-grow position-relative">
                  <progress value="0" max="100">
                    0%
                  </progress>
                </div>
                <div data-duration></div>
                <div class="video-volume">
                  <button class="icon icon-md icon-hover dls-icon-sound-on" aria-label="Volume On/Off" title="Volume"></button>
                  <div class="volume-slider">
                    <label for="volume" class="sr-only">Volume</label>
                    <input
                        id="volume"
                        type="range"
                        min="0"
                        max="10" />
                  </div>
                </div>
                <button class="icon icon-md icon-hover dls-icon-captions-off" aria-label="Turn caption on/off" title="Caption"></button>
                <button class="icon icon-md icon-hover dls-icon-expand" aria-label="Expand Full Screen" title="Full Screen"></button>
              </div>
            </div>
          </div>
        <div>
            <h3 class="heading-4 margin-t margin-1-b dls-deep-blue" id="feature-video-title">Protection and Rewards as you shop? Simple.</h3>
            <p class="body-1">Apple Pay is a new way to pay in-store with a compatible* Apple device. Now you can use it with your eligible American Express Card.</p>
        </div>
    </div>
</div>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name	Options	Description
`data-time`	`none`	Displays the current video time on the playhead.
`data-duration`	`none`	Displays the total video duration on the playhead.
`data-interval`	`number ranging from 0 to video duration total`	Increases/decreases the progress by specified interval number.