baidu-mct-video-compare

1.2.0 • Public • Published

baidu-mct-video-compare

A Web Player for video quality compare

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

Package Sidebar

Install

npm i baidu-mct-video-compare

Weekly Downloads

4

Version

1.2.0

License

GPL-3.0

Unpacked Size

1.32 MB

Total Files

15

Last publish

Collaborators

  • numberwolf