JavaScript API

If you want to use simplified API for video players (currently Vimeo and Youtube are supported) you need to embed jquery.video.js plugin and API for Vimeo and Youtuber. You can do this by yourself or simply set EnableClientSideApis="true" IncludeVideoPluginScript="true". Video control will embed only needed scripts.

Usage is really simply. You can play or stop video using methods showed below:

   $("#elementId").video('play');
   $("#elementId").video('stop');


!! Example usage

<%@ Register TagPrefix="ow" Namespace="OpenWaves.Video.Web.Controls" Assembly="OpenWaves.Video" %>

***

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
        $(function () {

            $("#vimeo_start").click(function () {
                $("#<%= VimeoControl.ClientID %>").video('play');
                return false;
            });
            
            $("#vimeo_stop").click(function () {
                $("#<%= VimeoControl.ClientID %>").video('stop');
                return false;
            });

            $("#yt_start").click(function () {
                $("#<%= VideoControl1.ClientID %>").video('play');
                $("#<%= VideoControl2.ClientID %>").video('play');
                return false;
            });

            $("#yt_stop").click(function () {
                $("#<%= VideoControl1.ClientID %>").video('stop');
                $("#<%= VideoControl2.ClientID %>").video('stop');
                return false;
            });
        });
    </script>  

**


<ow:Video ID="VimeoControl" VideoUrl="https://vimeo.com/7100569" Width="500" Height="300" runat="server" CssClass="videoClass" EnableClientSideApis="true"/>
    <a href="#" id="vimeo_start">Start</a> | <a href="#" id="vimeo_stop">stop</a>
        <br />
        <br />
    <ow:Video ID="VideoControl1" VideoUrl="http://www.youtube.com/watch?v=XhUC34G04Ts" Width="500" Height="300" runat="server" CssClass="videoClass" EnableClientSideApis="true" IncludeVideoPluginScript="true"/>
    <a href="#" id="yt_start">Start</a> | <a href="#" id="yt_stop">stop</a>

Last edited Feb 18, 2013 at 10:17 AM by radzio, version 2

Comments

No comments yet.