Overview of mediaplayer.js
Sample codes using mediaplayer.js
<html>
<body style="position: absolute;top:0; bottom:0;right:0;left:0;overflow:hidden;">
<div class="map-container">
<div id="video1" style="width:400px; height:300px"></div>
<div id="message" style="width:1280x; height:50px"></div>
<input type="text" id="StillImageFilePath" size="20"></input><button onclick="saveAsImage()">Capture</button><p>
<input type="text" id="VideoFilePath" size="20"></input><button onclick="startSaveAsVideo()">Start</button>
<button onclick="endSaveAsVideo()">END</button><p>
<b> FROM:</b><input type="text" id="from_time" size="20">
<b> TO:</b><input type="text" id="to_time" size="20">
<button onclick="doSeek()">SEEK</button>
<script type="text/javascript" src="http://atteam.w21.n3n.co.kr/public/mediaplayer/mediaplayer.js"></script>
<button onclick="doPlay()">PLAY</button>
<button onclick="doPause()">PAUSE</button>
<button onclick="doStop()">STOP</button><p>
<b> Speed:</b><input type="text" id="speed" size="20"> <button onclick="doSpeed()">Set Speed</button>
<button onclick="Live()">Change Live</button><button onclick="playback()">Change playback</button><p>
<b> play direction(0:front / 1:back):</b><input type="text" id="direction" size="20"><button onclick="direction()">direction</button><p>
<script type="text/javascript">
var mediaPlayer1;
document.addEventListener('DOMContentLoaded', function()
{
mediaPlayer1 = new N3N.WizeyeVideoPlayer();
mediaPlayer1.open("video1", "http://atteam.w21.n3n.co.kr", "PTZ_cskim", "1562111693283:455094"); //
mediaPlayer1.onEvent = function(json) {
var message = document.querySelector("#message");
message.innerHTML = JSON.stringify(json);
}
// you can input path the directories
var stillImageFilePath = "D:\\NVP_Test\\Cap\\c.jpg";
var videoFilePath = "D:\\NVP_Test\\Cap\\cv.avi";
document.querySelector("#StillImageFilePath").value = stillImageFilePath;
document.querySelector("#VideoFilePath").value = videoFilePath;
let now = parseInt((new Date()).getTime() / 1000);
from_time.value = now - 3600;
to_time.value = now - 60;
});
window.onunload = function() {
// close media player
if (mediaPlayer1) {
mediaPlayer1.close();
}
};
function saveAsImage() {
// snapshot, capture-image
mediaPlayer1.saveAsImage(document.querySelector("#StillImageFilePath").value);
}
function startSaveAsVideo() {
// start export video
mediaPlayer1.startSaveAsVideo(document.querySelector("#VideoFilePath").value);
}
function endSaveAsVideo() {
// stop(end) export video
mediaPlayer1.endSaveAsVideo();
}
function doSeek() {
// set start time and end time for playback
var _from = parseInt(from_time.value);
var _to = parseInt(to_time.value);
mediaPlayer1.seek(_from, _to);
}
function doPlay() {
// play video
mediaPlayer1.play();
}
function doPause() {
// pause video
mediaPlayer1.pause();
}
function doStop() {
// stop video
mediaPlayer1.stop();
}
function doSpeed() {
// set speed playback video
var Speed = document.getElementById("speed").value;
mediaPlayer1.setPlaybackSpeed(Speed);
}
function playback() {
// open playback mode
mediaPlayer1.open("video1", "http://atteam.w21.n3n.co.kr", "PTZ_cskim", "1562111693283:455094", true);
}
function Live() {
// open live mode
mediaPlayer1.open("video1", "http://atteam.w21.n3n.co.kr", "PTZ_cskim", "1562111693283:455094", false);
}
function direction() {
// set the playback direction.
// <direction values>
// 0 = Forward, 1 = Back
var direction = document.getElementById("direction").value;
mediaPlayer1.setPlaybackDirection(direction);
}
</script>
</div>
</body>
</html>