Here is the wiki: https://cwiki.apache.org/confluence/display/MYFACES/GSoC+Html5+Prototypes+video%2C+audio%2C+mediaSource+and+mediaSources
On Wed, Jun 2, 2010 at 9:47 AM, Matthias Wessendorf <[email protected]>wrote: > +1 on the facet > > -Matthias > > PS: can you add this to the wiki as well ? ;-) > > On Tue, Jun 1, 2010 at 9:11 PM, Ali Ok <[email protected]> wrote: > > Hi again, > > I couldn't settle the fallback stuff, so I want to discuss it again. > > I noticed that a fallback facet may be better. > > If HTML5 video[1] is not supported on a browser, it will ignore this > element > > and render its children: > > <video ....> > > <p>Your browser does not support Html5 video! This text is ignored on > > Html5 video enabled browsers and shown on not supported browsers.</p> > > </video> > > Respectively, Html5 video enabled browsers will ignore the children of > > <video> element (except <source>[2]). > > And this look like a good use-case of facets to me. > > If we limit fallback with two attributes, we will definitely restrict the > > users in coming up with their own solutions. With > > "actionOnNoHTML5VideoSupport" and "loadAlternatePlayerAction" > properties, > > we're forcing user to write Javascript for playing the alternate video > > player. > > Let's say, we wrote some javascript function to activate alternate video > > player: activateFlashPlayer() > > Using attributes, our JSF XHTML will be something like: > > <script> > > function activateFlashPlayer(){ > > // run flash video player (player.swf is down below) > > } > > </script> > > ... > > <hx:video loadAlternatePlayerAction="activateFlashPlayer()"> > > ... > > <embed player.swf ....>.....</embed> > > and, which may output an Html page like this: > > <script> > > function activateFlashPlayer(){ > > // run flash video player (player.swf below) > > } > > </script> > > ... > > <video ....> > > <script> > > activateFlashPlayer(); > > </script> > > </video> > > ... > > <embed player.swf ....>.....</embed> > > > > On the other hand, using a facet, we'll have a JSF xhtml page like: > > <hx:video> > > <f:facet name="falback"> > > <embed player.swf ....>.....</embed> > > </f:facet> > > </hx:video> > > which can output: > > <video ....> > > <embed player.swf ....>.....</embed> > > </video> > >> > >> <hx:video> > >> > >> => fallBack: does it need to be a facet ? > > > > A late answer, but that's why I think it needs to be a facet :) > > I don't like them much (find them not IDE-friendly), but what is the > > disadvantage of facet here? Why do you avoid using that? > > [1] > http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#video > > [2] > http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-source-element > > Thanks, > > Ali > > On Wed, May 26, 2010 at 3:42 PM, Matthias Wessendorf <[email protected]> > > wrote: > >> > >> On Wed, May 26, 2010 at 2:38 PM, Ali Ok <[email protected]> wrote: > >> > Hi Matthias, > >> > I couldn't quite understand what you've meant. > >> > Do you mean, (ignore the bad naming) > >> > * having property named something like "actionOnNoHTML5VideoSupport" : > >> > "useFallBack" | "alert" > >> > * and having another property named something like > >> > which can have the JS activation code for some > >> > flash video player? > >> > >> that's right > >> > >> > Or do you mean automatic fallback to flash video player? > >> nope :-) > >> > >> > I've done some > >> > research about this before and I couldn't found any ASL or compatible > >> > licensed flash video player to distrubute with the project (I haven't > >> > done > >> > too much research since this seems not practical to me). Assuming > there > >> > is > >> > one ASL-compatible flash video player somewhere, is it practical? > >> > Regards, > >> > Ali > >> > On Wed, May 26, 2010 at 3:10 PM, Matthias Wessendorf < > [email protected]> > >> > wrote: > >> >> > >> >> 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 <[email protected]> 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 > >> > > >> > > >> > > >> > -- > >> > 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 > > > > > > > > -- > > 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 > -- My Blog: http://blog.aliok.com.tr Twitter: http://twitter.com/aliok_tr
