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.
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.