Difference between revisions of "Video/Audio Plugin"

From MSX - Wiki
Jump to navigation Jump to search
Line 21: Line 21:
 
             }       
 
             }       
 
         </style>
 
         </style>
 +
    </head>
 +
    <body>
 +
        <h1>My Video/Audio Plugin</h1>
 +
    </body>
 +
</html>
 +
</syntaxhighlight>
 +
 +
== Video/Audio Plugin Interactions ==
 +
A video/audio plugin will not receive any input (i.e. it is not possible to handle key, mouse, or touch events). Therefore, you should not implement any controls or buttons, because they can not be controlled anyway. The only task of a video/audio plugin is to show/play the video/audio output. All interactions (e.g. to set/get the current position, to set/get the playback speed, etc.) are managed by the <code>TVXVideoPlugin</code> interface. Add the JavaScript file http://msx.benzac.de/js/tvx-plugin.min.js to your HTML page to make this interface available. Additionally, add some JavaScript lines to interact with this interface. Please see following example screenshot & code.
 +
 +
[[File:my_plugin2.png|thumb|640px|none|Example Screenshot (My Video/Audio Plugin 2/2)]]
 +
 +
<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html>
 +
    <head>
 +
        <title>My Video/Audio Plugin</title>
 +
        <style type="text/css">         
 +
            h1 {
 +
                font-family: sans-serif;
 +
                color: white;
 +
            }     
 +
        </style>
 +
        <script type="text/javascript" src="http://msx.benzac.de/js/tvx-plugin.min.js"></script>
 +
        <script type="text/javascript">
 +
            function MyPlayer() {
 +
                this.init = function() {
 +
                    //Init player
 +
                };
 +
                this.ready = function() {
 +
                    //Player is ready
 +
                    TVXVideoPlugin.startPlayback();//This will call the play function and will start the update process
 +
                };
 +
                this.play = function() {
 +
                    //Play
 +
                };
 +
                this.pause = function() {
 +
                    //Pause
 +
                };
 +
                this.stop = function() {
 +
                    //Stop
 +
                };
 +
                this.getDuration = function() {
 +
                    //Get duration in seconds
 +
                    return 60;
 +
                };
 +
                this.getPosition = function() {
 +
                    //Get position in seconds
 +
                    return 0;
 +
                };
 +
                this.setPosition = function(position) {
 +
                    //Set position in seconds
 +
                    if (position == 60) {
 +
                        TVXVideoPlugin.stopPlayback();//Generally, this will unload the iframe
 +
                    }
 +
                };
 +
                this.setVolume = function(volume) {
 +
                    //Set volume (0 .. 100)
 +
                };
 +
                this.getVolume = function() {
 +
                    //Get volume (0 .. 100)
 +
                    return 100;
 +
                };
 +
                this.setMuted = function(muted) {
 +
                    //Set muted
 +
                };
 +
                this.isMuted = function() {
 +
                    //Get muted
 +
                    return false;
 +
                };
 +
                this.getSpeed = function() {
 +
                    //Get speed (0.125 .. 8.0)
 +
                    return 1;
 +
                };
 +
                this.setSpeed = function(speed) {
 +
                    //Set speed (0.125 .. 8.0)
 +
                };
 +
                this.getUpdateData = function() {
 +
                    //Get update data (this will be called each second)
 +
                    return {
 +
                        position: this.getPosition(),
 +
                        duration: this.getDuration(),
 +
                        speed: this.getSpeed()
 +
                    };
 +
                };
 +
            }
 +
            window.onload = function() {
 +
                TVXVideoPlugin.setupPlayer(new MyPlayer());
 +
                TVXVideoPlugin.init();
 +
            };
 +
        </script>
 
     </head>
 
     </head>
 
     <body>
 
     <body>

Revision as of 15:58, 14 January 2021

