Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

baidu-mct-video-compare

numberwolf4GPL-3.01.2.0

A video's quality compare player, support side-by-side/top-and-bottom/single-step mode. Author:changyanlong01@baidu.com/porschegt23@foxmail.com

player, mp4, compare, side-by-side, top-and-bottom, single-step, baidu, changyanlong, mct, multimedia

readme

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