Object

Video

The component for adding a video.

Properties

role
string
(Required)

Always video for this component.

URL
uri
(Required)

The URL of a video file that can be played using AVPlayer. HTTP Live Streaming (HLS) is highly recommended (.M3U8). For more information about HLS, see HTTP Live Streaming,

accessibilityCaption
string

A caption that describes the content of the video. The text is used for VoiceOver for iOS and VoiceOver for macOS. If accessibilityCaption is not provided, the caption value is used for VoiceOver for iOS and VoiceOver for macOS.

anchor

An object that defines vertical alignment with another component.

animation
*

An object that defines an animation to be applied to the component.

The none value is used for conditional design elements. Adding it here has no effect.

aspectRatio
number

The aspect ratio of the video: width divided by height. The aspect ratio determines the height of the video player.

When this property is omitted, the video player will have a 16:9 aspect ratio (1.777), and videos with ratios other than 16:9 will automatically be letterboxed.

behavior
*

An object that defines behavior for a component, like Parallax or Springy.

The none value is used for conditional design elements. Adding it here has no effect.

caption
string

A caption that describes the content of the video file. This text is also used by VoiceOver for iOS and VoiceOver for macOS if accessibilityCaption is not provided, or it can be shown when the video cannot be played.

conditional
*

An instance or array of component properties that can be applied conditionally, and the conditions that cause them to be applied.

explicitContent
boolean

A Boolean value that indicates that the video or its still image may contain explicit content.

hidden
boolean

A Boolean value that determines whether the component is hidden.

identifier
string

An optional unique identifier for this component. If used, this identifier must be unique across the entire document. You will need an identifier for your component if you want to anchor other components to it.

layout
*

An inline ComponentLayout object that contains layout information, or a string reference to a ComponentLayout object that is defined at the top level of the document.

If layout is not defined, size and position will be based on various factors, such as the device type, the length of the content, and the role of this component.

stillURL
uri

The URL of an image file that should be shown when the video has not yet been played.

Image URLs can begin with http://, https://, or bundle://. If the image URL begins with bundle://, the image file must be in the same directory as the document.

Image filenames should be properly encoded as URLs.

See Preparing Image, Video, Audio, Music, and ARKit Assets.

style
*

An inline ComponentStyle object that defines the appearance of this component, or a string reference to a ComponentStyle object that is defined at the top level of the document.

The none value is used for conditional design elements. Adding it here has no effect.

Discussion

Use the video component to add a video to your article by specifying a video URL. Users can control playback and watch the video from inside the article. You can also include an image to display when the video is not playing. To include a video from YouTube or Vimeo, use the EmbedWebVideo component instead of the video component.

See Preparing Image, Video, Audio, Music, and ARKit Assets

Example

{ "components": [ { "role": "video", "URL": "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_4x3/bipbop_4x3_variant.m3u8" } ]}

Relationships

Inherits From

See Also

Audio and Video

object Audio

The component for adding a playable audio clip.

object Music

The component for adding a playable music file.

object EmbedWebVideo

The component for adding a web video from YouTube or Vimeo.