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
