npm - @mediakind/mkplayer - Versions diffs - 1.0.7 - Mend

@mediakind/mkplayer 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md +125 -0
package/azure-pipelines.yml +34 -0
package/dist/BufferLevel.d.ts +4 -0
package/dist/Logger.d.ts +9 -0
package/dist/MKPlayer.d.ts +26 -0
package/dist/MKPlayerConfiguration.d.ts +6 -0
package/dist/MKStream.d.ts +16 -0
package/dist/SubtitleTrack.d.ts +4 -0
package/dist/events/MKEvent.d.ts +13 -0
package/dist/events/MKPlayerEventCallback.d.ts +4 -0
package/dist/index.d.ts +4 -0
package/dist/mkplayer.js +1 -0
package/doc/assets/css/main.css +1 -0
package/doc/assets/images/icons.png +0 -0
package/doc/assets/images/icons@2x.png +0 -0
package/doc/assets/images/widgets.png +0 -0
package/doc/assets/images/widgets@2x.png +0 -0
package/doc/assets/js/main.js +51 -0
package/doc/assets/js/search.json +1 -0
package/doc/classes/mkplayer.html +588 -0
package/doc/enums/mkevent.html +303 -0
package/doc/globals.html +146 -0
package/doc/index.html +309 -0
package/doc/interfaces/bufferlevel.html +140 -0
package/doc/interfaces/mkplayerconfiguration.html +233 -0
package/doc/interfaces/mkplayereventcallback.html +167 -0
package/doc/interfaces/subtitletrack.html +195 -0
package/favicon.ico +0 -0
package/index.html +430 -0
package/mk_logo.png +0 -0
package/mkplayer-ui.min.css +2 -0
package/mkplayer.zip +0 -0
package/package.json +51 -0
package/src/BufferLevel.ts +7 -0
package/src/Logger.ts +51 -0
package/src/MKPlayer.ts +289 -0
package/src/MKPlayerConfiguration.ts +24 -0
package/src/MKStream.ts +74 -0
package/src/SubtitleTrack.ts +14 -0
package/src/events/MKEvent.ts +16 -0
package/src/events/MKPlayerEventCallback.ts +8 -0
package/src/index.ts +4 -0
package/tsconfig.json +20 -0
package/tslint.json +72 -0
package/typedoc.json +11 -0

package/index.html ADDED Viewed

