You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@myfaces.apache.org by Ali Ok <al...@aliok.com.tr> on 2010/05/19 22:30:56 UTC
[GSOC-HTML5] Prototype , ,
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
Re: [GSOC-HTML5] Prototype , ,
Posted by Ali Ok <al...@aliok.com.tr>.
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 <ma...@apache.org>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 <al...@aliok.com.tr> 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 <ma...@apache.org>
> > wrote:
> >>
> >> On Wed, May 26, 2010 at 2:38 PM, Ali Ok <al...@aliok.com.tr> 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 <
> matzew@apache.org>
> >> > 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 <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
> >> >
> >> >
> >> >
> >> > --
> >> > 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
Re: [GSOC-HTML5] Prototype , ,
Posted by Matthias Wessendorf <ma...@apache.org>.
+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 <al...@aliok.com.tr> 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 <ma...@apache.org>
> wrote:
>>
>> On Wed, May 26, 2010 at 2:38 PM, Ali Ok <al...@aliok.com.tr> 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 <ma...@apache.org>
>> > 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 <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
>> >
>> >
>> >
>> > --
>> > 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
Re: [GSOC-HTML5] Prototype , ,
Posted by Ali Ok <al...@aliok.com.tr>.
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 <ma...@apache.org>wrote:
> On Wed, May 26, 2010 at 2:38 PM, Ali Ok <al...@aliok.com.tr> 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 <ma...@apache.org>
> > 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 <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
> >
> >
> >
> > --
> > 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
Re: [GSOC-HTML5] Prototype , ,
Posted by Matthias Wessendorf <ma...@apache.org>.
On Wed, May 26, 2010 at 2:38 PM, Ali Ok <al...@aliok.com.tr> 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
> "loadAlternatePlayerAction" 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 <ma...@apache.org>
> 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 <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
>
>
>
> --
> 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
Re: [GSOC-HTML5] Prototype , ,
Posted by Ali Ok <al...@aliok.com.tr>.
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
"loadAlternatePlayerAction" which can have the JS activation code for some
flash video player?
Or do you mean automatic fallback to flash video player? 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 <ma...@apache.org>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 <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
>
--
My Blog: http://blog.aliok.com.tr
Twitter: http://twitter.com/aliok_tr
Re: [GSOC-HTML5] Prototype , ,
Posted by Matthias Wessendorf <ma...@apache.org>.
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