HLS

[aliaburas80]

How could we add HLS.js to TAL player, I try by adding below code to simplevideocomponent.js

if (Hls.isSupported()) {          
          var hls = new Hls();
          var source = "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
          hls.loadSource(source);
          hls.attachMedia(player);
          hls.on(Hls.Events.MANIFEST_PARSED, function () {
            debugger
            player.initialiseMedia('video', source , "video/mp4", videoContainer);
            player.beginPlayback();
          });
        }

There is away to make TAL HTML 5 player support HLS

[Crasheng]

Did u get solution for this?

[tsadler1988]

Hi @aliaburas80 @Crasheng, we do not intend to extend TAL with any Media Source Extensions based playback solutions. TAL Media Player relies on the browser to natively support whatever stream is being used.

We have however made more of our playback code open source (bbc/bigscreen-player), although we haven't yet published a support model or contribution guidelines. bbc/bigscreen-player abstracts TAL Media Player and dash.js behind a single API. If you were using this, you could add a hls.js playback strategy; not sure we could accept this as a contribution, as we'd have to look into potential licensing concerns around HLS, but you could do this in a fork.

We did used to have the below hack for using dash.js via TAL, but we only ever used this for debugging purposes:

/*eslint-disable*/
var interval = setInterval(function () {
  try {
    var BrowserDevice = require('antie/devices/browserdevice');
    var Html5 = require('antie/devices/mediaplayer/html5');
    var originalCreateElement = BrowserDevice.prototype._createElement;
    BrowserDevice.prototype._createElement = function (tagName, id, classNames) {
      var elt = originalCreateElement(tagName, id, classNames);
      if (tagName === 'video') {
        elt.load = function () {
          var source = elt.getElementsByTagName('source')[0];
          if (source) {
            var src = source.getAttribute('src');
            elt.removeChild(source);
            var player = dashjs.MediaPlayer().create();
            player.getDebug().setLogToBrowserConsole(false);
            player.initialize(elt, src);
            elt.dashjsPlayer = player;
          }
        };
        elt.reset = function () {
          elt.dashjsPlayer.reset();
        };
      }
      return elt;
    };
    Html5.prototype._getSeekableRange = function () {
      if (this._mediaElement) {
        var dashjsPlayer = this._mediaElement.dashjsPlayer;
        var dvrInfo = dashjsPlayer.getDashMetrics().getCurrentDVRInfo(dashjsPlayer.getMetricsFor('video'));
        if (this._isReadyToPlayFrom() && (dvrInfo && dvrInfo.manifestInfo && dvrInfo.manifestInfo.isDynamic)) {
          return {
            start: dvrInfo.range.start,
            end: dvrInfo.range.end
          };
        } else if (this._mediaElement.duration !== undefined) {
          return {
            start: 0,
            end: this._mediaElement.duration
          };
        }
      }
      return undefined;
    };
    clearInterval(interval);
  } catch (e) {
  }
}, 1000);