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

• 1. 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"
     });

• 2. 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
      };

• 3. 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);
        });
    };
    

• 4. 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

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

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