# Examples

See the player in action!

Search examples…

## Getting started

## [▶️Basic player](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/getting-started/basic.md)

[A minimal player setup playing an HLS stream, with Open Video UI and with the Default UI.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/getting-started/basic.md)

## Streaming

## [🖥️4K streaming](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/4k-streaming.md)

[Play a 4K Ultra HD DASH stream, and see which quality is playing.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/4k-streaming.md)

## [📶Adaptive bitrate (ABR)](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/abr.md)

[Compare the performance, quality and bandwidth ABR strategies, set an initial bitrate, and see which quality the player picks.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/abr.md)

## [⏪DVR and sliding windows for live streams](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/dvr.md)

[Seek within a live DVR window and follow program time.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/dvr.md)

## [⚡Fast source switching](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/fast-source-switching.md)

[Measure startup time when switching between video sources.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/fast-source-switching.md)

## [✨MPEG-5 LCEVC](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/lcevc.md)

[Play DASH or HLS streams with MPEG-5 LCEVC enhancement.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/lcevc.md)

## [🥽Virtual reality (360°)](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/vr.md)

[Play a 360° video and read the VR direction (yaw, pitch and roll) and stereo mode from the VR API.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/vr.md)

## [🌐Network API](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/network-api.md)

[Inspect and modify the player's HTTP requests and responses with network interceptors.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/network-api.md)

## [📡OptiView Real-time Streaming](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/millicast.md)

[Play a sub-second latency OptiView Real-time Streaming live stream.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/millicast.md)

## [📺OptiView Live Streaming](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/theolive.md)

[Play an OptiView Live Streaming real-time stream and see the current latency.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/theolive.md)

## [🔊Dolby Atmos](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/dolby-atmos.md)

[Detect and play Dolby Atmos audio.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/dolby-atmos.md)

## [🌈Dolby Vision](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/dolby-vision.md)

[Detect and play Dolby Vision video.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/streaming/dolby-vision.md)

## Playback control

## [🎞️Frame accurate seeking](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/frame-accurate-seeking.md)

[Step through a video frame by frame, or jump to a specific frame number.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/frame-accurate-seeking.md)

## [⏩Playback speed](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/playback-speed.md)

[Speed up or slow down a video by changing the playback rate.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/playback-speed.md)

## [⏱️Keeping track of time](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/keeping-track-of-time.md)

[Read the player's time, played, buffered, and seekable ranges.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/keeping-track-of-time.md)

## [🔁Continuous play](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/continuous-play.md)

[Resume playback from its last saved position.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/continuous-play.md)

## [🔖Creating bookmarks](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/bookmarks.md)

[Save and restore playback bookmarks across videos.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/bookmarks.md)

## [⏳Preload](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/preload.md)

[Control how much of the video is buffered before playback starts with the preload property.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/preload.md)

## [📃Playlist and caching](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/playlist-and-caching.md)

[Build a playlist and preload upcoming items with the caching API.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/playback/playlist-and-caching.md)

## User interface

## [🧩Adding buttons to the UI](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/adding-buttons.md)

[Add a custom menu, Skip intro button and seek buttons to both player UIs.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/adding-buttons.md)

## [🎨Changing the UI with CSS](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/changing-ui-with-css.md)

[Change player colors and controls with CSS.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/changing-ui-with-css.md)

## [⚠️Custom error messages](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/custom-error-messages.md)

[Replace the default error messages with your own, in both Open Video UI and the Default UI.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/custom-error-messages.md)

## [🎬Related content](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/related-content.md)

[Show related videos in the player and play them without leaving the page.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/related-content.md)

## [🔗Social sharing](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/social-sharing.md)

[Add social sharing links, a direct link and an embed code to the player.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/social-sharing.md)

## [🖼️Preview thumbnails](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/preview-thumbnails.md)

[Show preview thumbnails on the seek bar from manifest or side-loaded WebVTT tracks.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/preview-thumbnails.md)

## [🎧Audio-only player](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/audio-only.md)

[Build an audio-only player with Open Video UI.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/audio-only.md)

## [👀Keep the control bar visible](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/keep-control-bar-visible.md)

[Keep the control bar visible at all times.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ui/keep-control-bar-visible.md)

## Subtitles and metadata

## [💬Closed captions and subtitles](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/subtitles-metadata/closed-captions-subtitles.md)

[Load, style, and inspect subtitles and closed captions.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/subtitles-metadata/closed-captions-subtitles.md)

## [🏷️ID3 metadata](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/subtitles-metadata/id3-metadata.md)

[Read ID3 metadata from an audio stream, show WXXX artwork behind the player, and overlay the song details.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/subtitles-metadata/id3-metadata.md)

## Casting

## [📺AirPlay](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/casting/airplay.md)

[Stream to an Apple TV or another AirPlay receiver from Safari.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/casting/airplay.md)

## [📡Chromecast](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/casting/chromecast.md)

[Cast to a Chromecast device with the auto, manual or disabled cast strategy, and test your own receiver application ID.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/casting/chromecast.md)

## Content protection

## [🔒DRM and AES-128 encryption](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/content-protection/drm.md)

[Play content protected with Widevine, PlayReady or FairPlay DRM, or encrypted with AES-128.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/content-protection/drm.md)

## Ads

## [📺Google DAI](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ads/google-dai.md)

[Load Google DAI streams and inspect their ad breaks and events.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ads/google-dai.md)

## [📢Advertisement tester](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ads/advertisement-tester.md)

[Schedule VAST, VMAP and Google IMA ads at different positions, and inspect the resulting ad events.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ads/advertisement-tester.md)

## [🚫Ad block detection](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ads/ad-block-detection.md)

[Detect ad blockers and ad errors, and choose whether to block the content.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/ads/ad-block-detection.md)

## Analytics

## [📊Conviva](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/analytics/conviva.md)

[Monitor playback with the Conviva connector.](https://docs-preview.optiview.dolby.com/pr-912/theoplayer/examples/analytics/conviva.md)