:clapper: An extensible media player for the web.

Overview

Huge changes in the latest version. See 0.4.0 version changelog for more information

jsDelivr hits (npm scoped)


Clappr is an extensible media player for the web. Your architecture is projected primarily into plugins, adding low accoupling by design to the project and the possibility to add infinitely features easily.

Clappr uses by default the HTMLVideoElement which guarantees support to many platforms. You have the possibility to extends the default HTML5 playback or the playback interface to create one new media support just like a plugin!

Clappr is a composition of two other projects: @clappr/core and @clappr/plugins.

The @clappr/core contains the basic functionalities from Clappr (plugin architecture, class abstractions, public interfaces, events handlers and etc) and the @clappr/plugins are the repository where the plugins maintained by the Clappr team lives. More info about those projects into your repositories.

All Clappr projects are written in *.js using the latest features of ECMAScript.

Clappr is under development but production-ready. Feel free to open issues and send pull requests.

🚩 Table of Contents

?? Usage

Via script tag:

Add the following script on your HTML:

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>
</head>

Now, create the player:

<body>
  <div id="player"></div>
  <script>
    var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
  </script>
</body>

πŸ“Ή Demo

Live demo to test, with a possibility to add external plugins.

πŸ“š API Documentation

You can check the current API doc via @clappr/core here.

πŸ› οΈ Configuration

You can check the embed parameters supported by @clappr/core here.

πŸ”Œ Built-in Plugins

You can check the plugins used on Clappr player via @clappr/plugins here.

🀝 Third party plugins/integrations

External Plugins

Plugin Status Compatible with latest Clappr URL
Media Control Ready Yes https://github.com/joaopaulovieira/clappr-media-control-plugin
Video Queue (Playlist) Ready Yes https://github.com/joaopaulovieira/clappr-queue-plugin
Thumbnails on seekbar Ready Yes https://github.com/tjenkinson/clappr-thumbnails-plugin
Markers Ready Yes https://github.com/tjenkinson/clappr-markers-plugin
Level Selector Ready Yes https://github.com/clappr/clappr-level-selector-plugin
360 videos Ready Yes https://github.com/thiagopnts/video-360
Chromecast Ready Yes https://github.com/clappr/clappr-chromecast-plugin
DASH with shaka Ready Yes https://github.com/clappr/dash-shaka-playback
Playback Speed Ready Yes https://github.com/bikegriffith/clappr-playback-rate-plugin
Clappr Stats Ready Yes https://github.com/leandromoreira/clappr-stats
Clappr Nerd Stats Ready Yes https://github.com/lucasrodcosta/clappr-nerd-stats
Pause while far Ready Yes https://github.com/leandromoreira/clappr-pause-tab-visibility
RTMP Ready Yes https://github.com/clappr/clappr-rtmp-plugin
Picture-in-Picture Ready Yes https://github.com/tjenkinson/clappr-pip-plugin
Hybrid P2P & CDN Ready Yes https://support.streamroot.io/hc/en-us/articles/360000913654-Clappr
Comments on seekbar Ready ? https://github.com/Metrakit/clappr-comment-plugin
Voice control Ready ? https://github.com/flavioribeiro/clappr-speech-control-plugin
Dash WIP No https://github.com/shankardevy/clappr-dash-plugin
Youtube Ready No https://github.com/towerz/clappr-youtube-playback
Googel IMA Pre Roll Ready Yes https://github.com/kslimani/clappr-google-ima-html5-preroll
VAST Ad plugin WIP No https://github.com/vix-simplex/clappr-ad-plugin
Dynamic Overlay Ready Yes https://github.com/Lethea/clappr-dynamic-text-overlay
Scroll Text Overlay Ready Yes https://github.com/Lethea/clappr-marquee-overlay
Playback Speed Controller Ready Yes https://github.com/Lethea/clapper-playback-speed-plugin-extended
FLV Ready Yes https://github.com/andrefilimono/clappr-flvjs-playback
Context Menu Ready Yes https://github.com/joaopaulovieira/clappr-context-menu-plugin

External Integrations

Integration Status Compatible with latest Clappr URL
P2P Media Loader Ready Yes https://github.com/Novage/p2p-media-loader

🎞️ Supported Formats

Format HLS MP4 MP3 WEBM DASH RTMP JPG/PNG/GIF FLV
IE10 βœ” βœ” βœ” ✘ ✘ rtmp βœ” ✘
IE11 βœ” βœ” βœ” ✘ rtmp rtmp βœ” rtmp
Microsoft Edge βœ” βœ” ? ? rtmp rtmp ? rtmp
Firefox βœ” βœ” βœ” βœ” rtmp rtmp rtmp rtmp
Chrome βœ” βœ” βœ” βœ” rtmp rtmp βœ” rtmp
Safari βœ” βœ” βœ” ✘ rtmp rtmp rtmp rtmp
iPhone βœ” βœ” βœ” ✘ ✘ ✘ βœ” ✘
iPad βœ” βœ” βœ” ✘ ✘ ✘ βœ” ✘
Android βœ” βœ” βœ” ✘ rtmp rtmp ✘ rtmp
WiiU Browser βœ” βœ” ✘ ? rtmp rtmp ✘ ?
PS4 Browser βœ” βœ” ✘ ? rtmp rtmp ✘ ?

rtmp means that the support is made by an external plugin.

⁉️ FAQ & Troubleshooting

How to write a plugin?

See the wiki for more info.

How can I disable or override a plugin?

Let's say you want to disable or override a plugin.

Disable a plugin

// let's disable the loading animation (the 'spinner' plugin)
var player = new Clappr.Player({ ... });
// after attach
player.getPlugin('spinner').disable();

Override a plugin

// let's disable the loading animation (the 'spinner' plugin)
export default class NoSpinner extends UIContainerPlugin {
  get name() { return 'spinner' }
}
new Clappr.Player({ plugins: [NoSpinner]})

How can I use clappr with ReactJS?

https://medium.com/@bikegriffith/using-clappr-with-reactjs-14a338e3451f#.9a36w0dpj

How can I use clappr with ionic/angular?

https://github.com/clappr/clappr/issues/933#issuecomment-228540381

How can I Log messages with Clappr?

Add this snippet before you instantiate the player Clappr.Log.setLevel(0)

Common steps to verify issues

