Documentation Archive

Developer

Markup Formatting Reference

On This Page

Videos

Display an inline video player for a specified file in the resources of the playground.

Swift Playgrounds can play videos at remote URLs as well as video resources that are included in the Playground package. However, any poster images must be included in the Playground package in order to be displayed. For information on adding videos and other resource files to your playground, see Add resources to a playground in Xcode Help.

Works with:

  • ✓ Playgrounds

  •    Symbol documentation

Syntax

  • ![alternate text](video name poster="image file name" width="integer width" height="integer height")
  • Alternate text (optional) displays when the pointer hovers over the video or if the video cannot be loaded. The text is also used for accessibility.

  • Video name specifies the video file in the playground resources.

  • Poster (optional) specifies an image file to use as the video's poster frame. If a poster image is not provided, an empty video player is shown.

  • Width (optional) specifies the width in points for the video player. The default value is 640 points.

  • Height (optional) specifies the height in points for the video player. The default value is 360 points.

Example: Simple Inline Video Player

Display an inline video player for the file new-fonts.mp4 and provide alternative text.

  1. //: Watch the WWDC session introducing the San Francisco Font
  2. //: ![San Francisco font introduction](new-fonts.mp4)

The following screenshot shows the inline video player defined by the markup in Example: Simple Inline Video Player:

image: ../Art/MFR_video_pg_plain_2x.png

The alternative text displays if the video file cannot be loaded, or if the video file cannot be found. For example, this screenshot changes the name of the video file to nonexistent-file.mp4 in the markup in Example: Simple Inline Video Player:

image: ../Art/MFR_video_pg_alt_2x.png

Example: Poster Frame and Custom Size

Display an inline video player with a custom width and height for the file new-fonts.mp4 using the image font-poster.png as the poster frame.

  1. //: Watch the WWDC session introducing the San Francisco Font
  2. //:
  3. //: *The player is a custom size and has a poster image*
  4. //: ![](new-fonts.mp4 poster="font-poster.png" width="960" height="570")

This screenshot shows the larger inline video player with a custom poster image defined by the markup in Example: Poster Frame and Custom Size:

image: ../Art/MFR_video_pg_options_2x.png