Demo
Some functions for test (Only for first player):- URL:
- Max latency(ms):
- Aspect Ratio:
- Attribute display:
- Attribute visibility:
- Autoreconnect:
- Run-Time creation players:
- Change Digital Zoom (Ratio, X, Y):
Ratio[100..500] = X = Y =
Examples
.Support
Visit the Video Experts Group' Media Player Plug-in page for support .Download
vxgplayer-1.8.23.zipPlease note that you have to place the unzipped package on a Web Server. For testing it locally on your PC you have to run a Web Server on your local PC. We recommend to use a single binary Web Server like Mongoose for testing. Just copy the Web Server binary into the unzipped package folder and run it.
.API
HTML
Include css + js
<head> ... <script type="text/javascript" src="vxgplayer-1.8.23.min.js"></script> <link href="vxgplayer-1.8.23.min.css" rel="stylesheet"/> ... </head>
Div element for player
<div class="vxgplayer" id="vxg_media_player1" width="640" height="480" url="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov" nmf-src="pnacl/Release/media_player.nmf" nmf-path="media_player.nmf" useragent-prefix="MMP/3.0" latency="10000" autohide="2" volume="0.7" avsync controls mute aspect-ratio aspect-ratio-mode="1" auto-reconnect connection-timeout="5000" connection-udp="0" custom-digital-zoom></div>
Attributes:
- id - unique id of player
- class must be 'vxgplayer' - for automatically init all players after load body
- width - width of player, integer
- height - height of player, integer
- url - link to rtsp video
- nmf-src - link to plugin, default value: 'pnacl/Release/media_player.nmf'
- nmf-path - link to plugin, default value: 'media_player.nmf'
- latency - latency, integer
- autohide - autohide panel of the controls after, seconds
- volume - volume, float, Possible values: 0..1
- avsync - If attribute exists then avsync true. If attribute does not exist then avsync false
- controls - Panel with controls. If attribute exists then show controls. If attribute does not exist then hide controls
- debug - Debug mode. If attribute exists then you will see a lot of messages in js console. If attribute does not exist, it will be silent
- mute - Mute audio. If attribute exists then mute. If attribute does not exist then no mute
- useragent-prefix - Set prefix for user agency
- aspect-ratio - If attributes aspect-ratio or aspect-ratio-mode exist then aspectRatio true
- aspect-ratio-mode - 1:Fit-to-Screen(default); 2:Crop; 0:Off. If attribute exists then aspectRatio true
- auto-reconnect - If attribute auto-reconnect exists then the player will be auto reconnected on any error
- connection-timeout - set connection timeout value in milliseconds
- connection-udp - allow UDP connection (by default is off), 0:Off, 1:On
- custom-digital-zoom - if this option exists then digital zoom in control disabled and it is allowing method "setCustomDigitalZoom"
JavaScript Examples
Dynamically create players with options
Put element to your page:
<div id="dynamicallyPlayers"></div>
And below function will create the players inside element 'dynamicallyPlayers'
function createPlayer(){ indexPlayer++; var playerId = 'vxg_media_player' + indexPlayer; var div = document.createElement('div'); div.setAttribute("id", playerId); div.setAttribute("class", "vxgplayer"); var runtimePlayers = document.getElementById('dynamicallyPlayers'); runtimePlayers.appendChild(div); vxgplayer(playerId, { url: '', nmf_path: 'media_player.nmf', nmf_src: 'pnacl/Release/media_player.nmf', latency: 300000, aspect_ratio_mode: 1, autohide: 3, controls: true, connection_timeout: 5000, connection_udp: 0, custom_digital_zoom: false }).ready(function(){ console.log(' =>ready player '+playerId); vxgplayer(playerId).src('rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov'); vxgplayer(playerId).play(); console.log(' <=ready player '+playerId); }); }
Init player and/or find player
var player = vxgplayer('vxg_media_player1'); // where 'vxg_media_player1' - unique id element in document
Play / isPlaying
vxgplayer('vxg_media_player1').play(); // play vxgplayer('vxg_media_player1').isPlaying() // get play true of false // or var player = vxgplayer('vxg_media_player1'); player.play() player.isPlaying() // get play true of false
Pause
vxgplayer('vxg_media_player1').pause(); // or var player = vxgplayer('vxg_media_player1'); player.pause()
Stop
vxgplayer('vxg_media_player1').stop(); // or var player = vxgplayer('vxg_media_player1'); player.stop()
Autohide
An autohide value of zero means the component should never be set invisible.
vxgplayer('vxg_media_player1').autohide(2); // set 2 seconds vxgplayer('vxg_media_player1').autohide(); // get autohide value // or var player = vxgplayer('vxg_media_player1'); player.autohide(2); // set 2 seconds player.autohide(); // get autohide value
Aspect Ratio
vxgplayer('vxg_media_player1').aspectRatio(true); // set aspect ration to true vxgplayer('vxg_media_player1').aspectRatio(); // get aspect ration value // or var player = vxgplayer('vxg_media_player1'); player.aspectRatioMode(2); // set aspect ration to true. Mode: Crop player.aspectRatioMode(); // get aspect ratio mode value
Auto reconnect
vxgplayer('vxg_media_player1').autoreconnect(1); // set auto-reconnect on vxgplayer('vxg_media_player1').autoreconnect(); // get autoreconnect value
Volume
Possible value of volume: 0..1
// possible value of volume: from 0 to 1 // example vxgplayer('vxg_media_player1').volume(0.8); // set volume var vol = vxgplayer('vxg_media_player1').volume(); // get volume // or var player = vxgplayer('vxg_media_player1'); player.volume(0.8); // set volume var vol = player.volume(); // get volume
Size
Set new size of player
vxgplayer('vxg_media_player1').size(1280, 720); // set size var size = vxgplayer('vxg_media_player1').size(); // get size console.log('Player width: ' + size.width); console.log('Player height: ' + size.height); // or var player = vxgplayer('vxg_media_player1'); player.size(1280, 720); // set size var size2 = player.size(); // get size console.log('Player width: ' + size2.width); console.log('Player height: ' + size2.height);
Latency
vxgplayer('vxg_media_player1').latency(10000); // set latency console.log(vxgplayer('vxg_media_player1').latency()); // get latency // or var player = vxgplayer('vxg_media_player1'); player.latency(10000); // set latency var ltnc = player.latency(); // get latency
Connection Timeout (ms)
vxgplayer('vxg_media_player1').connection_timeout(5000); // set connection_timeout 5 seconds console.log(vxgplayer('vxg_media_player1').connection_timeout()); // get connection_timeout
Allow UDP connection
vxgplayer('vxg_media_player1').connection_udp(1); // allow UDP connection vxgplayer('vxg_media_player1').connection_udp(0); // deny UDP connection
Custom Digital Zoom
vxgplayer('vxg_media_player1').custom_digital_zoom(); // will be return true or false vxgplayer('vxg_media_player1').custom_digital_zoom(true); // enable custom digital zoom vxgplayer('vxg_media_player1').custom_digital_zoom(false); // disable custom digital zoom If you change value custom_digital_zoom then player will be reset zoom.
Change Custom Digital Zoom
This method will available only if
custom_digital_zoom()
is truevxgplayer('vxg_media_player1').custom_digital_zoom(true); // enable custom digital zoom var ratio = 100; // 100..500 var x = 0; // position in pixels var y = 0; // position in pixels vxgplayer('vxg_media_player1').setCustomDigitalZoom(ratio, x, y); // set new custom digital zoom
Source / URL
vxgplayer('vxg_media_player1').src('rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov'); // set src var src = vxgplayer('vxg_media_player1').src(); // get src // or var player = vxgplayer('vxg_media_player1'); player.src('rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov'); // set src var src = player.src(); // get src
Error
This method returned last error code or -1 if has not error.
// NO_ERROR == -1 // MEDIA_ERR_URL == 0 // MEDIA_ERR_NETWORK == 1 // MEDIA_ERR_SOURCE == 2 // MEDIA_ERR_CARRIER == 3 // MEDIA_ERR_AUDIO == 4 // MEDIA_ERR_VIDEO == 5 // MEDIA_ERR_AUTHENTICATION == 6 // MEDIA_ERR_BANDWIDTH == 7 // MEDIA_ERR_EOF == 8 var err; err = vxgplayer('vxg_media_player1').error(); // get error code // or var player = vxgplayer('vxg_media_player1'); var err = player.error(); // get error code // example of handling by code error switch (err) { case 0: // MEDIA_ERR_URL break case 1: // MEDIA_ERR_NETWORK break case 2: // MEDIA_ERR_SOURCE break case 3: // MEDIA_ERR_CARRIER break case 4: // MEDIA_ERR_AUDIO break case 5: // MEDIA_ERR_VIDEO break case 6: // MEDIA_ERR_AUTHENTICATION break case 7: // MEDIA_ERR_BANDWIDTH break case 8: // MEDIA_ERR_EOF break default: // no error }
Show/Hide Custom Error
vxgplayer('vxg_media_player1').showerror('some error'); // show error overlay vxgplayer('vxg_media_player1').hideerror(); // hide error overlay // or var player = vxgplayer('vxg_media_player1'); player.showerror('some error'); // show error overlay player.hideerror(); // hide error overlay
Controls
var ctrls; vxgplayer('vxg_media_player1').controls(true); // set controls to true ctrls = vxgplayer('vxg_media_player1').controls(); // get controls (return boolean value) // or var player = vxgplayer('vxg_media_player1'); player.controls(true); // set controls to true ctrls = player.controls(); // get controls (return boolean value)
Debug
var dbg; vxgplayer('vxg_media_player1').debug(true); // set debug mode dbg = vxgplayer('vxg_media_player1').debug(); // get debug mode // or var player = vxgplayer('vxg_media_player1'); player.debug(true); // set debug mode dbg = player.debug(); // get debug mode
Mute / isMute
Toggle method. And Getter
var mute; vxgplayer('vxg_media_player1').mute(); // toggle mute false -> true and true -> false mute = vxgplayer('vxg_media_player1').isMute(); // getter // or var player = vxgplayer('vxg_media_player1'); player.mute(); // toggle mute false -> true and true -> false mute = player.isMute(); // get state of mute
Ready State
// possible values of readyState: // 0 - PLAYER_STOPPED // 1 - PLAYER_CONNECTING // 2 - PLAYER_PLAYING // 3 - PLAYER_STOPPING var rs; rs = vxgplayer('vxg_media_player1').readyState(); // or var player = vxgplayer('vxg_media_player1'); rs = player.readyState(); // example of handling by code error switch (rs) { case 0: // PLAYER_STOPPED break case 1: // PLAYER_CONNECTING break case 2: // PLAYER_PLAYING break case 3: // PLAYER_STOPPING break default: // no ready }
Version
var player = vxgplayer('listener2'); player.versionPLG(); //version of chrome plugin player.versionAPP(); //version of VXG Media Player app
Callback onReadyStateChange
vxgplayer('vxg_media_player1').onReadyStateChange(function(onreadyState){ console.log("player LOADED: versionPLG=" + vxgplayer('vxg_media_player1').versionPLG()+" versionAPP="+vxgplayer('vxg_media_player1').versionAPP()); }); // or var player = vxgplayer('listener2'); player.onReadyStateChange(function(state){ console.log("player LOADED: versionPLG=" + player.versionPLG()+" versionAPP="+player.versionAPP()); });
Callback onStateChange
vxgplayer('vxg_media_player1').onStateChange(function(readyState){ console.log("NEW READY STATE: " + readyState); }); // or var player = vxgplayer('listener2'); player.onStateChange(function(state){ console.log("NEW READY STATE: " + readyState); });
Callback onError
vxgplayer('vxg_media_player1').onError(function(player){ console.log(player.error()); }); // or var player = vxgplayer('vxg_media_player1'); player.onError(function(player){ console.log(player.error()); });
Callback onBandwidthError
// Behaviour: // 1. If exists handler onBandwidthError then call it. // 2. If not exists then show error('Problem with bandwidth') vxgplayer('vxg_media_player1').onBandwidthError(function(player){ console.log(player.error()); }); // or var player = vxgplayer('vxg_media_player1'); player.onBandwidthError(function(player){ console.log(player.error()); });