Skip to main content

Video-player (DEPRECATED)



The Video-player component is used to play video content in multiple formats (like mp4, apple hls, dash, and smooth streaming formats).



[This component has been deprecated due to compliance issues, please use One Player from RedTiger Video Platform instead ]



Example

Default video-player and MP4 video with closed caption available

Best practices

This component has been deprecated, please use One Player instead for your site to be cookie compliant.

For Microsoft based properties, we can not have YouTube appearing on Microsoft properties (Web, App, etc…) due to a few legal issues:

  • NGP – You need to call the NoCookie version of YouTube to be NGP compliant
  • Accessibility – The YouTube player does not meet Accessibility requirements


For these scenarios (Microsoft Web and App), your sites and apps should be calling the ONE Player. This will require content providers to supply their MP4 files for publication into vCMS (which will be replaced and migrated to DAM in H2) for publication and hosting.

This publication process will allow your content to be available for use in UCX, RedTiger, SiteMuse as well as iFrame and JavaScript embeddable. For more information on how to leverage vCMS please see: https://aka.ms/vcms_wiki.

Once published via vCMS, the video can then be presented in the ONE Player. For more information on the ONE Player please see: http://redtigerwiki.com/wiki/video

That being said, there might be specific social scenarios which might allow you to publish to YouTube, please check with the CELA team to get an exception.

Use the video-player to break up text-heavy pages, to illustrate products for sale, or to improve storytelling on a page.

Unlike the older video component, the video-player is easier to use and more flexible. Setting it up can be as simple as specifying the component's unique id, the media file to play, and the closed caption files to use. Or you can include user options like picture quality, playback speed, and sharing on social media. You can specify autoplay, mute, how to display the player's controls, and the MWF theme to use. You can also, if you chose to do so, collect telementry on the video-player usage. You can even select to use 3rd party players. See the information and examples below for more information.

Do

* Try and stick to the recommended aspect ratio of 16:9 for the original media. This will optimize your video content to resize across different viewports flawlessly and play well with other elements on the page.

  • Include the word "video" in the messaging when linking off from other elements into a video player. This helps set the expectations for users who might consider clicking on the element. For example, it is preferable for a link to a video of a specific product to read "Watch video" instead of "Watch", "View", or "See preview".
  • Use words such as “trailer” or “preview” only where the context of the video is clear.

Don’t

  • Do not use autoplay unless absolutely necessary. It can be an intimidating experience for users when audio-visual content starts playing automatically, even if it’s in the background.
  • Do not use the YouTube player, it's not cookie or accessibility compliant

Also known as

Video
Media player
Movie player
Audio player

Related

Action trigger
Call to action
Video (Deprecated)

Accessibility

Options

  • Classes: The video-player div element requires class c-video-player. * data-player-data: This property is assigned the player options and metadata required by the video-player. This data is a json object and includes the following (optional except where specified):
    • options: Required. These options define how the player should function. They include:
      • id — Required. Typically set to the same value as the unique element id.
      • autoplay — Boolean value where 'true' = run in autoplay mode.
      • mute — Boolean value where 'true' = mute on.
      • controls — Boolean value where 'true' = display controls.
      • loop — Boolean value where 'true' = repeat play automatically.
      • market — Required. This value is used for localization, specifying the market where the player will be used. It should always be set to the current page's locale. For example: 'en-us'
      • share — Boolean value where 'true' = share on social media. The user is presented with a selection list of sites to choose from.
      • shareOptions — This optional parameter specified the specific items that are included in the selection list. If nothing is specified, the list is populated with all available share targets. Available targets include: facebook, twitter, linkedin, skype, copy, and mail.
      • playbackSpeed — Boolean value where 'true' = turn on playback speed select menu.
      • reporting — This optional feature is a boolean value where setting enabled=true turns on the telementry reporting channel. You then need to specify which channel to use. For example, setting jsll=true directs the telemetry to the jsll service channel. Note: jsll is the only channel currently supported.
      • theme — Specify the MWF visual theme: light or dark.
    • metadata: Required. These options describe the media to be played. They include:
      • title — The media title.
      • description — A short description of the media to be played.
      • posterframeUrl — The URL of the image file (usually jpg, png, or ??) to be used on the as the overlay preview image on the non-running player control.
      • playerName — The name of the external player you want to use. Currently only supports YouTube.
      • videoId — The video id for the external player.
      • shareUrl — Use this URL to share on social media. If not specified, the local page's URL will be used.
      • videoFiles — Information to identify the media file location and type. Multiple video files can be listed using comma delimiting.
        • url – Required. The media file download location.
        • mediaType – The media type (i.e. MP4, HLS, DASH, or SMOOTH).
        • quality – Specifies the picture quality. Options: HD, HQ, SD, LO
      • ccFiles — The closed caption transcripts to use, if requested. Multiple transcripts can be listed using comma delimiting.
        • url – Required. The URL where the file can be found.
        • locale – Required. The regional location where the media will be viewed (e.g. en-us, es-mx, etc.). Used for localization.

