baidu-mct-video-compare
A Web Player for video quality compare
baidu
HomePage: https://cloud.baidu.com/product/mct.html
Features
Support side-by-side mode
Support single-step mode (split two videos)
Support frame capture
Use
Install by npm
# https://www.npmjs.com/package/baidu-mct-video-compare
npm i baidu-mct-video-compare
Import and use it
API
Create Player
single-step mode
/** * single-step-hori */ let player = VideoCompareModule.initPlayer({ type : "single-step-hori", containerId : "compare-player", width : "1000px", // or 1000px height : "auto" });
side-by-side mode
/** * single-step-hori */ let player = VideoCompareModule.initPlayer({ type : "side-by-side", containerId : "compare-player", width : "1000px", // or 1000px height : "auto", mode : "waterfall" // mode : "line" });
- Bind listener
- bind player's event listener
- onReady: get duration
player.onReady = (e) => { console.log(e); // todo };
- onTimeUpdate: get play timestamp
player.onTimeUpdate = (e) => { console.log("onTimeUpdate:" + e); // todo };
- onReady: get duration
- bind player's event listener
- Bind listener
play control
operations API
// play global.play = () => { player.play(); }; // pause global.pause = () => { player.pause(); }; // seek to 5sec global.seek5 = () => { player.seek(5); }; // capture frame, get canvas objects global.capture = () => { console.log(captureArea); captureArea.innerHTML = ""; let captureData = player.capture(); console.log("captureData:", captureData); captureData.forEach((item, i) => { captureArea.appendChild(item); }); };
- run Player
player.do([ "http://test-bucket.bj-bos-sandbox.baidu-int.com/1080p10s.mp4", "http://test-bucket.bj-bos-sandbox.baidu-int.com/1080p10s_9k.mp4" ]);
- run Player
Example Demo:
- Js
`
javascript import VideoCompareModule from '@baidu/baidu-mct-video-compare';
// let width = 0; // let height = 0; let duration = 0; let playProgress = document.querySelector("progress#play-progress"); let playPtsLabel = document.querySelector("span#play-pts"); let captureArea = document.querySelector("div#capture-area"); console.log("captureArea:", captureArea);
/**
- single-step-hori */ let player = newMCTWebComparePlayer({ type : "single-step-hori", containerId : "compare-player", width : "1000px", // or 1000px height : "auto" });
/**
- side by side */ // let player = newMCTWebComparePlayer({ // type : "side-by-side", // containerId : "compare-player", // width : "1000px", // or 1000px // height : "auto", // mode : "waterfall" // // mode : "line" // });
player.do([ "http://test-bucket.bj-bos-sandbox.baidu-int.com/1080p10s.mp4", "http://test-bucket.bj-bos-sandbox.baidu-int.com/1080p10s_9k.mp4" ]);
player.onReady = (e) => { console.log(e); duration = e.duration; playPtsLabel.textContent = "0 / " + e.duration; playProgress.max = e.duration; playProgress.addEventListener('click', (e) => { let x = e.pageX - playProgress.offsetLeft; // or e.offsetX (less support, though) let y = e.pageY - playProgress.offsetTop; // or e.offsetY let clickedValue = x * playProgress.max / playProgress.offsetWidth; player.seek(clickedValue); }); };
player.onTimeUpdate = (e) => { console.log("onTimeUpdate:" + e); playPtsLabel.textContent = e + " / " + duration; playProgress.value = e; };
global.play = () => { player.play(); };
global.pause = () => { player.pause(); };
global.seek5 = () => { player.seek(5); };
global.capture = () => { console.log(captureArea); captureArea.innerHTML = ""; let captureData = player.capture(); console.log("captureData:", captureData); captureData.forEach((item, i) => { captureArea.appendChild(item); }); };
global.release = () => { player.release(); };
* index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VideoCompare</title>
<style>
#context {
padding : 50px;
}
#play-progress {
width: 100px;
}
</style>
</head>
<body>
<div id="context">
<div id="compare-player"></div>
<hr>
<progress id="play-progress" value="0" max="0"></progress>
<span id="play-pts">0 / 0</span>
<br>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="seek5()">Seek5</button>
<button onclick="capture()">Capture</button>
<button onclick="release()">Release</button>
</div>
<div id="capture-area"></div>
<!-- script runnning -->
<script src="dist/demo.js"></script>
</body>
</html>