DUE TO SPAM, SIGN-UP IS DISABLED. Goto Selfserve wiki signup and request an account.
Page History
The prototypes here were used for getting the feedback of other developers, during the first part (design part) of GSOC project. They are all obsolete now, and only kept as a reference example for future students .
<hx:video>
Extends: UIOutput. May extend a abstract component with hx:audio.
Attributes not present in ancestor:
Name | Required? | Values | Description |
|---|---|---|---|
preload | optional | one of | none: do not preload the media from the server |
showControls | optional | true(default) or false. | true: browser's media controls are shown (default) |
loop | optional | true(default) or false. | Pattern to validate the typed input on browser-side and the server-side. This attribute should not be set and is ignored if "type" is 'textarea'. |
poster | optional | String | Url of image to show when not playing or seeking |
width | optional | String | Width of the video |
height | optional | String | Height of the video |
Facets:
Name | Description |
|---|---|
fallBack | Content to display when HTML5 video is not supported. For example, page author may use a flash player as a fallback or display a message that displays Html5 video is not supported. |
Potential Children:
- <fx:mediaSource>
- <fx:mediaSources>
Notes:
- New <track> feature is not included, since there is no browser support yet (impossible to test). This feature can be added when one browser starts supporting it.
References:
- http://www.whatwg.org/specs/web-apps/current-work/#video
- https://developer.mozilla.org/En/HTML/Element/Video
<hx:audio>
This component will be same with <hx:video>, except it won't have "width", "height" and "poster" attributes.
<fx:mediaSource>
Extends: UIComponent
Attributes:
Name | Required? | Values | Description |
|---|---|---|---|
src | required | EL and Literal | URL of the source. |
contentType | optional | EL and Literal | MIME content type of the source (ie:video/ogg). |
codecs | optional | EL and Literal | Codecs of the source (ie:'avc1.64001E, mp4a.40.2'). |
media | optional | EL and Literal | Just like the @media in CSS. |
Notes:
- This component can be a child of <hx:video> and <hx:audio>
References:
- http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element
- https://developer.mozilla.org/En/HTML/Element/Source
<fx:mediaSources>
Extends: UIComponent
Attributes:
Name | Required? | Values | Description |
|---|---|---|---|
items | required | EL | binding of a collection which has elements of types having these methods:
|
Notes:
- This component can be a child of <hx:video> and <hx:audio>
References:
- http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element
- https://developer.mozilla.org/En/HTML/Element/Source
Usage of prototypes:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<hx:video value="#{videoBean.someVideoFileURL}" preload="metadata"
poster="somePosterImage.jpg"
width="600px" height="300px"
autoplay="true" loop="true" showControls="true" >
<f:facet name="fallBack">
<embed player.swf ....>.....</embed>
<!-- SOME FALLBACK MECHANISM TO PLAY THE FILE (FLASH may be). or alerting the user about HTML5 video support. -->
</f:facet>
</hx:video>
|
| Code Block | ||||
|---|---|---|---|---|
| ||||
<video src="someAddress/someFile.mkv" preload="metadata" autoplay="true" loop="true" controls="true" poster="somePosterImage.jpg" width="600px" height="300px"> <embed player.swf ....>.....</embed> </video> |
| Code Block | ||||
|---|---|---|---|---|
| ||||
<hx:video preload="none"
autoplay="false" loop="false" showControls="false"
poster="#{videoBean.posterImage}">
<f:facet name="fallBack">
Your browser does not support HTML5 video.
</f:facet>
<fx:mediaSource src="http://someaddress/someFile.ogg" contentType="video/ogg" codecs="avc1.42E01E" media="screen and (device-width: 800px)">
<fx:mediaSource src="http://someaddress/some3DFile.ogg" media="3d-glasses">
<!-- <fx:mediaSources> component, not <fx:mediaSource> -->
<fx:mediaSources items="#{someBean.mediaInfoList}">
</hx:video>
|
| Code Block | ||||
|---|---|---|---|---|
| ||||
<video preload="none" poster="somePosterImage.jpg" controls="false" autoplay="false"> Your browser does not support HTML5 video. <source src='http://someaddress/someFile.ogg' Type='video/ogg; codecs="avc1.42E01E"' media="screen and (device-width: 800px)" /> <source src='someAddress/some3Dfile.ogg' media="3d-glasses"/> <!-- elements below are generated with fx:mediaSources> --> <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="screen"> <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"' media="3d-glasses"> <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'> <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'> <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'> </video> |
Overview
Content Tools