Specifications

This component has been deprecated, please use One Player instead for your site to be cookie and accessibility compliant.

The Video-player library (mwf-video-player-main.var.min.js) is not a part of the regular MWF distributions and must be loaded seperately. It can be found here on CDN: http://assets.onestore.ms/cdnfiles/external/mwf/long/v1/v1.20.2/scripts/mwf-video-player-main.var.min.js

The Video-player JavaScript library follows the same versioning as the normal MWF distribution. Be sure to use the matching CSS library version and the video-player library version. Also, the Video-player library uses the same code design patterns as the main MWF JavaScript library. You have AMD, CommonJS, UMD, and VAR “flavors” to choose from. See the CDN documentation for more information.

Note: Although you can get this library from the latest path, it is not recommended at this time. The safer option is to use the version specific distribution path.

Localization: One unique feature of the Video-player among MWF components is that it handles its own localization. All strings used in the video-player will be translated automatically to match the specified locale.

Development

  • Schema definition: The video-player schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Single mp4 video with closed captions

<div id="videoPlayer1" class="c-video-player" itemscope itemtype="http://schema.org/VideoObject" data-player-data='{"options":{"id":"videoPlayer1","controls":true,"autoplay":false,"loop":false,"mute":false,"share":true,"playbackSpeed":true},"metadata":{"title":"Title","description":"Description","posterframeUrl":"/images/components/video/XboxOneS.png","videoFiles":[{"url":"/videos/components/video/XboxOneS.mp4","mediaType":"MP4"}],"ccFiles":[{"url":"/videos/XboxOneS.en-us.ttml","locale":"en-us"},{"url":"/videos/XboxOneS.es-mx.ttml","locale":"es-mx"}]}}'></div>

Multi-quality mp4 videos

<div id="videoPlayer2" class="c-video-player" itemscope itemtype="http://schema.org/VideoObject" data-player-data='{"options":{"id":"videoPlayer2","controls":true,"autoplay":false,"loop":false,"mute":false,"market":"en-us","share":true,"playbackSpeed":true},"metadata":{"title":"This artist is confusing the internet with his illusions","description":"Kevin Parry has worked on animated movies like \"Kubo and the Two Strings.\"","posterframeUrl":"http://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAlOsk6.img","videoFiles":[{"formatCode":"101","url":"http://prod-video-cms-amp-microsoft-com.akamaized.net/tenant/amp/entityid/AAlOECt?blobrefkey=101&$blob=1","quality":"LO","mediaType":"MP4"},{"formatCode":"102","url":"http://prod-video-cms-amp-microsoft-com.akamaized.net/tenant/amp/entityid/AAlOECt?blobrefkey=102&$blob=1","quality":"SD","mediaType":"MP4"},{"formatCode":"103","url":"http://prod-video-cms-amp-microsoft-com.akamaized.net/tenant/amp/entityid/AAlOECt?blobrefkey=103&$blob=1","quality":"HQ","mediaType":"MP4"},{"formatCode":"104","url":"http://prod-video-cms-amp-microsoft-com.akamaized.net/tenant/amp/entityid/AAlOECt?blobrefkey=104&$blob=1","quality":"HD","mediaType":"MP4"},{"formatCode":"1006","url":"http://eus-streaming-video-msn-com.akamaized.net/abacba53-a338-4392-ab6c-f34fcbd88dd1/55040747-61c0-4ac0-b5f1-765ff0d69c78.ism/manifest(format=m3u8-aapl)","mediaType":"HLS"}],"ccFiles":[{"url":"http://prod-video-cms-amp-microsoft-com.akamaized.net/tenant/amp/entityid/AAlOECt?blobrefkey=en-us&$blob=1","locale":"en-us"}]}}'></div>

Smooth streaming video (ism format)

<div id="videoPlayer_ism" class="c-video-player" itemscope itemtype="http://schema.org/VideoObject" data-player-data='{"options":{"id":"videoPlayer_ism","controls":true,"autoplay":false,"loop":false,"mute":false,"market":"en-us","share":true,"playbackSpeed":true},"metadata":{"title":"Title","description":"Description","duration":179,"videoFiles":[{"url":"//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest","mediaType":"SMOOTH"}]}}'></div>