@@ -0,0 +1,430 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+    <title>MKPlayer 1.0.7</title>
+    <meta charset='UTF-8'/>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm'
+          crossorigin='anonymous'>
+    <script
+            src='https://code.jquery.com/jquery-3.4.1.min.js'
+            integrity='sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo='
+            crossorigin='anonymous'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
+    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl'
+            crossorigin='anonymous'></script>
+    <script type='text/javascript' src='./dist/mkplayer.js'></script>
+    <link rel='stylesheet' href='./mkplayer-ui.min.css'>
+    <style>
+        .player-wrapper {
+            margin: 20px auto;
+            box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
+        }
+        .meta-info {
+            text-align: center;
+        }
+        .row {
+            margin: 20px 0;
+        }
+        .content-selection {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+        }
+        .content-selection > label {
+            margin: 5px;
+        }
+    </style>
+</head>
+<body>
+<div class='container'>
+    <div class='meta-info'>
+        <div class='row'>
+            <div class="col-10">
+                <div class="float-left">
+                    <a href="doc/index.html">Check out our docs!</a>
+                </div>
+            </div>
+            <div class="col-2">
+                <div class="float-right"><a href="https://www.w3schools.com"><img src="mk_logo.png" alt="Girl in a jacket" width="50" height="30" href="www.mediakind.com"></a>
+                </div>
+            </div>
+        </div>
+        <div class='row'>
+            <div class='col'>
+                <div class='input-group mb-3'>
+                    <input id='steam-stream-url' type='text' class='form-control' placeholder='Custom primaryUrl' aria-label='Custom primaryUrl' value="">
+                    <input id='steam-stream-secondary-url' type='text' class='form-control' placeholder='Custom secondaryUrl' aria-label='Custom secondaryUrl' value="">
+                    <input id='subtitle-url' type='text' class='form-control' placeholder='SubtitleTrack url' aria-label='SubtitleTrack url' value="">
+                    <input id='subtitle-language' type='text' class='form-control' placeholder='SubtitleTrack language' aria-label='SubtitleTrack language' value="">
+                    <div class='input-group-append'>
+                        <button id='load-custom-steam' class='btn btn-outline-secondary' type='button'>Load</button>
+                        <button id='unload-stream' class='btn btn-outline-secondary' type='button'>Unload</button>
+                    </div>
+                    <br/>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class='content'>
+        <div class='player-wrapper'>
+            <div id='player'></div>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <div class='content-selection btn-group btn-group-toggle' data-toggle='buttons'>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-vod' autocomplete='off'>HLS VOD
+                </label>
+                <label class='btn btn-outline-secondary active'>
+                    <input type='radio' name='options' id='option-live' autocomplete='off' checked>Live
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-dash-vod' autocomplete='off'>DASH VOD
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-dash-subtitle' autocomplete='off'>DASH Subtitle
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-hls-subtitle' autocomplete='off'>HLS Subtitle
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-mp4-1' autocomplete='off'>MP4 Source 1
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-mp4-2' autocomplete='off'>MP4 Source 2
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-mp4-3' autocomplete='off'>MP4 Source 3
+                </label>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-error' autocomplete='off'>Error Source
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <div class='content-selection btn-group btn-group-toggle' data-toggle='buttons'>
+                <label class='btn btn-outline-secondary'>
+                    <input type='radio' name='options' id='option-destroy' autocomplete='off'>destroy()
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <p>Video Buffer </p>
+            <div class='progress'>
+                <div class='progress-bar progress-bar-striped progress-bar-animated' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0'
+                     id='videoBuffer'></div>
+            </div>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <p>Audio Buffer</p>
+            <div class='progress'>
+                <div class='progress-bar progress-bar-striped progress-bar-animated' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0'
+                     id='audioBuffer'></div>
+            </div>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <p id='startupTime'>Video Startup Time: unknown</p>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <p id='playbackBitrate'>Video Playback Bitrate: unknown</p>
+        </div>
+    </div>
+    <div class='row'>
+        <div class='col-12'>
+            <p id='segmentPlaybackLabel'>Segment: unknown</p>
+        </div>
+    </div>
+</div>
+<script type='text/javascript'>
+  let mkPlayer;
+  let vodButton = $('#option-vod').parent();
+  let dashVodButton = $('#option-dash-vod').parent();
+  let dashSubtitleButton = $('#option-dash-subtitle').parent();
+  let hlsSubtitleButton = $('#option-hls-subtitle').parent();
+  let mp4Button = $('#option-mp4-1').parent();
+  let mp4Button2 = $('#option-mp4-2').parent();
+  let mp4Button3 = $('#option-mp4-3').parent();
+  let liveButton = $('#option-live').parent();
+  let errorButton = $('#option-error').parent();
+  let destroyButton = $('#option-destroy').parent();
+  let customStreamButton = $('#load-custom-steam');
+  let unloadStream = $('#unload-stream');
+  let loadTime;
+  let startupTimeCalculated = false;
+  function deselectCustomLoadButton() {
+    $(customStreamButton).removeClass('active');
+  }
+  function load(source) {
+    loadTime = Date.now();
+    startupTimeCalculated = false;
+    mkPlayer.load(source).then(function() {
+      console.log('MKPlayer Example Page Loaded Source Successfully');
+    }, function(reason) {
+      console.error('MKPlayer Example Page - Error loading MKPlayer Source');
+      console.error(reason);
+    });
+  }
+  vodButton.on('click', function() {
+    vodButton.button('toggle');
+    deselectCustomLoadButton();
+    load(vodSource);
+  });
+  destroyButton.on('click', function() {
+    mkPlayer.unload();
+    mkPlayer.destroy();
+  });
+  dashVodButton.on('click', function() {
+    dashVodButton.button('toggle');
+    deselectCustomLoadButton();
+    load(dashVodSource);
+  });
+  hlsSubtitleButton.on('click', function() {
+    hlsSubtitleButton.button('toggle');
+    deselectCustomLoadButton();
+    load(hlsSubtitleSource);
+  });
+  dashSubtitleButton.on('click', function() {
+    dashSubtitleButton.button('toggle');
+    deselectCustomLoadButton();
+    load(dashSubtitleSource);
+  });
+  errorButton.on('click', function() {
+    errorButton.button('toggle');
+    deselectCustomLoadButton();
+    load(errorSource);
+  });
+  mp4Button.on('click', function() {
+    mp4Button.button('toggle');
+    deselectCustomLoadButton();
+    load(mp4Source);
+  });
+  mp4Button2.on('click', function() {
+    mp4Button2.button('toggle');
+    deselectCustomLoadButton();
+    load(mp4Source2);
+  });
+  mp4Button3.on('click', function() {
+    mp4Button3.button('toggle');
+    deselectCustomLoadButton();
+    load(mp4Source3);
+  });
+  liveButton.on('click', function() {
+    liveButton.button('toggle');
+    deselectCustomLoadButton();
+    mkPlayer.unload();
+    load(liveSource);
+  });
+  customStreamButton.on('click', function() {
+    // remove active button of group
+    $($('.btn-group-toggle .active')[0]).removeClass('active');
+    let customSource = {
+      primaryUrl: $('#steam-stream-url').val(),
+      secondaryUrl: $('#steam-stream-secondary-url').val(),
+      cdnFailoverPercent: 10,
+      assetIdentifier: 'Custom Source',
+    };
+    if($('#subtitle-url').val() && $('#subtitle-language').val()) {
+      customSource.subtitleTracks = [{
+        url: $('#subtitle-url').val(),
+        language: $('#subtitle-language').val(),
+      }]
+    }
+    mkPlayer.unload();
+    load(customSource);
+  });
+  unloadStream.on('click', function() {
+    $($('.btn-group-toggle .active')[0]).removeClass('active');
+    // remove active button of group
+    mkPlayer.unload();
+  });
+  let liveSource = {
+    primaryUrl: "https://live-mkmsctacdn.azureedge.net/cmaf/TESTCES1/index.m3u8",
+    cdnFailoverPercent: 10,
+    assetIdentifier: 'DASH Live',
+  };
+  let dashSubtitleSource = {
+    primaryUrl: "https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd",
+    subtitleTracks: [{
+      url: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
+      language: 'aa',
+    }],
+    assetIdentifier: 'DASH Subtitle',
+    poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png'
+  };
+  let dashVodSource = {
+    primaryUrl: "https://mk-orionsedge.azureedge.net/d2ct1/dash/tenant1_ASMIK_ASMI0000000000000920/manifest.mpd",
+    cdnFailoverPercent: 0,
+    assetIdentifier: 'DASH VOD',
+    subtitleTracks: [{
+      url: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
+      language: 'ms',
+    }],
+  }
+  let hlsSubtitleSource = {
+    primaryUrl: 'https://mk-orionsedge.azureedge.net/test/hls/tos/index.m3u8',
+    cdnFailoverPercent: 0,
+    assetIdentifier: 'HLS Subtitle'
+  }
+  var vodSource = {
+    primaryUrl: "https://mk-orionsedge.azureedge.net/d2ct1/hls/tenant1_ASMIK_ASMI0000000000000920/index.m3u8",
+    assetIdentifier: 'HLS Vod',
+    cdnFailoverPercent: 10,
+    subtitleTracks: [{
+      url: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
+      language: 'ms',
+    }],
+  };
+  var mp4Source = {
+    primaryUrl: "https://mkplayer.z13.web.core.windows.net/vectors/product.mp4",
+    assetIdentifier: 'MP4 Source 1',
+  }
+  var mp4Source2 = {
+    primaryUrl: "https://mkplayer.z13.web.core.windows.net/vectors/mys_video.mp4",
+    assetIdentifier: 'MP4 Source 2',
+  }
+  var mp4Source3 = {
+    primaryUrl: "https://mediusproduction.blob.core.windows.net/video-28731/Build2020Satya.mp4?sv=2018-03-28&sr=c&sig=KyUgEjjChf7RD5SzHisGTn3%2BXkof%2FHYSBMWSaj7EHCs%3D&se=2025-05-19T17%3A16%3A57Z&sp=r",
+    assetIdentifier: 'MP4 Source 3',
+    subtitleTracks: [
+      {
+        url: 'https://mediusproduction.blob.core.windows.net/video-28731/Caption_fi-FI.vtt?sv=2018-03-28&amp;sr=c&amp;sig=jsW7SssIhDY9ESoLoDjYgjmCSX1LyRVcM2AVa%2FPIZN8%3D&se=2025-05-22T14%3A22%3A12Z&sp=r',
+        language: 'fi',
+      },
+      {
+        url: 'https://mediusprodstatic.studios.ms/video-28731/Caption_ar-EG.vtt?sv=2018-03-28&sr=c&sig=qFHd87nMFTZWXNkDIEcq4656fFH6Zb%2Fd40q4zaVSOJA%3D&se=2025-05-26T15%3A52%3A20Z&sp=r',
+        language: 'ms',
+      }
+    ],
+  }
+  let errorSource = {
+    primaryUrl: "https://bitdash-a.akamaihd.net/content/sintel/hls/plaasdfasdfadfylist.m3u8",
+    assetIdentifier: 'Error Asset',
+    cdnFailoverPercent: 10,
+  };
+  let mkPlayerConfiguration = {
+    debug: true,
+    autoplay: true,
+    muted: true,
+    smallScreen: false,
+  };
+  let playerContainer = document.getElementById('player');
+  mkPlayer = new mkplayer.MKPlayer(playerContainer, mkPlayerConfiguration);
+  mkPlayer.on('error', function(event) {
+    console.error('[MKPlayer] error: %d - %s', event.code, event.name);
+  })
+  mkPlayer.on('warning', function(event) {
+    console.error('[MKPlayer] warning: %d - %s', event.code, event.name);
+  })
+  mkPlayer.on('ready', function(event) {
+    console.info('[MKPlayer] ready ' + event.timestamp);
+  })
+  mkPlayer.on('timechanged', function(event) {
+    var videoBufferLevel = Math.round(getVideoBufferLevel() * 100) / 100;
+    $('#videoBuffer').css('width', videoBufferLevel + '%').attr('aria-valuenow', videoBufferLevel);
+    $('#videoBuffer').text(videoBufferLevel)
+    var audioBufferLevel = Math.round(getAudioBufferLevel() * 100) / 100;
+    $('#audioBuffer').css('width', audioBufferLevel + '%').attr('aria-valuenow', audioBufferLevel);
+    $('#audioBuffer').text(audioBufferLevel)
+  })
+  mkPlayer.on('playing', function(event) {
+    if (!startupTimeCalculated) {
+      const startupTime = new Date(Date.now() - loadTime);
+      $('#startupTime').text('Video Startup Time: ' + startupTime.getSeconds() + "." + startupTime.getMilliseconds());
+      startupTimeCalculated = true
+    }
+  })
+  mkPlayer.on('paused', function(event) {
+    console.info('[MKPlayer] paused' + JSON.stringify(event));
+  })
+  mkPlayer.on('playbackfinished', (event) => {
+    console.info('[MKPlayer] playbackfinished' + JSON.stringify(event));
+  })
+  mkPlayer.on('segmentplayback', function(event) {
+    if (event.mimeType === 'video/mp4') {
+      let segmentUrl = event.url
+      let fileNameIndex = segmentUrl.lastIndexOf("/") + 1;
+      var filename = segmentUrl.substr(fileNameIndex);
+      $('#segmentPlaybackLabel').text('[MKPlayer] Segment: url=' + filename + ' currentTime=' + mkPlayer.getCurrentTime() + ' time=' + event.playbackTime)
+      previousSegmentPlaybackTime = event.playbackTime;
+    }
+  })
+  mkPlayer.on('qualitychanged', function(event) {
+    currentPlayingBitrate = event.targetQuality.bitrate
+    $('#playbackBitrate').text('Video Playback Quality: ' + currentPlayingBitrate)
+  });
+  var getVideoBufferLevel = function() {
+    return mkPlayer.getBufferLevels().video
+  }
+  var getAudioBufferLevel = function() {
+    return mkPlayer.getBufferLevels().audio
+  }
+  load(liveSource)
+</script>
+</body>
+</html>

package/mk_logo.png ADDED Viewed

Binary file