This component is a simple implementation of the HTML <video /> element.
Basically, showing a video is as simple as writing <b:video src="http://URL.com/myVideo.mp4" style="width:100%" />:
Most application servers support playing videos. Using a relative URL usually suffices to play the video: <b:video src="myVideo.mp4" style="width:100%" />.
width attributeIt'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.
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.
| Attribute | Default value | Description |
|---|---|---|
| ajax | false | Whether the Button submits the form with AJAX. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| 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. |
| delay | (none) | Delays the AJAX request. |
| 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. |