<!DOCTYPE html>
<html>
<head>
<title>Media Player PNaCl</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta name="author" content="videoexpertsgroup" />
<meta name="copyright" lang="ru" content="videoexpertsgroup" />
<meta name="description" content="Demo VXG Media Player for Chrome" />
<meta name="keywords" content=""/>
<!-- vxgplayer -->
<script type="text/javascript" src="vxgplayer-1.8.51.min.js"></script>
<link href="vxgplayer-1.8.51.min.css" rel="stylesheet"/>
<!-- demo page -->
<link href="https://www.videoexpertsgroup.com/nacl_player_api/demo.min.css" rel="stylesheet"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link href="https://www.videoexpertsgroup.com/nacl_player_api/zenburn.min.css" rel="stylesheet">
<script src="https://www.videoexpertsgroup.com/nacl_player_api/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
var indexPlayer = 1;
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('runtimePlayers');
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,
avsync: true,
autoreconnect: 1
}).ready(function(){
console.log(' =>ready player '+playerId);
vxgplayer(playerId).src(document.getElementById('url_input').value);
vxgplayer(playerId).play();
console.log(' <=ready player '+playerId);
});
}
function removeLatestPlayer(){
if(indexPlayer > 1){
var playerId = 'vxg_media_player' + indexPlayer;
vxgplayer(playerId).dispose();
document.getElementById('vxg_media_player' + indexPlayer).remove();
indexPlayer--;
}
}
function customDigitalZoomOn(){
vxgplayer('vxg_media_player1').custom_digital_zoom(true);
digzoom_on.style.display = "none";
digzoom_off.style.display = "";
digzoom_params.style.display = "";
}
function customDigitalZoomOff(){
vxgplayer('vxg_media_player1').custom_digital_zoom(false);
digzoom_on.style.display = "";
digzoom_off.style.display = "none";
digzoom_params.style.display = "none";
}
function setCustomDigitalZoom(){
try{
vxgplayer('vxg_media_player1').setCustomDigitalZoom(parseInt(digzoom_ratio.value,10), parseInt(digzoom_x.value,10), parseInt(digzoom_y.value,10))
}catch(e){
alert(e);
}
}
function resetCustomDigitalZoom(){
vxgplayer('vxg_media_player1').setCustomDigitalZoom(100, 0, 0);
}
</script>
</head>
<body>
<div class="menu-fixed">
<div class="menu">
<div class="menu-left">
<a href="?">VXG Media Player (1.8.51)</a>
</div>
<div class="menu-right">
<a class="menu-item-right" href="#demo">Demo</a>
<a class="menu-item-right" href="#examples">Examples</a>
<a class="menu-item-right" href="#support">Support</a>
<a class="menu-item-right" href="#download">Download</a>
<a class="menu-item-right" href="#jsapi">API</a>
</div>
</div>
</div>
<div class="content-absolute">
<div class="content">
<a class="link-top" name="demo">.</a>
<h1>Demo</h1>
Some functions for test (Only for first player):
<ul>
<li>
URL:
<input id="url_input" type="text" size="60" value="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov">
<button onclick="vxgplayer('vxg_media_player1').src(document.getElementById('url_input').value);">Set</button>
</li>
<li>
Max latency(ms):
<input id="url_latency" type="number" size="5" value="300000">
<button onclick="vxgplayer('vxg_media_player1').latency(document.getElementById('url_latency').value);">Set</button>
</li>
<li>
Aspect Ratio:
<button onclick="vxgplayer('vxg_media_player1').aspectRatioMode(1);">Fit-to-Screen</button>
<button onclick="vxgplayer('vxg_media_player1').aspectRatioMode(2);">Crop</button>
<button onclick="vxgplayer('vxg_media_player1').aspectRatio(false);">Disable</button>
</li>
<li>
Attribute display:
<button onclick="document.getElementById('vxg_media_player1').style.display='none';">None</button>
<button onclick="document.getElementById('vxg_media_player1').style.display='inline-block';">Inline-block</button>
</li>
<li>
Attribute visibility:
<button onclick="document.getElementById('vxg_media_player1').style.visibility='hidden';">Hidden</button>
<button onclick="document.getElementById('vxg_media_player1').style.visibility='';">Empty</button>
</li>
<li>
Autoreconnect:
<button onclick="vxgplayer('vxg_media_player1').autoreconnect(1);">On</button>
<button onclick="vxgplayer('vxg_media_player1').autoreconnect(0);">Off</button>
</li>
<li>
AVSync:
<button onclick="vxgplayer('vxg_media_player1').avsync(true);">On</button>
<button onclick="vxgplayer('vxg_media_player1').avsync(false);">Off</button>
</li>
<li>Run-Time creation players:
<button onclick="createPlayer();">create new</button>
<button onclick="removeLatestPlayer();">remove latest</button>
</li>
<li>Change Digital Zoom (Ratio, X, Y):
<button id="digzoom_on" onclick="customDigitalZoomOn()">On</button>
<button id="digzoom_off" onclick="customDigitalZoomOff()" style="display: none;">Off</button>
<div id="digzoom_params" style="display: none;">
Ratio[100..500] = <input type="text" id="digzoom_ratio" size=3 value="300">
X = <input type="text" id="digzoom_x" size=5 value="426">
Y = <input type="text" id="digzoom_y" size=5 value="320">
<button onclick="setCustomDigitalZoom()">Set</button>
<button onclick="resetCustomDigitalZoom()">Reset</button>
<div>
</li>
</ul>
<div id="runtimePlayers">
<div id="vxg_media_player1" class="vxgplayer" url="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov" aspect-ratio latency="3000000" autostart controls avsync></div>
</div>
<a class="link-top" name="examples">.</a>
<h1>Examples</h1>
<ul>
<li><a href="iframeexample.html" target="_blank">Player in iframe example</a></li>
<li><a href="multiplayersexample.html" target="_blank">Multiplayers example</a></li>
<li><a href="angular2example-1.8.51.zip" target="_blank">Angular 2 Example</a></li>
</ul>
<a class="link-top" name="support">.</a>
<h1>Support</h1>
<a href="http://www.videoexpertsgroup.com/chrome-media-player-plug-in/" target="_blank">Visit the Video Experts Group' Media Player Plug-in page for support</a>
<a class="link-top" name="download">.</a>
<h1>Download</h1>
<a href="vxgplayer-1.8.51.zip" target="_blank">vxgplayer-1.8.51.zip</a>
<p>Please 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 <a target="_blank" href="https://www.cesanta.com/products#binary">Mongoose</a> for testing.
Just copy the Web Server binary into the unzipped package folder and run it.</p>
<a class="link-top" name="jsapi">.</a>
<h1>API</h1>
<h2>HTML</h2>
<h3>Include css + js</h3>
<pre><code><head>
...
<script type="text/javascript" src="vxgplayer-1.8.51.min.js"></script>
<link href="vxgplayer-1.8.51.min.css" rel="stylesheet"/>
...
</head>
</code></pre>
<h
vxgplayer-1.8.51.zip （9个子文件） 
vxgplayer-1.8.51.min.js 32KB
pnacl Release media_player.pexe 2.19MB media_player.nmf 205B
iframeexample.html 2KB vxgplayer-1.8.51.min.css 101KB index.html 22KB vxgplayer-1.8.51.js 49KB multiplayersexample.html 3KB favicon.ico 34KB资源评论
bestyellow2020-06-03现在连接时间超长，播放慢，多次连接易崩溃，快要放弃
