Play mp4 video in zk .

Here is a complete sample of a ZUL page playing an MP4 video. The video is controlled from ZK ViewModel methods. It is using the jPlayer - a well known jquery media player.

The ZUL page:

<?page title="Media Player" contentType="text/html;charset=UTF-8"?>
<zk>
<style src="/skin/blue.monday/jplayer.blue.monday.css" ></style>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript"><![CDATA[

zk.afterMount(function() {

     $('$jquery_jplayer_1').jPlayer({
         ready: function() {
            $(this).jPlayer("setMedia", {
                title: "Trailer",
                m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
                ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
                poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
            });
        },
        swfPath: "/js",
        supplied: "m4v, ogv"
     });
});
function play() {
    $('$jquery_jplayer_1').jPlayer("play");
}
function pause() {
    $('$jquery_jplayer_1').jPlayer("pause");
}
function stop() {
    $('$jquery_jplayer_1').jPlayer("stop");
}
]]></script>
<window title="Media Player" border="normal" xmlns:n="native"
        apply="org.zkoss.bind.BindComposer" 
        viewModel="@id('vm') @init('vm.MediaPlayerVM')"> 

<hlayout>
    <div id="jp_container_1" class="jp-video ">
        <div class="jp-type-single">
          <div id="jquery_jplayer_1" class="jp-jplayer"></div>
        </div>
    </div>

    <vlayout>
        <button label="Play" onClick="@command('play')" width="150px" />
        <button label="Pause" onClick="@command('pause')" width="150px" />
        <button label="Stop" onClick="@command('stop')" width="150px" />
    </vlayout>
</hlayout>
</window>
</zk>

View model:

package vm;
import org.zkoss.bind.annotation.Command;
import org.zkoss.zk.ui.util.Clients;
public class MediaPlayerVM {

    @Command
    public void play() {
        Clients.evalJavaScript("play()");
    }
    @Command
    public void pause() {
        Clients.evalJavaScript("pause()");
    }
    @Command
    public void stop() {
        Clients.evalJavaScript("stop()");
    }
}