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
  };

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"
]);

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>

Package detail