Hi Ali, looks good so far.
One quick comment: -<hx:video> => fallBack: does it need to be a facet ? What about "alternatePlayer" and warning (or alert) ? -Matthias On Wed, May 19, 2010 at 10:30 PM, Ali Ok <al...@aliok.com.tr> wrote: > 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 > > -- Matthias Wessendorf blog: http://matthiaswessendorf.wordpress.com/ sessions: http://www.slideshare.net/mwessendorf twitter: http://twitter.com/mwessendorf