This is a small plugin guide to create your own video/audio plugin. It is designed for developers who have web programming skills (e.g. HTML, JavaScript, CSS, etc.). By the way, from the technical point of view, there are no differences between a video plugin and an audio plugin. You can load a video plugin as an audio plugin and vice versa. Therefore, there is only one API for both.

Note: For basic video/audio plugins, version 0.1.40 or higher is needed. For full-featured video/audio plugins, version 0.1.74 or higher is needed.

Video/Audio Plugin Basics[edit]

A video/audio plugin is nothing more than a simple HTML page that is loaded into an iframe. You do not even need to add any JavaScript or CSS file. Therefore, any HTML page can be loaded as a video/audio plugin (at least if the page does not refuse it via the X-Frame-Options HTTP header). Please see following example screenshot & code.

Note: The background color of the iframe is black.

Example Screenshot (My Video/Audio Plugin 1/2)
<!DOCTYPE html>
<html>
    <head>
        <title>My Video/Audio Plugin</title>
        <style type="text/css">           
            h1 {
                font-family: sans-serif;
                color: white;
            }      
        </style>
    </head>
    <body>
        <h1>My Video/Audio Plugin</h1>
    </body>
</html>

Video/Audio Plugin Interactions[edit]

A video/audio plugin will not receive any input (i.e. it is not possible to handle key, mouse, or touch events). Therefore, you should not implement any controls or buttons, because they can not be controlled anyway. The only task of a video/audio plugin is to show/play the video/audio output. All interactions (e.g. to set/get the current position, to set/get the playback speed, etc.) are managed by the TVXVideoPlugin interface. Add the JavaScript file http://msx.benzac.de/js/tvx-plugin.min.js to your HTML page to make this interface available. Additionally, add some JavaScript lines to interact with this interface. Please see following example screenshot & code.

Example Screenshot (My Video/Audio Plugin 2/2)
<!DOCTYPE html>
<html>
    <head>
        <title>My Video/Audio Plugin</title>
        <style type="text/css">           
            h1 {
                font-family: sans-serif;
                color: white;
            }      
        </style>
        <script type="text/javascript" src="http://msx.benzac.de/js/tvx-plugin.min.js"></script>
        <script type="text/javascript">
            function MyPlayer() {
                this.init = function() {
                    //Init player
                };
                this.ready = function() {
                    //Player is ready
                    TVXVideoPlugin.startPlayback();//This will call the play function and will start the update process
                };
                this.play = function() {
                    //Play
                };
                this.pause = function() {
                    //Pause
                };
                this.stop = function() {
                    //Stop
                };
                this.getDuration = function() {
                    //Get duration in seconds
                    return 60;
                };
                this.getPosition = function() {
                    //Get position in seconds
                    return 0;
                };
                this.setPosition = function(position) {
                    //Set position in seconds
                    if (position == 60) {
                        TVXVideoPlugin.stopPlayback();//Generally, this will unload the iframe
                    }
                };
                this.setVolume = function(volume) {
                    //Set volume (0 .. 100)
                };
                this.getVolume = function() {
                    //Get volume (0 .. 100)
                    return 100;
                };
                this.setMuted = function(muted) {
                    //Set muted
                };
                this.isMuted = function() {
                    //Get muted
                    return false;
                };
                this.getSpeed = function() {
                    //Get speed (0.125 .. 8.0)
                    return 1;
                };
                this.setSpeed = function(speed) {
                    //Set speed (0.125 .. 8.0)
                };
                this.getUpdateData = function() {
                    //Get update data (this will be called each second)
                    return {
                        position: this.getPosition(),
                        duration: this.getDuration(),
                        speed: this.getSpeed()
                    };
                };
            }
            window.onload = function() {
                TVXVideoPlugin.setupPlayer(new MyPlayer());
                TVXVideoPlugin.init();
            };
        </script>
    </head>
    <body>
        <h1>My Video/Audio Plugin</h1>
    </body>
</html>
Retrieved from "https://msx.benzac.de/wiki/index.php?title=Video/Audio_Plugin&oldid=452"