Skip to content

Display-format.md

Latest commit

 

History

History
191 lines (153 loc) · 5.61 KB

Display-format.md

File metadata and controls

191 lines (153 loc) · 5.61 KB
layout post
title Display format with MediaPlayer
description To get start with MediaPlayer by adding references.
platform js
control MediaPlayer
documentation ug
api /api/js/ejmediaplayer

Render Mode

There are three rendering layouts in Media Player such as Basic, Advanced and Mobile. You can get the available render modes in ej.MediaPlayer.RenderMode Object as follows.

{% highlight html %}

ej.MediaPlayer.RenderMode = { Basic: "basic", Advanced: "advanced", Mobile: "mobile" };

{% endhighlight %}

Basic Mode

Render mode is Basic by default in Media Player. It has the simple layout with necessary controls in the toolbar.

{% highlight html %}

<!doctype html>

<title>Essential Studio for JavaScript : Media Player - Default Functionalities</title> 
 <script type="text/javascript">
    jQuery(function ($) {
        if (!(ej.browserInfo().name === "msie" && Number(ej.browserInfo().version) < 9))        {
   <!--Media Player rendering-->
            $("#basicPlayer").ejMediaPlayer({
                width: "700px",
                height: "400px",
                renderMode: ej.MediaPlayer.RenderMode.Basic,
                source: [
                    {
                        "url":"http://files2.syncfusion.com/Videos/samples/Syncfusion+Dashboard+SDK +and+Mobile+Application.mp4",
                        "title": "Internet of things",
                        "author": "Syncfusion"
                    }
                ]
            });
        }
        else {
            alert("Media Player (HTML5) will not be supported in IE Version < 9");
        }
    });
 </script>
</body>

{% endhighlight %}

Execute the above code to render the following output.

Advanced Mode

Advanced mode has the complete layout with all the controls in the toolbar.

{% highlight html %}

<!doctype html>

<title>Essential Studio for JavaScript : Media Player </title> 
 <script type="text/javascript">
    jQuery(function ($) {
        if (!(ej.browserInfo().name === "msie" && Number(ej.browserInfo().version) < 9))        {
   <!--Media Player rendering-->
            $("#basicPlayer").ejMediaPlayer({
                width: "700px",
                height: "400px",
                renderMode: ej.MediaPlayer.RenderMode.Advanced,
                source: [
                     {
                        "url":"http://files2.syncfusion.com/Videos/samples/Syncfusion+Dashboard+SDK +and+Mobile+Application.mp4",
                        "title": "Internet of things",
                        "author": "Syncfusion"
                    }
                ]
            });
        }
        else {
            alert("Media Player (HTML5) will not be supported in IE Version < 9");
        }
    });
 </script>
</body>

{% endhighlight %}

Execute the above code to render the following output.

Mobile Mode

Mobile mode has the simple layout especially designed for small size devices.

{% highlight html %}

<!doctype html>

<title>Essential Studio for JavaScript : Media Player </title> 
 <script type="text/javascript">
    jQuery(function ($) {
        if (!(ej.browserInfo().name === "msie" && Number(ej.browserInfo().version) < 9))        {
   <!--Media Player rendering-->
            $("#basicPlayer").ejMediaPlayer({
                width: "700px",
                height: "400px",
                renderMode: ej.MediaPlayer.RenderMode.Mobile,
                source: [
                     {
                       "url":"http://files2.syncfusion.com/Videos/samples/Syncfusion+Dashboard+SDK +and+Mobile+Application.mp4",
                        "title": "Internet of things",
                        "author": "Syncfusion"
                    }
                ]
            });
        }
        else {
            alert("Media Player (HTML5) will not be supported in IE Version < 9");
        }
    });
 </script>
</body>

{% endhighlight %}

Execute the above code to render the following output.