Player API

Attributes are added in the <stream> tag without quotes, as you can see below:

<stream attribute-added-here src="5d5bc37ffcf54c9b82e996823bffbb81"></stream>

Multiple attributes can be used together, added one after each other like this:

 <stream attribute-1 attribute-2 attribute-3 src="5d5bc37ffcf54c9b82e996823bffbb81"></stream>

Supported Attributes

autoplay

Tells the browser to immediately start downloading the video and play it as soon as it can. Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don’t have unlimited Internet access before using this attribute.

To disable video autoplay, the autoplay attribute needs to be removed altogether as this attribute. Setting autoplay="false" will not work; the video will autoplay if the attribute is there in the tag.

controls

Shows the default video controls such as buttons for play/pause, volume controls. You may choose to build buttons and controls that work with the player. See an example.

height

The height of the video’s display area, in CSS pixels.

loop

A Boolean attribute; if included in the HTML tag, player will, automatically seek back to the start upon reaching the end of the video.

muted

A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may choose to include this attribute as a boolean attribute without a value, or you may specify the value preload="auto" to preload the beginning of the video. Not including the attribute or using preload="metadata" will just load the metadata needed to start video playback when requested.

The <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.

poster

A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.

src

The video id from the video you’ve uploaded to Cloudflare Stream should be included here.

width

The width of the video’s display area, in CSS pixels.

Methods

play()

A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn’t specified, a thumbnail image of the video is shown.

pause()

The video id from the video you’ve uploaded to Cloudflare Stream should be included here.

Properties

autoplay

Sets or returns whether the autoplay attribute was set, allowing video playback to start upon load.

controls

Sets or returns whether the video should display controls (like play/pause etc.)

currentTime

Returns the current playback time in seconds. Setting this value seeks the video to a new time.

duration (readonly)

Returns the duration of the video in seconds.

ended (readonly)

Returns whether the video has ended.

loop

Sets or returns whether the video should start over when it reaches the end

muted

Sets or returns whether the audio should be played with the video

paused (readonly)

Returns whether the video is paused

preload

Sets or returns whether the video should be preloaded upon element load.

volume

Sets or returns volume from 0.0 (silent) to 1.0 (maximum value)

Events

pause

Sent when the playback state is changed to paused (paused property is true).

play

This event is sent when the video starts playing, as a result of the play method, or the autoplay attribute.

seeked

This event is sent when a seek operation completes.

ended

Sent when the playback is finished.