Skip to content
This repository has been archived by the owner on Jul 19, 2024. It is now read-only.

Azure-Samples/azure-media-player-samples

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

page_type languages products description
sample
javascript
azure
azure-media-services
azure-media-player
The samples in this repo show how to use the Azure Media Player in multiple scenarios.

Azure Media Player Samples

The samples in this repo show how to embed the Azure Media player either dynamically with JavaScript or statically with HTML5 video element attributes.

Contents

Outline the file contents of the repository. It helps users navigate the codebase, build configuration and any related assets.

File/folder Description
html Azure Media Player embedding samples
media folder for animated GIF of player
typescript Typescript file
.gitignore Define what to ignore at commit time.
CHANGELOG.md List of changes to the sample.
CONTRIBUTING.md Guidelines for contributing to the sample.
README.md This README file.
LICENSE The license for the sample.

Azure Media Player

You can use Azure Media Player to stream videos from Azure Media Services. The samples in this set include basic to advanced configurations (listed below.) See each sample comments on how to use.

azure media player screen capture

You can view the Azure Media Player demo here.

Sample Listing

Sample Name and Description File Name
Basic
Set Source
Playback unprotected content.
Dynamic: dynamic_setsource.html
Static: videotag_setsource.html
Features
VOD Ad insertion - VAST
Insert pre- mid-and post- roll VAST ads
into a VOD asset.
Dynamic: dynamic_vast_ads_vod.html
Static: N/A
Playback Speed
Enables viewers to control what the
speed of the video.
Dynamic: dynamic_playback_speed.html
Static: N/A
AMP Flush Skin
Enables new AMP skin.
Please note: AMP flush is only supported in
AMP versions 2.1.0+
Dynamic: dynamic_flush_skin.html
Static: videotag_flush_skin.html
Captions and Subtitles
Playback with WebVTT subtitles.
Dynamic: dynamic_webvtt.html
Static: videotag_webvtt.html
Live CEA 708 Captions
Playback with live CEA 708 inbound
captions with the captions left-aligned.
Dynamic: dynamic_live_captions.html
Static: N/A
Streaming with Progressive Fallback
Basic setup of adaptive playback with
fallback for progressive if streaming
not supported on platform.
Dynamic: dynamic_progressiveFallback.html
Static: videotag_progressiveFallback.html
Progressive Video MP4
Playback of progressive MP4 video.
Dynamic: dynamic_progressiveVideo.html
Static: videotag_progressiveVideo.html
Progressive Audio MP3
Playback of progressive audio MP3.
Dynamic: dynamic_progressiveAudio.html
Static: videotag_progressiveAudio.html
DD+
Playback of content with DD+ audio.
Dynamic: dynamic_dolbyDigitalPlus.html
Static: N/A
Options
Heuristic Profile
Change the heuristics profile
Dynamic: dynamic_heuristicsProfile.html
Static: videotag_heuristicsProfile.html
Localization
Set localization
Dynamic: dynamic_localization.html
Static: videotag_localization.html
Audio Tracks Menu
Options to show how to display audio
tracks menu on the default skin.
Dynamic: dynamic_multiAudio.html
Static: videotag_multiAudio.html
Hotkeys
This sample shows how to configure which
hotkeys are enabled in the player
Dynamic: dynamic_hotKeys.html
Static: videotag_hotKeys.html
Events, Logging and Diagnostics
Register Events
Playback with event listeners.
Dynamic: dynamic_registerEvents.html
Static: videotag_registerEvents.html
Logging
Turn on verbose logging to the console.
Dynamic: dynamic_logging.html
Static: videotag_logging.html
Diagnostics
Get diagnostic data.
This sample only works on some techs.
Dynamic: dynamic_diagnostics.htnml
Static: N/A
AES
AES no token
Playback of AES content with no token.
Dynamic: dynamic_aes_notoken.html
Static: videotag_aes_notoken.html
AES token
Playback of AES content with token.
Dynamic: dynamic_aes_token.html
Static: videotag_aes_token.html
AES HLS proxy simulation
Playback of AES content with token,
showing a proxy for HLS so that token
can be used with iOS devices.
Dynamic: dynamic_aes_token_withHLSProxy.html
Static: videotag_aes_token_withHLSProxy.html
AES token force flash
Playback of AES content with token,
forcing the flashSS tech.
Dynamic: dynamic_aes_token_forceFlash.html
Static: videotag_aes_token_forceFlash.html
DRM
DRM
Multi-DRM with PlayReady, Widevine, and
FairPlay
Dynamic: dynamic_multiDRM_PlayReadyWidevineFairPlay_notoken.html
Static: videotag_multiDRM_PlayReadyWidevineFairPlay_notoken.html
PlayReady no token
Playback of PlayReady content with no token.
Dynamic: dynamic_playready_notoken.html
Static: videotag_playready_notoken.html
PlayReady no token force Silverlight
Playback of PlayReady content with no token,
forcing silverlightSS tech.
Dynamic: dynamic_playready_notoken_forceSilverlight.html
Static: videotag_playready_notoken_forceSilverlight.html
PlayReady token
Playback of PlayReady content with token.
Dynamic: dynamic_playready_token.html
Static: videotag_playready_token.html
PlayReady token force Silverlight
Playback of PlayReady content with token,
forcing silverlightSS tech.
Dynamic: dynamic_playready_token_forceSilverlight.html
Static: videotag_playready_token_forceSilverlight.html
Protocol and Tech
Change techOrder
Change the tech order
Dynamic: dynamic_techOrder.html
Static: videotag_techOrder.html
Force MPEG-DASH only in UrlRewriter
Playback of unprotected content only using
the DASH protocol.
Dynamic: dynamic_forceDash.html
Static: videotag_forceDash.html
Exclude MPEG-DASH in UrlRewriter
Playback of unprotected content only using
the Smooth and HLS protocols.
Dynamic: dynamic_forceNoDash.html
Static: videotag_forceNoDash.html
Multiple Delivery Policy
Setting the source with content that has
multiple delivery policies from
Azure Media Services
Dynamic: dynamic_multipleDeliveryPolicy.html
Static: videotag_multipleDeliveryPolicy.html
Programatically Select
Select Text Track
Select a WebVTT track from the from
the track list.
Dynamic: dynamic_selectTextTrack.html
Static: N/A
Select Bitrate
Selecting a bitrate from the list of bitrates.
This sample only works on some techs.
Dynamic: dynamic_selectBitrate.html
Static: N/A
Select Audio Stream
Selecting an audio stream from the list of
available audio streams.
This sample only works on some techs.
Dynamic: dynamic_selectAudioStream.html
Static: N/A

Prerequisites

  • Basic knowledge of HTML5.
  • A link to a video

Setup

  • Clone or download this sample repository.
  • Open the sample file in Visual Studio or other code editor.
  • See comments in the sample file to edit the files for your environment.

Next steps