Hi all,
I've prepared some component prototypes, and your feedback is appreciated.
There are 20+ components and I want to send them to discuss here, one by
one; "to have a 'cleaner' separation of the discussion".
Also, IMHO, it is better to post prototypes inline.
*=============**=======**=======**====*
*==========<hx:video>============*
*===============================*
REFS:
[0] http://www.whatwg.org/specs/web-apps/current-work/#video
[1] https://developer.mozilla.org/En/HTML/Element/Video
EXTENDS:
May extend a abstract component with hx:audio.
specific ATTRIBUTES:
preload can be:
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 doesnt play it
showControls:
true: browser's media controls are shown (default)
false: controls are not shown unless page author provides one
explicitly
loop:
true or false (default)
poster:
image to show when not playing or seeking
width:
width of the video
height:
height of the video
FACETS:
fallBack:
content to display when HTML5 video is not supported. possible
actions
can be using a flash player as a fallback or displaying a
message that displays this is not supported.
NOTES:
see <hx:mediaSource> and <hx:mediaSources>
new <track> feature is not included, since there is no browser
support yet (impossible to test). this feature can be added
when a browser starts supporting it
<!-- ---------------------------------------usage
--------------------------------------------------- -->
<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 loop
controls poster="somePosterImage.jpg"
width="600px" height="300px">
<embed player.swf ....>.....</embed>
</video>
<!-- ---------------------------------------usage
--------------------------------------------------- -->
<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:mediaSource src="http://someaddress/someFile.ogg";
contentType="video/ogg" codecs="avc1.42E01E" media="screen and
(device-width: 800px)">
<hx:mediaSource src="http://someaddress/some3DFile.ogg";
media="3d-glasses">
<!-- <hx:mediaSources> component, not <hx:mediaSource> -->
<hx:mediaSources items="#{someBean.mediaInfoList}">
</hx:video>
<!-- expected HTML5 code for usage -->
<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 <hx: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>
*=======**=======**=======**==========*
*=======<hx:mediaSource>=========*
*===============================*
REFS:
[0]
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element
[1] https://developer.mozilla.org/En/HTML/Element/Source
EXTENDS:
--
specific ATTRIBUTES:
src:
URL of the source.
contentType:
MIME content type of the source (ie:video/ogg).
codecs:
Codecs of the source (ie:'avc1.64001E, mp4a.40.2').
media:
media attribute: just like the @media in CSS.
NOTES:
see <hx:mediaSources>, <hx:audio> and <hx:video>
<!-- -----------------------usage ---------------------------- -->
<hx:mediaSource src="http://someaddress/someFile.ogg";
contentType="video/ogg" codecs="avc1.42E01E" media="screen and
(device-width: 800px)"/>
<!-- expected HTML5 code for usage-->
<source src='http://someaddress/someFile.ogg' contentType="video/ogg"
codecs="avc1.42E01E" media="screen and (device-width: 800px)" />
<!-- -----------------------usage ---------------------------- -->
<hx:mediaSource src="http://someaddress/some3DFile.ogg";
media="3d-glasses" />
<!-- expected HTML5 code for usage-->
<source src='someAddress/some3Dfile.ogg' media="3d-glasses"/>
*=======**=======**=======**==========*
*=======<hx:mediaSources>========*
*===============================*
REFS:
[0]
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element
[1] https://developer.mozilla.org/En/HTML/Element/Source
EXTENDS:
--
specific ATTRIBUTES:
items:
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
mediaSource.xhtml (w/o 's' at the end)
NOTES:
see mediaSource.xhtml, audio.xhtml and video.xhtml
<!-- usage -->
<hx:mediaSources items="#{audioBean.someAudioFileInfos}"/>
<!-- expected HTML5 code-->
<source src='someAddress/somefile.ogg' type='video/ogg; codecs="flac"' />
<source src='http://someaddress/someFile.ogg' media="screen and
(device-width: 800px)" />
<source src='http://someaddress/someFile.ogg' media="3d-glasses"/>
Regards,
Ali
--
My Blog: http://blog.aliok.com.tr
Twitter: http://twitter.com/aliok_tr
