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

$3

``bash


https://www.npmjs.com/package/baidu-mct-video-compare


npm i baidu-mct-video-compare
`

$3

#### API

* 1. Create Player
* single-step mode
`javascript
/**
* single-step-hori
*/
let player = VideoCompareModule.initPlayer({
type : "single-step-hori",
containerId : "compare-player",
width : "1000px", // or 1000px
height : "auto"
});
`

* side-by-side mode
`javascript
/**
* single-step-hori
*/
let player = VideoCompareModule.initPlayer({
type : "side-by-side",
containerId : "compare-player",
width : "1000px", // or 1000px
height : "auto",
mode : "waterfall"
// mode : "line"
});
`

* 2. Bind listener
* bind player's event listener
* onReady: get duration
`javascript
player.onReady = (e) => {
console.log(e);
// todo
};
`
* onTimeUpdate: get play timestamp
`javascript
player.onTimeUpdate = (e) => {
console.log("onTimeUpdate:" + e);
// todo
};
`

* 3. play control
* operations API
`javascript
// 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);
});
};

`

* 4. run Player
`javascript
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"
]);
`

#### 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














``