myfaces-html5-demo/src/main/webapp/sections/media01.xhtml

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<ui:composition template="/sections/sectionTemplate.xhtml"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:hx="http://myfaces.apache.org/html5/html"
      xmlns:fx="http://myfaces.apache.org/html5/core"
      xmlns:sh="http://java.sun.com/jsf/composite/components/sh"
      xmlns:bs="http://java.sun.com/jsf/composite/components/browserSupport"
      xmlns:common="http://java.sun.com/jsf/composite/components/common">

<ui:define name="title">
  Media
</ui:define>

<ui:define name="browserSupport">
  <bs:browserSupport webkitSupport="true" operaSupport="true" mozillaSupport="true" ieSupport="false">
      <f:facet name="webkit">
          You will see a effect on hover and video will start to play.
      </f:facet>
      <f:facet name="ie">
          You will see a warning instead of the video in IE or anyother browser that does not support Html5 video.
      </f:facet>
  </bs:browserSupport>
</ui:define>

<ui:define name="viewChangeLinks">
    <common:viewChange singlePageName="media" slideId="media01" />
</ui:define>

<ui:define name="sectionContent">

              <h:outputScript target="head" id="videoScripts">
	             function play(){
                    document.getElementById('video02').play();
                 }
	             function pause(){
                    document.getElementById('video02').pause();
	             }
              </h:outputScript>

              <h:outputStylesheet target="head" id="videoStyles">
                 video {
                   z-index: 1000;
                 }
              </h:outputStylesheet>

              <h:outputStylesheet target="head" id="videoEffectStyles">
                 .styledVideo{
		               box-shadow: 5px 44px 28px #333;
		               -webkit-box-shadow: 5px 44px 28px #333;
		               -moz-box-shadow: 5px 44px 28px #333;

		               -webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 0%, 0% 74%, from(transparent), to(rgba(255, 255, 255, 0.25))) 0 0 0 0 stretch stretch;
		             }

              </h:outputStylesheet>

              <h:panelGrid columns="1">
                <h:panelGroup>
	                <h:outputText value="Mouse hover on video to play" />
                    <h:panelGrid columns="1">
	                    <hx:video id="video02" showControls="false" onmouseover="this.play();" onmouseout="this.pause();"
	                        autoplay="false" preload="none" poster="#{request.contextPath}/resources/video/mother_goose_thumbnail_small.png" width="200" height="150" >
                            <fx:effects event="mouseover" additionalStyleClassToActivate="styledVideo" duration="1s">
                                <fx:effectTransform translateX="100" translateY="30" scaleX="1.3" rotate="385deg" />
                            </fx:effects>


	                        <f:facet name="fallback">
	                          <p style="color: red;">No Html5 video support here!</p>
	                          <p>You can embed a Flash video in here.</p>
	                        </f:facet>

                            <fx:mediaSource src="#{request.contextPath}/resources/video/mother_goose_ogg_2.ogv" contentType="video/ogg" codec="theo, vorb"/>
                            <fx:mediaSource src="#{request.contextPath}/resources/video/mother_goose_h264_copy.mp4" contentType="video/mp4" codec="avc1, mp4a"/>
                        </hx:video>

	                    <h:panelGroup>
	                        <button onclick="play(); return false;">Play</button>
	                        <button onclick="pause(); return false;">Pause</button>
	                    </h:panelGroup>
	                </h:panelGrid>
	            </h:panelGroup>
	            <h:panelGroup id="media02Code">
	                <sh:sh><![CDATA[
<hx:video id="motherGooseVideo" showControls="false" poster="... mother_goose_thumbnail_small.png"
    onmouseover="this.play();" onmouseout="this.pause();">
    <fx:effects event="mouseover" additionalStyleClassToActivate="styledVideo" duration="1s">
        <fx:effectTransform translateX="100" translateY="30" scaleX="1.3" rotate="385deg" />
    </fx:effects>
    <fx:mediaSource src="... mother_goose_ogg.mp4" contentType="video/mp4" codec="avc1, mp4a"/>
</hx:video>
<button onclick="document.getElementById('motherGooseVideo').play();">Play</button>
<button onclick="document.getElementById('motherGooseVideo').pause();">Pause</button>
	                ]]></sh:sh>
	                <sh:sh lang="css"><![CDATA[
.styledVideo{
    box-shadow: 5px 44px 28px #333;
    box-reflect: below 1px -webkit-gradient
       (linear, 0% 0%, 0% 74%, from(transparent), to(rgba(255, 255, 255, 0.25)))
       0 0 0 0 stretch stretch;
}
	                ]]></sh:sh>
	            </h:panelGroup>
              </h:panelGrid>

</ui:define>
</ui:composition>