THIS IS A TEST INSTANCE. ALL YOUR CHANGES WILL BE LOST!!!!
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 | 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:
- <hx<fx:mediaSource>
- <hx<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.
...
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. |
...
- 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:
...
| 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 | ||||
|---|---|---|---|---|
| ||||
<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>
<hx<fx:mediaSource src="http://someaddress/someFile.ogg" contentType="video/ogg" codecs="avc1.42E01E" media="screen and (device-width: 800px)">
<hx<fx:mediaSource src="http://someaddress/some3DFile.ogg" media="3d-glasses">
<!-- <hx<fx:mediaSources> component, not <hx<fx:mediaSource> -->
<hx<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 <hxfx: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
Apps