Very often people open issues related to stream not working, freezing, glitching, stopping, and so on. You can try the steps below, taking notes about the results:

  • try to run the same example at CDN
  • check the cors headers at your servers
  • try to run it on hls.js demo page
  • try to run it on flashls. demo page
  • try to run on your page the following source: http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8
  • try different browsers/OS's to see if the problems remain
  • try to use a tool to check the health of your stream (both input, ie: RTMP, and segmentation, ie: DASH or HLS): like mediainfo (for instance you could: mediainfo http://www.example.com/my.m3u8, Apple's mediastreamvalidator too, hls-analyzer and etc.
//HLS-Analyzer usage example

pip install m3u8
git clone https://github.com/epiclabs-io/hls-analyzer.git
cd hls-analyzer
python hls-analyzer.py http://www.streambox.fr/playlists/x36xhzz/x36xhzz.m3u8

How to handle player fatal errors?

Player fatal errors can be handled using onError API event.

var player = new Clappr.Player({
  parent: '#myplayer',
  source: 'http://path.to/my/video.mp4',
  events: {
    onError: function(e) {
      // Here the code to handle the error
    }
  }
});

Note: the type of error event object depends on the type of the playback component resolved to play the video.

Example

This is a simple example using the no_op playback to display error messages.

You can try the following Javascript code on Clappr demo page:

var playerElement = document.getElementById("player-wrapper");

var r = 3; // Retry attempts

var player = new Clappr.Player({
  // source: 'http://clappr.io/highline.mp4',
  source: 'http://clappr.io/bad_highline.mp4',
  disableErrorScreen: true, // Disable the internal error screen plugin
  height: 360,
  width: 640,
  events: {
    onError: function(e) {
      r--;
      var s = player.options.source;
      // Replace previous line by the following line to simulate successful recovery
      // var s = (r > 2) ? player.options.source : 'http://clappr.io/highline.mp4';
      var t = 10;
      var retry = function() {
        if (t === 0) {
          var o = player.options;
          o.source = s;
          player.configure(o);
          return;
        }
        Clappr.$('#retryCounter').text(t);
        t--;
        setTimeout(retry, 1000);
      };
      player.configure({
        autoPlay: true,
        source: 'playback.error',
        playbackNotSupportedMessage: 'Network fatal error.' + ((r > 0)
            ? ' Retrying in <span id="retryCounter"></span> seconds ...'
            : ' All retry attempts failed'),
      });
      if (r > 0) {
        retry();
      }
    }
  }
});

player.attachTo(playerElement);

Another example

This example use a custom error container plugin to display error messages.

You can try the following Javascript code on Clappr demo page:

var playerElement = document.getElementById("player-wrapper");

var ErrorPlugin = Clappr.ContainerPlugin.extend({
  name: 'error_plugin',
  background: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAFoBAMAAAA1HFdiAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAG1BMVEX5+fn//wAA//8A/wD/AP//AAAAAP8XFxf///8H5gWfAAAAAWJLR0QIht6VegAAAAd0SU1FB98IBRIsAXmGk48AAAI5SURBVHja7dJBDYBADADBs4AFLGABC1iohbOPhv1BMvu+NLlp10odqTN1pe7Uk5pQ8wMIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDA/wKWxzM71T7ZZrfltNnppgACBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAL8B+ALjSfYzPnmdzgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNS0wOC0wNVQxODo0NDowMSswMTowMCL95a4AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTUtMDgtMDVUMTg6NDQ6MDErMDE6MDBToF0SAAAAAElFTkSuQmCC',
  bindEvents: function() { this.listenTo(this.container, Clappr.Events.CONTAINER_ERROR, this.onError) },
  hide: function() { this._err && this._err.remove() },
  show: function() {
    var $ = Clappr.$
    this.hide();
    var txt = (this.options.errorPlugin && this.options.errorPlugin.text) ? this.options.errorPlugin.text : 'A fatal error occured.';
    this._err = $('<div>')
      .css({
        'position': 'absolute',
        'z-index': '999',
        'width': '100%',
        'height': '100%',
        'background-image': 'url(' + this.background + ')',
        'background-size': 'contain',
        'background-repeat': 'no-repeat',
        'padding-top': '15%',
        'text-align': 'center',
        'font-weight': 'bold',
        'text-shadow': '1px 1px #fff',
      })
      .append($('<h2>')
        .text(txt)
        .css({
          'font-size': '200%',
        }))
      .append($('<p>').html('Retrying in <span class="retry-counter">10</span> seconds ...')
        .css({
          'font-size': '120%',
          'margin': '15px',
        }));
    this.container && this.container.$el.prepend(this._err);
  },
  onError: function(e) {
    if (!this.container) return;
    this.show();
    this.container.getPlugin('click_to_pause').disable();
    var tid, t = 10, retry = function() {
      clearTimeout(tid);
      if (t === 0) {
        this.container.getPlugin('click_to_pause').enable();
        if (this.options.errorPlugin && this.options.errorPlugin.onRetry) {
          this.options.errorPlugin.onRetry(e);
          return;
        } else {
          this.container.stop();
          this.container.play();
          return;
        }
      }
      $('.retry-counter').text(t);
      t--;
      tid = setTimeout(retry, 1000);
    }.bind(this);
    retry();
  }
});

var player = new Clappr.Player({
  disableErrorScreen: true, // Disable the internal error screen plugin
  source: 'http://clappr.io/bad_highline.mp4',
  plugins: [ErrorPlugin],
  errorPlugin: {
    // text: 'My custom error message.',
    onRetry: function(e) {
      // simulate successful recovery
      // or decide here what to do between each retry
      player.configure({
        source: 'http://clappr.io/highline.mp4',
        autoPlay: true,
      });
    }
  },
  height: 360,
  width: 640
});

player.attachTo(playerElement);

πŸš€ Companies using Clappr

https://github.com/clappr/clappr/issues/522

πŸ™Œ Contributors

This project exists thanks to all the people who contribute.

🌟 Sponsor

image

Comments
  • clappr with flashls playback does not start to play from js

    clappr with flashls playback does not start to play from js

    Browser: IE 11.0.9600.17105 OS: Windows 7 Clappr Version: cdn.clappr.io

    Steps to reproduce:

    • Run this code on cdn.clappr.io:
    var playerElement = document.getElementById("player-wrapper");
    
    var player = new Clappr.Player({
      baseUrl: '/latest',
      poster: 'http://clappr.io/poster.png',
      height: 360,
      width: 640,
      audioOnly: true,
      flushLiveURLCache: true,
      hlsjsConfig: {
        xhrSetup: function(xhr, url) {
          xhr.withCredentials = true;
        }
        },
      playbackConfig: {
        crossorigin: 'use-credentials'
      }
    });
    
    player.attachTo(playerElement);
    player.load({source: 'http://hls.02.ep.emgsound.ru/11/playlist.m3u8', mimeType: 'application/x-mpegURL'});
    player.play();
    
    • Expected start playing but it's not. I also noticed that if I enable always request from server option in developer network console then everything start playing because of 200 responses. But without this option with default browser cache enabled player stopped with 304 reponse on http://cdn.clappr.io/latest/809981e5b09d5336c45d72d0869ada2a.swf?inline=1

    This link is playing well after click on "Load".

    With regards, Andrey.

    to confirm 
    opened by waster 41
  • m3u8 not working

    m3u8 not working

    <head>
      <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/clappr/clappr@latest/dist/clappr.min.js"></script>
    </head>
    
    <body>
      <div id="player"></div>
      <script>
        var player = new Clappr.Player({source: "http://jiotv.live.cdn.jio.com/Star_Vijay/Star_Vijay_400.m3u8", parentId: "#player"});
      </script>
    </body>
    

    why is this code not working?

    wontfix 
    opened by firofame 32
  • artificial time drift in live mode for native HLS (0.2.18)

    artificial time drift in live mode for native HLS (0.2.18)

    _3 Upvotes_ This is a weird one. I've tracked down the source, but I'm not sure of the correct way to fix it.

    My scenario is that I have a live HLS feed. I seek back so that I'm in DVR mode. Every 10 seconds, the current time reported from PLAYER_TIMEUPDATE jumps 10 seconds. Watching the video proves that the video is not actually jumping 10 seconds forward, but the current time value artificially gets 10 seconds larger at regular intervals.

    After some investigations, I see that this is definitely tied to when new playable fragments load. IE: when the duration gets 10 seconds longer, the current time is also 10 seconds longer.

    I've traced this as far as I feel comfortable to the following call stack:

    1. when dispatching the timeupdate event
    2. this.getCurrentTime() returns the wrong value
    3. which seems to have bad input coming from here
    4. and I don't know why this.getDuration() never changes

    I added a console.log into getPlayableStartTime() to show the weirdness:

    screen shot 2015-11-13 at 4 29 09 pm

    What you see is this.getDuration() (1st number) staying the same while the actual duration (2nd number) steadily increases in 10-second chunks (as expected). This causes getPlayableStartTime() to be an ever-growing negative number, in turn causing "current time" as dispatched in the event to grow artificially.

    • Any idea what the fix is here?
    • Where does this.el.duration come from / who is responsible for updating it? Can it be ignored?
    bug 
    opened by jfairley 32
  • hls play error Uncaught TypeError: Cannot read property 'call' of undefined

    hls play error Uncaught TypeError: Cannot read property 'call' of undefined

    when i use the original clapper.min.js it's ok to play hls, but when i use npm run release to generate my own clapper.min.js then it's throw error as the title

    it seems that the hls.js lib can't execute right so hls can't play . i want to know how you guys to package the clappr.min.js ,why i use the original file can work fine , but use my own generate file can't work.

    @leandromoreira ,can you help me ,thanks a lot!

    bug high-priority 
    opened by 569934390 30
  • Issue with playing HLS stream

    Issue with playing HLS stream

    Browser: Version 78.0.3904.108 (Official Build) (64-bit) OS: Windows 10

    Clappr Version: Latest

    Steps to reproduce:

    Hello guys, i have issue with playing this stream : http://185.180.14.6:8081/aer35/index.m3u8

    I had try on test pages and in clappr in crome developer console i see that stream is working (ts fragments are downloading) but in player i dont get any picture or sound,just loading. On flasHls page i get video but i dont get sound. Same behavior i get on my local hosted pages.

    From same server i have streams that work without any issue and also this stream generally work in vlc.

    I googled a lot but couldn't find solutions.

    I think codec is not issue as i have stream that are working with sames codes.

    So only difference that i have found between streams that work and those that don't is that those that don't work are having metadata info, but that is coming from source and is not something on i can effect on.

    Any help would be appreciated.

    Thank You.

    Kind Regards,

    wontfix stale 
    opened by savke24 28
  • Set default behavior for multiple sources

    Set default behavior for multiple sources

    _1 Upvote_ Some versions ago, Clappr used to treat multiple sources as as sequence, playing one after another. This behavior has been removed to allow plugins to control how the player works when there are multiple sources, but there should be a default behavior when there are no plugins set to control this.

    Currently, when there are multiple sources, the player instantiates a container for each source and sets the first one as being the "selected". The MediaControl is set to control the selected container and the others are ignored. This way, there could be a case when the primary source is be unsupported by the browser, but the second is valid. Instead of displaying a valid video, the player would show the no_op playback.

    I recently received a suggestion from @moret to make the multiple sources a fallback chain. We have considered this idea before, but we postponed the decision, but since Flash has become a bigger target for browser blocking, I think we should revisit this. Please share your opinions here. What do you think? @bernardocamilo , @flavioribeiro, @leandromoreira, @thiagopnts

    enhancement 
    opened by towerz 28
  • Audio and video synchronization

    Audio and video synchronization

    Hello There are still issues with audio and video synchronization. Here the log stream is still playing correctly:

    [log] > attachMedia webvtt-parser.js:161 [log] > media source opened webvtt-parser.js:161 [log] > loadSource:https://ott.smsnet.pl/~0d9251a4b115385cc63815b4b36fbf08/1001/pl.m3u8?archive=0 webvtt-parser.js:161 [log] > trigger BUFFER_RESET webvtt-parser.js:161 [log] > manifest loaded,3 level(s) found, first bitrate:1500000 webvtt-parser.js:161 [log] > startLoad(-1) webvtt-parser.js:161 [log] > switching to level 2 webvtt-parser.js:161 [log] > loading playlist for level 2 webvtt-parser.js:161 [log] > main stream:STOPPED->IDLE webvtt-parser.js:161 [log] > audio tracks updated webvtt-parser.js:161 [log] > subtitle tracks updated webvtt-parser.js:161 [log] > live playlist, reload in 4933 ms webvtt-parser.js:161 [log] > level 2 loaded [14970920,14970925],duration:30 webvtt-parser.js:161 [log] > live playlist - first load, unknown sliding webvtt-parser.js:161 [log] > configure startPosition to 15 webvtt-parser.js:161 [log] > Loading key for 14970923 of [14970920 ,14970925],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > Loading 14970923 of [14970920 ,14970925],level 2, currentTime:15.000,bufferEnd:15.000 webvtt-parser.js:161 [log] > demuxing in webworker webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > Loaded 14970923 of [14970920 ,14970925],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14970923 of [14970920 ,14970925],level 2, cc 0 webvtt-parser.js:161 [log] > main:discontinuity detected webvtt-parser.js:161 [log] > main:switch detected 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > WebCrypto AES decrypt 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > WebCrypto Error, disable WebCrypto API 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > JS AES decrypt 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > reparse from beginning 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > manifest codec:undefined,ADTS data:type:2,sampleingIndex:3[48000Hz],channelConfig:2 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > parsed codec:mp4a.40.5,rate:48000,nb channel:2 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916246038/3916242438:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916332438/3916328838:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916418838/3916415238:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916508838/3916501638:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916591638/3916588038:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > audio sampling rate : 48000 webvtt-parser.js:161 [log] > InitPTS for cc:0 found from video track:3914738313 webvtt-parser.js:161 [log] > creating sourceBuffer(audio/mp4;codecs=mp4a.40.5) webvtt-parser.js:161 [log] > creating sourceBuffer(video/mp4;codecs=avc1.4d402a) webvtt-parser.js:161 [log] > main track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5] webvtt-parser.js:161 [log] > main track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.4d402a] webvtt-parser.js:161 [log] > Parsed audio,PTS:[15.000,20.504],DTS:[15.000/20.504],nb:258,dropped:0 webvtt-parser.js:161 [log] > Parsed video,PTS:[15.873,21.593],DTS:[15.793/21.552],nb:144,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > main buffered : [15.793,20.504] webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:11/61/123/8/48409 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [log] > SN just loaded, load next one: 14970924 webvtt-parser.js:161 [log] > Loading key for 14970924 of [14970920 ,14970925],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > target start position:15 webvtt-parser.js:161 [log] > target start position not buffered, seek to buffered.start(0) 15.7925 webvtt-parser.js:161 [log] > adjust currentTime from 0 to 15.7925 webvtt-parser.js:161 [log] > media seeking to 15.793 webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > SN just loaded, load next one: 14970924 webvtt-parser.js:161 [log] > Loading 14970924 of [14970920 ,14970925],level 2, currentTime:15.793,bufferEnd:20.504 webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > media seeked to 15.793 webvtt-parser.js:161 [log] > Loaded 14970924 of [14970920 ,14970925],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14970924 of [14970920 ,14970925],level 2, cc 0 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > reparse from beginning 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > manifest codec:undefined,ADTS data:type:2,sampleingIndex:3[48000Hz],channelConfig:2 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > parsed codec:mp4a.40.5,rate:48000,nb channel:2 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916764438/3916760838:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916850838/3916847238:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3916937238/3916933638:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917023638/3917020038:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917110038/3917106438:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > last AAC PES packet truncated,might overlap between fragments 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > audio sampling rate : 48000 webvtt-parser.js:161 [log] > InitPTS for cc:0 found from video track:3914640348 webvtt-parser.js:161 [log] > main track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5] webvtt-parser.js:161 [log] > main track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.4d402a] 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [warn] > Injecting 51 audio frame @ 20.504s due to 1089 ms gap. (anonymous) @ 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 remuxAudio @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:4061 remux @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:3610 append @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:2145 pushDecrypted @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:4496 (anonymous) @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:4447 decrypt @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:5236 push @ 0c7879b5-c7bc-4983-8…b-bfe26e4aeb14:4439 (anonymous) @ 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:127 webvtt-parser.js:161 [log] > Parsed audio,PTS:[20.504,27.523],DTS:[20.504/27.523],nb:329,dropped:0 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > AVC:1089 ms hole between fragments detected,filling it 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > Video/PTS/DTS adjusted: 22709/21553,delta:1089 ms webvtt-parser.js:161 [log] > Parsed video,PTS:[22.709,28.441],DTS:[21.552/28.401],nb:144,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > main buffered : [15.793,27.523] webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:5/82/130/5/46449 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [log] > SN just loaded, load next one: 14970925 webvtt-parser.js:161 [log] > Loading key for 14970925 of [14970920 ,14970925],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > SN just loaded, load next one: 14970925 webvtt-parser.js:161 [log] > Loading 14970925 of [14970920 ,14970925],level 2, currentTime:15.889,bufferEnd:27.523 webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > Loaded 14970925 of [14970920 ,14970925],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14970925 of [14970920 ,14970925],level 2, cc 0 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917282838/3917279238:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917369238/3917365638:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917455638/3917452038:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917542038/3917538438:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > 3917628438/3917624838:unknown NAL 10 unknown NAL 11 0c7879b5-c7bc-4983-8f0b-bfe26e4aeb14:516 [log] > last AAC PES packet truncated,might overlap between fragments webvtt-parser.js:161 [log] > Parsed audio,PTS:[27.523,33.112],DTS:[27.523/33.112],nb:262,dropped:0 webvtt-parser.js:161 [log] > Parsed video,PTS:[28.481,34.201],DTS:[28.401/34.161],nb:144,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > main buffered : [15.793,33.112] webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:5/36/92/4/74032 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [log] > destroy webvtt-parser.js:161 [log] > detachMedia webvtt-parser.js:161 [log] > media source detaching webvtt-parser.js:161 [log] > main stream:IDLE->STOPPED

    And it's a stream log that does not play properly:

    [log] > attachMedia webvtt-parser.js:161 [log] > media source opened webvtt-parser.js:161 [log] > loadSource:https://ott.smsnet.pl/~0d9251a4b115385cc63815b4b36fbf08/1064/pl.m3u8?archive=0 webvtt-parser.js:161 [log] > trigger BUFFER_RESET webvtt-parser.js:161 [log] > manifest loaded,3 level(s) found, first bitrate:1500000 webvtt-parser.js:161 [log] > startLoad(-1) webvtt-parser.js:161 [log] > switching to level 2 webvtt-parser.js:161 [log] > loading playlist for level 2 webvtt-parser.js:161 [log] > main stream:STOPPED->IDLE webvtt-parser.js:161 [log] > audio tracks updated webvtt-parser.js:161 [log] > subtitle tracks updated webvtt-parser.js:161 [log] > live playlist, reload in 4931 ms webvtt-parser.js:161 [log] > level 2 loaded [14433086,14433091],duration:30 webvtt-parser.js:161 [log] > live playlist - first load, unknown sliding webvtt-parser.js:161 [log] > configure startPosition to 15 webvtt-parser.js:161 [log] > Loading key for 14433089 of [14433086 ,14433091],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > Loading 14433089 of [14433086 ,14433091],level 2, currentTime:15.000,bufferEnd:15.000 webvtt-parser.js:161 [log] > demuxing in webworker webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > Loaded 14433089 of [14433086 ,14433091],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14433089 of [14433086 ,14433091],level 2, cc 0 webvtt-parser.js:161 [log] > main:discontinuity detected webvtt-parser.js:161 [log] > main:switch detected 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > WebCrypto AES decrypt 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > WebCrypto Error, disable WebCrypto API 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > JS AES decrypt 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > reparse from beginning 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [warn] > parsing error:AAC PES did not start with ADTS header,offset:180 (anonymous) @ 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 _parseAACPES @ 98043edc-4852-42c9-a…d-d3dcaee372ab:2823 append @ 98043edc-4852-42c9-a…d-d3dcaee372ab:2040 pushDecrypted @ 98043edc-4852-42c9-a…d-d3dcaee372ab:4496 (anonymous) @ 98043edc-4852-42c9-a…d-d3dcaee372ab:4447 decrypt @ 98043edc-4852-42c9-a…d-d3dcaee372ab:5236 onWebCryptoError @ 98043edc-4852-42c9-a…d-d3dcaee372ab:5267 (anonymous) @ 98043edc-4852-42c9-a…d-d3dcaee372ab:5252 Promise rejected (async) (anonymous) @ 98043edc-4852-42c9-a…d-d3dcaee372ab:5251 Promise resolved (async) decrypt @ 98043edc-4852-42c9-a…d-d3dcaee372ab:5248 push @ 98043edc-4852-42c9-a…d-d3dcaee372ab:4439 (anonymous) @ 98043edc-4852-42c9-a6dd-d3dcaee372ab:127 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > manifest codec:undefined,ADTS data:type:2,sampleingIndex:3[48000Hz],channelConfig:2 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > parsed codec:mp4a.40.5,rate:48000,nb channel:2 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > last AAC PES packet truncated,might overlap between fragments 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > audio sampling rate : 48000 webvtt-parser.js:161 [log] > InitPTS for cc:0 found from video track:-3406136217 webvtt-parser.js:161 [log] > creating sourceBuffer(audio/mp4;codecs=mp4a.40.5) webvtt-parser.js:161 [log] > creating sourceBuffer(video/mp4;codecs=avc1.4d402a) webvtt-parser.js:161 [log] > main track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5] webvtt-parser.js:161 [log] > main track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.4d402a] webvtt-parser.js:161 [log] > Parsed audio,PTS:[15.000,15.085],DTS:[15.000/15.085],nb:4,dropped:0 webvtt-parser.js:161 [log] > Parsed video,PTS:[15.698,18.778],DTS:[15.618/18.698],nb:4,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > main buffered : webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:11/49/82/1/73905 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [log] > Loading key for 14433090 of [14433086 ,14433091],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > Loading 14433090 of [14433086 ,14433091],level 2, currentTime:20.000,bufferEnd:20.000 webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > Loaded 14433090 of [14433086 ,14433091],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14433090 of [14433086 ,14433091],level 2, cc 0 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > reparse from beginning 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [warn] > parsing error:AAC PES did not start with ADTS header,offset:70 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > manifest codec:undefined,ADTS data:type:2,sampleingIndex:3[48000Hz],channelConfig:2 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > parsed codec:mp4a.40.5,rate:48000,nb channel:2 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > last AAC PES packet truncated,might overlap between fragments 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > audio sampling rate : 48000 webvtt-parser.js:161 [log] > InitPTS for cc:0 found from video track:-3405938667 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [warn] > Injecting 173 audio frame @ 15.085s due to 3693 ms gap. webvtt-parser.js:161 [log] > main track:audio,container:audio/mp4,codecs[level/parsed]=[undefined/mp4a.40.5] webvtt-parser.js:161 [log] > main track:video,container:video/mp4,codecs[level/parsed]=[undefined/avc1.4d402a] 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > AVC:485 ms hole between fragments detected,filling it webvtt-parser.js:161 [log] > Parsed audio,PTS:[15.085,19.053],DTS:[15.085/19.053],nb:186,dropped:0 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > Video/PTS/DTS adjusted: 19258/18698,delta:485 ms webvtt-parser.js:161 [log] > Parsed video,PTS:[19.258,19.258],DTS:[18.698/18.698],nb:1,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > target start position:15 webvtt-parser.js:161 [log] > target start position not buffered, seek to buffered.start(0) 15.618333 webvtt-parser.js:161 [log] > adjust currentTime from 0 to 15.618333 webvtt-parser.js:161 [log] > media seeking to 15.618 webvtt-parser.js:161 [log] > main buffered : [15.618,19.053] webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:7/144/68/6/41949 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [log] > Loading key for 14433091 of [14433086 ,14433091],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > Loading 14433091 of [14433086 ,14433091],level 2, currentTime:15.618,bufferEnd:19.053 webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > Loaded 14433091 of [14433086 ,14433091],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14433091 of [14433086 ,14433091],level 2, cc 0 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > AAC: align PTS for overlapping frames by -5013 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [warn] > parsing error:AAC PES did not start with ADTS 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > 2 ms hole between AAC samples detected,filling it 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > AVC:6245 ms hole between fragments detected,filling it webvtt-parser.js:161 [log] > Parsed audio,PTS:[19.053,24.304],DTS:[19.053/24.304],nb:10,dropped:0 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > Video/PTS/DTS adjusted: 24954/18698,delta:6245 ms webvtt-parser.js:161 [log] > Parsed video,PTS:[24.954,34.868],DTS:[18.698/34.628],nb:2,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > main buffered : [15.618,24.304] webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:6/89/90/3/58588 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [warn] > playback stalling in high buffer @15.618333 webvtt-parser.js:161 [log] > adjust currentTime from 15.618333 to 15.718333 webvtt-parser.js:161 [log] > media seeking to 15.718 webvtt-parser.js:161 [log] > loading playlist for level 2 webvtt-parser.js:161 [log] > live playlist, reload in 4935 ms webvtt-parser.js:161 [log] > level 2 loaded [14433087,14433092],duration:30 webvtt-parser.js:161 [log] > live playlist sliding:5.000 webvtt-parser.js:161 [log] > Updating mediasource duration to 35.000 webvtt-parser.js:161 [log] > SN just loaded, load next one: 14433092 webvtt-parser.js:161 [log] > Loading key for 14433092 of [14433087 ,14433092],level 2 webvtt-parser.js:161 [log] > main stream:IDLE->KEY_LOADING webvtt-parser.js:161 [log] > main stream:KEY_LOADING->IDLE webvtt-parser.js:161 [log] > SN just loaded, load next one: 14433092 webvtt-parser.js:161 [log] > Loading 14433092 of [14433087 ,14433092],level 2, currentTime:15.718,bufferEnd:24.304 webvtt-parser.js:161 [log] > main stream:IDLE->FRAG_LOADING webvtt-parser.js:161 [log] > Loaded 14433092 of [14433087 ,14433092],level 2 webvtt-parser.js:161 [log] > main stream:FRAG_LOADING->PARSING webvtt-parser.js:161 [log] > Parsing 14433092 of [14433087 ,14433092],level 2, cc 0 798043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > AAC: align PTS for overlapping frames by -6016 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > last AAC PES packet truncated,might overlap between fragments 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > AVC:3925 ms overlapping between fragments detected webvtt-parser.js:161 [log] > Parsed audio,PTS:[24.304,24.453],DTS:[24.304/24.453],nb:7,dropped:0 98043edc-4852-42c9-a6dd-d3dcaee372ab:516 [log] > Video/PTS/DTS adjusted: 34628/34628,delta:-3925 ms webvtt-parser.js:161 [log] > Parsed video,PTS:[34.628,36.738],DTS:[34.628/36.698],nb:3,dropped:0 webvtt-parser.js:161 [log] > main stream:PARSING->PARSED webvtt-parser.js:161 [log] > main buffered : [15.618,24.453] webvtt-parser.js:161 [log] > latency/loading/parsing/append/kbps:5/35/77/1/86601 webvtt-parser.js:161 [log] > main stream:PARSED->IDLE webvtt-parser.js:161 [log] > media seeked to 15.718 webvtt-parser.js:161 [log] > destroy webvtt-parser.js:161 [log] > detachMedia webvtt-parser.js:161 [log] > media source detaching webvtt-parser.js:161 [log] > main stream:IDLE->STOPPED

    Best regards Janusz Doroszuk

    Browser: Chrome Version 62.0.3202.89

    OS: Widows 10

    Clappr Version: 0.2.78

    opened by doroszukb 26
  • Allows to automatically seek hls.js playback using 't' query parameter

    Allows to automatically seek hls.js playback using 't' query parameter

    This PR makes hls.js playback behave like html5_video and flashls playbacks.

    It's a bit out of place I think, where would be more suitable to put this code?

    Closes #1246

    opened by NicholasAsimov 26
  • Unable to run istanbul-mocha tests when referencing clappr

    Unable to run istanbul-mocha tests when referencing clappr

    Using clappr 0.2.52

    The command I use to start the tests:

    node_modules/.bin/babel-node ./node_modules/babel-istanbul/lib/cli cover node_modules/mocha/bin/_mocha -- --compilers js:babel-core/register --bail --sort --reporter spec --require test/bootstrap.js --recursive test/unit/**/**/*.spec.js
    

    But they suddenly stop running with:

    W:\Workspace\app\node_modules\clappr\src\main.js:5
    import Player from 'components/player'
    ^^^^^^
    
    SyntaxError: Unexpected token import
        at exports.runInThisContext (vm.js:53:16)
        at Module._compile (module.js:387:25)
        at Module._extensions..js (module.js:422:10)
        at Object.require.extensions.(anonymous function) [as .js] (W:\Workspace\app\node_modules\babel-register\lib\node.js:166:7)
    

    Which looks as if babel is not being used. My .babelrc has nothing special:

    {
      "presets": [
        "es2015",
        "react"
      ],
      "env": {
        "development": {
          "presets": ["react-hmre"]
        }
      },
      "plugins": [
        [
          "babel-root-import",
          {
            "rootPathPrefix": "~",
            "rootPathSuffix": "sources/modules"
          }
        ],
        [
          "babel-plugin-transform-builtin-extend",
          {
            "globals": [
              "Error"
            ]
          }
        ]
      ]
    }
    

    Do you have any ideas why this happens ?

    question 
    opened by iongion 26
  • Indicator is still showing if audioOnly is true

    Indicator is still showing if audioOnly is true

    Browser: FF 46 OS: Ubuntu 16.04 Clappr Version: 0.2.51

    Here is the code I tested on http://cdn.clappr.io:

    var playerElement = document.getElementById("player-wrapper");
    
    var player = new Clappr.Player({
      source: 'http://clappr.io/highline.mp4',
      baseUrl: '/latest',
      poster: 'http://clappr.io/poster.png',
      height: 360,
      width: 640,
      audioOnly:true
    });
    
    player.attachTo(playerElement);
    
    var variant_streams = {
      'test': [
        {
          source: 'http://<URL>/playlist.m3u8',
          mimeType: 'application/x-mpegURL'
        }
      ]
    };
    
    player.load(variant_streams['test']);
    player.play();
    
    

    Source is the URL to the variant playlist of HLS with ts-segments with audio only stream.

    I see that play button indicator is still showing while playing.

    bug 
    opened by waster 26
  • Lots of requests per second to the same .ts files

    Lots of requests per second to the same .ts files

    Browser: Chrome/Firefox

    OS: Linux

    Clappr Version: latest from cdn

    Steps to reproduce:

    When playing video I get lots of request for the same files yet the video doesn't seem to play (plays, finishes a segment, gets stuck for 1-2 segments, plays a single segment... ) Did you try to reproduce this issue at http://cdn.clappr.io/: Yes, same thing

    Playing the m3u8 file on mpv/vlc works wonderfully. Looks like a player issue.. 2016-04-06-103320_897x484_scrot

    Edit, this doesn't happen (multiple requests per file) on https://cdn.jsdelivr.net/clappr/latest/clappr.min.js but does on http://cdn.clappr.io/latest/clappr.js

    answered 
    opened by DavidVentura 26
  • Modify TS SEGMENT path

    Modify TS SEGMENT path

    What do you want to do with Clappr? Hello, I am trying to rewrite .ts segment path using js What have you tried so far? (function(fetch) { window.fetch = function(input, init) { if (varz && typeof input === "string" && input.indexOf('.ts') !== -1) { // Replace the old domain with the new domain input = input.replace(/https?://\w+.\w+.lol/, "https://" + domain); } return fetch.call(this, input, init); }; })(window.fetch);

    But this approach does not work in iOS browsers!

    question 
    opened by the-poor-gamer-124 0
  • build(deps): bump qs from 6.5.2 to 6.5.3

    build(deps): bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Using plugins DashShakaPlayback + Video360 not working

    Using plugins DashShakaPlayback + Video360 not working

    Hello,

    I am trying to use a DASH clear stream with 360ΒΊ, but it is not working as expected.

    I can use a simple DASH stream with config: plugins: [DashShakaPlayback]

    Also, i can use a mp4 360ΒΊ video with config: plugins: { container: [Video360] }

    But when trying to use both of them, on my DASH clear stream 360ΒΊ, the video plays, but not as a 360ΒΊ video. Am i missing something here?

    Regards, Daniel

    question 
    opened by daniel-dias 0
  • Design and add a Favicon to the page

    Design and add a Favicon to the page

    Is your feature request related to a problem? Please describe. Adding a favicon to the webpage.

    Describe the solution you'd like I would like to design an favicon, take review from developers and then implement it the webpage.

    Screenshots:

    The present webpage looks like this, which does not look good: image

    feature 
    opened by soustab10 2
Releases(0.4.7)
  • 0.4.7(Dec 2, 2021)

  • 0.4.6(Oct 8, 2021)

  • 0.4.5(May 14, 2021)

  • 0.4.4(Mar 29, 2021)

  • 0.4.3(Jan 19, 2021)

  • 0.4.2(Nov 19, 2020)

    • 7315cd4 Simplify bump script
    • af9801e Use clappr-core version 0.4.15
    • af9801e Use clappr-plugins version 0.4.9
    • af9801e Use clappr-hlsjs-playback version 0.5.0
    • c9cd0f9 58583f6 Update outdated dev dependencies
    • 1bf33c0 4235265 Simplify Rollup config file
    Source code(tar.gz)
    Source code(zip)
  • 0.4.1(Sep 23, 2020)

  • 0.4.0(Jun 28, 2020)

    This latest Clappr version brings a lot of breaking changes, it uses the new projects created at the Clappr.org: clappr-core and clappr-plugins.

    The main repository(https:github.com/clappr/clappr) remains the same for the sake of simplicity, but the modules are deployed into a new scope: the @clappr/player. As you can imagine, the code in @clappr/player is not relevant for most of the Clappr use cases. The current repository contains just a specific code to generate bundles after this release.

    The old versions are still available on npm and jsdelivr, but we recommend the use of the @clappr/player module.

    We re-designed the Clappr architecture to add even more modularity to maintainers and users, we'll dig a little bit about them later here. From now on, instead of having a single repository, we'll have three main projects:

    • The clappr-core: Contains all the essential features from Clappr (its plugin architecture, class abstractions, public interfaces, events handlers, etc).
    • The clappr-plugins: To manage the plugins maintained by the Clappr team.
    • The clappr-player: The entry point for those looking for the main Clappr's distribution, it was built to use this new design, aggregating all the required modules and adding some default plugins.

    The playback plugins are the components that are responsible to play the content, they used to be kept inside the main project, they are now decomposed into separate projects. This means each playback will have its repository, for instance, HLSPlayback. (https://github.com/clappr/hlsjs-playback)

    The API of these decoupled playbacks remains the same, as with any other external playbacks (like DashShakaPlayback for instance), however, the HLSPlayback is bundled by default onto the clappr-player's project, which still has the HTML5Playback as well.

    Now when you have issues about Clappr features or you're interested to contribute with Clappr core functionalities or for specific plugins, use the related repository to do so.

    One breaking change that worth mentioning is related to the use of external plugins/playbacks, you can read the list of changes @clappr/core 0.4.0 version changelog. We'll keep adding, ASAP, examples to demonstrate how to migrate plugins from the version 0.3.x to the 0.4.x on the wiki.

    We also want to create a new documentation site to aggregate all the Clappr's projects, but it's still in the conception process. If the READMEs/Wikis doesn't help with your issue, open an issue so we can help!

    We're planning to launch the 1.0.0 stable version of Clappr soon but when we do that, we'll probably write another document describing which repositories will be affected by the release.

    For any questions, contact us!

    Source code(tar.gz)
    Source code(zip)
  • 0.3.13(Jun 17, 2020)

  • 0.3.12(Mar 5, 2020)

    • #1877 Add SVG icons module
    • #1879 Repair fullscreen element detection with Firefox
    • #1880 Allow floats when set volume
    • b706346412b66750be8188b6e4e186e24ea9f924 Adjust mute toggling volume
    • 22f2f4d6e811d2c24abeb9ca9db8b74b9d3b04ac Prevent exceptions calling isFullscreen on iOS
    Source code(tar.gz)
    Source code(zip)
  • 0.3.11(Mar 5, 2020)

  • 0.3.10(Mar 5, 2020)

    • 6ca5649 Link between full and plain html5 versions on the test page
    • #1863 Fixed problem with multiple instances of clappr and fullscreen mode
    • #1869 Prevent media control to show calling configure with source
    • bff7ddd Adjust fullscreen style to avoid bootstrap issues
    Source code(tar.gz)
    Source code(zip)
  • 0.3.9(Sep 20, 2019)

  • 0.3.8(Aug 14, 2019)

  • 0.3.7(Jul 29, 2019)

  • 0.3.6(Jun 22, 2019)

  • 0.3.5(Jun 16, 2019)

    • Added Arabic translation to Strings plugin
    • Fixed HLS playback to prevent timer reference leaks
    • Fixed Container event listener naming conflict
    • Updated many dependencies to handle security issue alerts (most of those used in the build process)
    Source code(tar.gz)
    Source code(zip)
  • 0.3.4(Jun 16, 2019)

    • Fixed an issue on HTML5 Video playback in which resources would keep loading even after stop and destroy being called
    • Fixed consistency issue on Player event listeners
    • Fixed double click/tap event handlers
    • Fixed hls.js playback options backwards-compatibility (allows using hlsjsConfig directly on options root)
    Source code(tar.gz)
    Source code(zip)
  • 0.3.3(Mar 21, 2019)

  • 0.3.2(Jan 14, 2019)

  • 0.3.1(Jan 14, 2019)

  • 0.3.0(Nov 12, 2018)

    This release has a number of internal changes, so it may contain some unforeseen breaking changes. Please run some tests carefully before updating.

    There were some events and properties that were changed on the main player components (Core, Container, MediaControl). We tried to keep all changes backwards compatible, so most plugins will work unchanged.

    About the MediaControl, it has been changed into a UICorePlugin itself. So in order to replace it, one just needs to provide another plugin with the media_control name property, to be used as key for the Loader registry.

    The changes in this release pave the way for the next iteration in the Clappr architecture, which will make it easier to have a smaller codebase for creating new players (clappr-core), as well as customizing the player itself or its controls.

    Features

    • core: added the activePlayback and activeContainer properties, replacing the current getCurrentPlayback() and getCurrentContainer() respectively. Those methods were kept for backwards compatibility, but we recommend to use the new references as soon as possible.
    • media_control: it has been changed into an UICorePlugin. Now it references the activeContainer on the Core instance, so whatever references to core.mediaControl.container should be changed to core.activeContainer instead.
    • events: new events were added (CORE_ACTIVE_CONTAINER_CHANGED, CORE_MOUSE_MOVE/CORE_MOUSE_LEAVE) to replace the MediaControl related ones. The old events have been kept for backwards compatibility, but will be removed in future versions.
    Source code(tar.gz)
    Source code(zip)
  • 0.2.93(May 15, 2018)

    • new Browser fields holding more browser/os/viewport information (Clappr.Browser.{data,os,viewport})
    • merge Playback destroy into UIObject remove method
    • fix: disable error screen plugin when unnecessary or not wanted
    • fix: use i18n fallback messages when unavailable in the current locale
    • fix: reset HLS playback properly on errors (calling play now reloads the video)
    Source code(tar.gz)
    Source code(zip)
  • 0.2.92(May 14, 2018)

  • 0.2.91(May 14, 2018)

    • refactor html5_video: deleting src attribute using removeAttribute method instead delete operator #1615
    • update eslint rules 92f7451b5b13f3435ff86eba8434a1bb995096ac b92a0869304fd78d504e42b0a62dd8684a3985e0
    • run linter as part of validation step a61bd3a840f9bf26d657d52fe9b286194bafb525
    • new error component #1614
    • new error Plugin #1624
    Source code(tar.gz)
    Source code(zip)
  • 0.2.90(May 14, 2018)

    • fix: re-add removed script tags 570d8634fb4614b2221a67e36e1741a44bbab9b3
    • fix: use correct level switching event b37b7cee7f8d56c7afa72050dd23f09b8e951949
    Source code(tar.gz)
    Source code(zip)
  • 0.2.89(May 14, 2018)

    • update demo page #1599 370b7fa9bde9db7c6cf52fdb7d8262565df163f0
    • HTML5 Video: avoid empty source error on destroy #1612
    • update hls.js to 0.9.1 860a25fa31e4561b18e926381ab3ddb82e070041
    Source code(tar.gz)
    Source code(zip)
  • 0.2.88(May 14, 2018)

    • displaying seek time and duration according #EXT-X-PROGRAM-DATE-TIME #1511
    • update dependencies #1587
    • remove unnecessary files from node_modules #1588
    • enable MediaControl configuration after player creation #1593
    • update docs #1594 #1595 #1596 #1597 #1598
    • gitignore: add yarn-error.log and and package-lock.json (since we use yarn) #1601
    Source code(tar.gz)
    Source code(zip)
  • 0.2.87(May 14, 2018)

    • adaptive media API and playback base class and extended player config #1554
    • update README.md #1566
    • fix: configure ignoring options when has source attribute #1567
    • fix: reset volume/mute on configure #1568
    • main: export ClickToPausePlugin, WaterMarkPlugin, Favicon and SpinnerThreeBounce #1572
    • fix: disappearing hd indicator after render #1574
    • pass a copy of hlsjsConfig to HLS.js #1575
    • merge custom translations with default #1576
    • fix: onReady event firing with m3u8 #1578
    • create PLAYBACK_SEEK event #1580
    • fix chromeless mobile #1582
    • trigger time update after play on HLS playback #1583
    Source code(tar.gz)
    Source code(zip)
  • 0.2.86(May 14, 2018)

Owner
Clappr
An extensible media player for the web
Clappr
Music-Player - Music player application built with HTML, CSS and vanilla JavaScript

Music-Player Music player application built with HTML, CSS and vanilla JavaScrip

Karthik Umashankar 1 Feb 10, 2022
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

WordPress-Plugin-SrsPlayer SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc. Usage First, you should get your own video stream

ossrs 3 Jul 27, 2022
SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

ossrs 12 Oct 15, 2022
An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player.

Stem Player Online An online stem player. Inspired by but not affiliated with YEEZY TECH X KANO Stem Player. https://stemplayeronline.com See the proj

Luke Weiler 23 Nov 13, 2022
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation β€’ Examples β€’ Tutorials β€’ Support Us β€’ Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

Server Side Up 3.9k Jan 2, 2023
A video media file convertor using FFmpeg's web assembly port

A video media file convertor using FFmpeg's web assembly port

Atharva Marathe 2 Aug 25, 2022
The HTML5 video player for the web

Flowplayer website | demos | docs For the impatient Download Flowplayer Unzip Drop the folder under your server Minimal setup <!DOCTYPE html> <head>

Flowplayer 1.9k Dec 30, 2022
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.4k Jan 6, 2023
Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Yohan Hmaiti 2 Jan 8, 2022
Vlc-bgm - Web interface for controlling VLC remotely to use as a background music (BGM) player

vlc-bgm Web interface for controlling VLC remotely to use as a background music (BGM) player About This is designed to be used when VLC is running on

David Ralph 3 Mar 5, 2022
A custom element (web component) for the Vimeo player.

<vimeo-video> A custom element (web component) for Vimeo. The element API matches the HTML5 <video> tag, so it can be easily swapped with other media,

Wesley Luyten 4 Dec 28, 2022
A custom element (web component) for Shaka Player.

<shaka-video> A custom element (web component) for Shaka Player, which supports both HLS and DASH streaming protocols. The element API matches the HTM

Mux 6 Dec 14, 2022
Minimalistic media card for Home Assistant Lovelace UI

Mini Media Player A minimalistic yet customizable media player card for Home Assistant Lovelace UI. Inspired by Custom UI: Mini media player and custo

Karl KihlstrΓΆm 1.2k Jan 5, 2023
Icon Ultimate Media Viewer

Ultimate Media Viewer View everything. Supported Images Audio Videos Documents Models PNG MP4 MD GLB JPG WEBM PDF GIF M3U8 SVG 3GP WEBP ICO Download R

null 1 May 23, 2022
nganu bot, multi device based simple whatsapp-bot with social media downloader

nganu A Simple Multi-Device WhatsApp Bot simple whatsapp-bot using baileys-md to download social media post and many features Install set instagram se

Muhamad Ristiyanto 28 Nov 20, 2022
A Discord bot designed for taking self-hosted media server requests from users

Jellybot A Discord bot designed for taking self-hosted media server requests from users What's it for? If you're coming across this, you probably have

null 2 Mar 25, 2022
Self hosted media tracker for movies, tv shows, video games, books and audiobooks

MediaTracker Β· Self hosted platform for tracking movies, tv shows, video games, books and audiobooks, highly inspired by flox Demo https://mediatracke

null 225 Jan 3, 2023
Converts social media links to privacy-respecting FOSS alternative frontends

FossifyMyUrl Replies to messages that contain links with links to privacy-respecting FOSS alternative frontends. Requires discord.js v13 (because v14

stringsplit 4 Nov 4, 2022
Movie focused HTML5 Player

Movie focused HTML5 Player

Bruno Vieira 1.6k Dec 29, 2022