Video (<b:video />)

This component is a simple implementation of the HTML <video /> element.

Basic usage

Basically, showing a video is as simple as writing <b:video src="http://URL.com/myVideo.mp4" style="width:100%" />:

Playing videos from your own server

Most application servers support playing videos. Using a relative URL usually suffices to play the video: <b:video src="myVideo.mp4" style="width:100%" />.

Always set the width attribute

It's a good idea to always set the width of the video. In general, setting it to 100% makes it fit in nicely with the responsive design of your page. The height of the video is calculated automatically because you can't modify the aspect ration of the video. Nonetheless, it's a good idea to set the height, too, in order to prevent the page from flickering while the video is loaded. As long as the browser doesn't know the dimensions of the video, it uses default values which are almost always wrong.

AJAX

The video element supports a couple of standard events, such as onclick, and the full range of events described at w3schools.com. The only exception is onerror, which is not supported because there's already a standard AJAX attribute called onerror.

Event
Description
abort
Fires when the loading of an audio/video is aborted
canplay
Fires when the browser can start playing the audio/video
canplaythrough
Fires when the browser can play through the audio/video without stopping for buffering
durationchange
Fires when the duration of the audio/video is changed
emptied
Fires when the current playlist is empty
ended
Fires when the current playlist is ended
error
Not supported! Fires when an error occurred during the loading of an audio/video
loadeddata
Fires when the browser has loaded the current frame of the audio/video
loadedmetadata
Fires when the browser has loaded meta data for the audio/video
loadstart
Fires when the browser starts looking for the audio/video
pause
Fires when the audio/video has been paused
play
Fires when the audio/video has been started or is no longer paused
playing
Fires when the audio/video is playing after having been paused or stopped for buffering
progress
Fires when the browser is downloading the audio/video
ratechange
Fires when the playing speed of the audio/video is changed
seeked
Fires when the user is finished moving/skipping to a new position in the audio/video
seeking
Fires when the user starts moving/skipping to a new position in the audio/video
stalled
Fires when the browser is trying to get media data, but data is not available
suspend
Fires when the browser is intentionally not getting media data
timeupdate
Fires when the current playback position has changed
volumechange
Fires when the volume has been changed
waiting
Fires when the video stops because it needs to buffer the next frame


Attribute Default value Description
ajax false Whether the Button submits the form with AJAX.
autoplay false Setting this to true will start the video on page load. By default, autoplay is deactivated. Note that mobile devices never start videos automatically.
binding (none) An EL expression referring to a server side UIComponent instance in a backing bean.
col-lg
colLg (alternative writing)
-1 Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-md
colMd (alternative writing)
-1 Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-sm
colSm (alternative writing)
-1 Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
col-xs
colXs (alternative writing)
-1 Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
controls true Hide the controls (start, stop, seeking, volume etc.) by setting this property to false. By default, the controls are shown.
disabled false Boolean value to specify if the button is disabled.
display block If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block.
hidden (none) This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs.
id (none) Unique identifier of the component in a namingContainer.
immediate false Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false.
large-screen
largeScreen (alternative writing)
-1 Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
loop false Setting this flag to true causes the video to start over when it's finished. By default, loop is set to false.
medium-screen
mediumScreen (alternative writing)
-1 Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
offset (none) Integer value to specify how many columns to offset.
offset-lg
offsetLg (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-md
offsetMd (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-sm
offsetSm (alternative writing)
(none) Integer value to specify how many columns to offset.
offset-xs
offsetXs (alternative writing)
(none) Integer value to specify how many columns to offset.
onabort (none) Fires when the loading of an audio/video is aborted
oncanplay (none) Fires when the browser can start playing the audio/video
oncanplaythrough (none) Fires when the browser can play through the audio/video without stopping for buffering
onclick (none) The onclick attribute.
oncomplete (none) JavaScript to be executed when ajax completes.
ondurationchange (none) Fires when the duration of the audio/video is changed
onemptied (none) Fires when the current playlist is empty
onended (none) Fires when the current playlist is ended
onerror (none) JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions).
onloadeddata (none) Fires when the browser has loaded the current frame of the audio/video
onloadedmetadata (none) Fires when the browser has loaded meta data for the audio/video
onloadstart (none) Fires when the browser starts looking for the audio/video
onpause (none) Fires when the audio/video has been paused
onplay (none) Fires when the audio/video has been started or is no longer paused
onplaying (none) Fires when the audio/video is playing after having been paused or stopped for buffering
onprogress (none) Fires when the browser is downloading the audio/video
onratechange (none) Fires when the playing speed of the audio/video is changed
onseeked (none) Fires when the user is finished moving/skipping to a new position in the audio/video
onseeking (none) Fires when the user starts moving/skipping to a new position in the audio/video
onstalled (none) Fires when the browser is trying to get media data, but data is not available
onsuccess (none) JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception).
onsuspend (none) Fires when the browser is intentionally not getting media data
ontimeupdate (none) Fires when the current playback position has changed
onvolumechange (none) Fires when the volume has been changed
onwaiting (none) Fires when the video stops because it needs to buffer the next frame
process (none) Comma or space separated list of ids or search expressions denoting which values are to be sent to the server.
rendered false Boolean value to specify the rendering of the component, when set to false the component will not be rendered.
required (none) URL of the video to be shown. If you use a relative path (i.e. without http:// and without the domain name), the video will be taken from your own server.
small-screen
smallScreen (alternative writing)
-1 Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
span (none) Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
src (none)
style (none) Inline CSS of the tab.
style-class
styleClass (alternative writing)
(none) Style class of the div surrounding the tab pane.
tiny-screen
tinyScreen (alternative writing)
-1 Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths.
tooltip (none) The text of the tooltip.
tooltip-container
tooltipContainer (alternative writing)
body Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body.
tooltip-delay
tooltipDelay (alternative writing)
0 The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-hide
tooltipDelayHide (alternative writing)
0 The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-delay-show
tooltipDelayShow (alternative writing)
0 The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay).
tooltip-position
tooltipPosition (alternative writing)
(none) Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom".
update (none) Component(s) to be updated with ajax.
visible (none) This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs.
  • Tell the world which CSS classes can be used to change the look of the component.