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; -
side-by-side mode
/*** single-step-hori*/let player = VideoCompareModule;
-
- Bind listener
- bind player's event listener
- onReady: get durationplayer {console;// todo};
- onTimeUpdate: get play timestampplayer {console;// todo};
- onReady: get duration
-
- play control
- operations API// playglobal {player;};// pauseglobal {player;};// seek to 5secglobal {player;};// capture frame, get canvas objectsglobal {console;captureAreainnerHTML = "";let captureData = player;console;captureData;};
-
- run Player
player;
Example Demo:
- Js
; // let width = 0;// let height = 0;let duration = 0;let playProgress = document;let playPtsLabel = document;let captureArea = document;console; /** * single-step-hori */let player = ; /** * side by side */// let player = newMCTWebComparePlayer({// type : "side-by-side",// containerId : "compare-player",// width : "1000px", // or 1000px// height : "auto",// mode : "waterfall"// // mode : "line"// }); player; player { console; duration = eduration; playPtsLabeltextContent = "0 / " + eduration; playProgressmax = eduration; playProgress;}; player { console; playPtsLabeltextContent = e + " / " + duration; playProgressvalue = e;}; global { player;}; global { player;}; global { player;}; global { console; captureAreainnerHTML = ""; let captureData = player; console; captureData;}; global { player;};
- index.html
VideoCompare 0 / 0 Play Pause Seek5 Capture Release <!-- script runnning -->