You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

<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', 'metadata'(default), 'auto'

none: do not preload the media from the server
metadata: fetch metadata (length, quality, etc.) (default)
auto: load the data from the server, even if user doesn't play it

showControls 

optional

true(default) or false.

true: browser's media controls are shown (default)
false: controls are not shown and page author needs one explicitly

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:

<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:

<fx:mediaSources>

Extends: UIComponent
Attributes:

Name

Required?

Values

Description

items

required

EL

binding of a collection which has elements of types having these methods:

  • public String getSrc()
  • public String getContentType()
  • public String getMedia()
  • public String getCodecs()
    (ie. Collection<org.apache.myfaces.html5.media.MediaSourceInfo>)
    'src', 'contentType', 'media' and 'codecs' are explained in <fx:mediaSource> above.
Notes:
  • This component can be a child of <hx:video> and <hx:audio>
References:

Usage of prototypes:

usage: no <fx:mediaSource>
<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>
expected HTML5 code
<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>



usage with <fx:mediaSource>
<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>
expected HTML5 code
<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>



  • No labels