Inserting Video and Audio in your items - cross-platform/cross-device - is easy with our easy-to-use <object> markup. Because of disparate support for media formats, you should always specify the names/locations of two different media encodings in your object tag,

Note: as of August 2018, you are strongly encouraged to specify only a single MP3 audio file instead of two different audio files such as M4A and OGG.

Video

For video, you should always specify your MP4 video file first in your <object> tag. Inside the <object> tag, you specify a <param name="webmSource"> tag that points to the location of your Webm-encoded video file.

Additionally, if you have a thumbnail image (e.g., an image from the video you would like displayed within the media player's window prior to and after the video has been played), then this should be coded inside another the <param> tag that points to the location of your png image file.

<object data="assets/big_buck_bunny.mp4" type="video/mp4">
  <param name="webmSource" value="assets/big_buck_bunny.webm"          valuetype="REF">
  <param name="thumbnail"  value="assets/big_buck_bunny_thumbnail.png" valuetype="REF"/>
</object>

Audio

For audio, as of August 2018, you should ONLY specify your MP3 audio file in your <object> tag as MP3 audio has broad browser support. Plus the single audio file also reduces item payload size.

<object data="assets/big_buck_bunny_audio.mp3" type="audio/mp3">
</object>

hideRate

The optional "hideRate" class attribute can be added to the <object> tag to suppress the media player's rate of play ("Speed") menu.

For video, "hideRate" will remove the media player's settings icon unless the video has closed captions.

For audio and video suppress the media player's rate of play setting by adding the "hideRate" class attribute to the item XML.

<object data="assets/VH027511.mp4" height="320" class="hideRate" type="video/mp4">
  <param name="webmSource" value="assets/VH027511.webm" valuetype="REF"/>
</object>

<object data="assets/big_buck_bunny_audio.mp3" type="audio/mp3" class="hideRate">
</object>

hideProgress

The optional "hideProgress" class attribute can be added to the <object> tag to suppress the media player's progress bar.

For audio and video suppress the media player's progress bar (with counter and time) by adding the "hideProgress" class attribute to the item XML.

<object data="assets/VH027511.mp4" height="320" class="hideProgress" type="video/mp4">
  <param name="webmSource" value="assets/VH027511.webm" valuetype="REF"/>
</object>

<object data="assets/big_buck_bunny_audio.mp3" type="audio/mp3" class="hideProgress">
</object>

data-max-plays

The optional "data-max-plays" attribute can be added to the <object> tag to limit the number of times a media file can be played to completion. Partial plays are not counted. For example, if the user starts playing the media and navigates away before the media has completed playing, it will not count towards the max plays value.

For audio and video limit the number of completed plays by adding the "data-max-plays" attribute to the object tag. The attribute's value will indicate the number of completed plays allowed. A value of zero indicates unlimited plays.

The "data-max-plays" attribute should always be used in conjunction with the "hide-progress" class attribute to prevent the user from seeking forwards and backwards through the media file using the progress bar and keyboard shortcuts.

<object data="assets/big_buck_bunny_audio.mp3" type="audio/mp3" class="hideProgress" data-max-plays="2">
</object>

<object data="assets/VH027511.mp4" height="320" class="hideProgress" type="video/mp4" data-max-plays="2">
  <param name="webmSource" value="assets/VH027511.webm" valuetype="REF"/>
</object>

Get Responses:

[ Click Get Responses ]