Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Paul Berberian
    @peaBerberian
    Ok ok. It all depends on the thing we're converting and the data the CDM expects. Here, does it looks like a readable string after the atob call ? If not, it's probably just binary data.
    meladon1337
    @meladon1337

    Hey, i want to setup a background video on my page which wont effect pagespeed. The Video will be around 35mb so i think i have to "stream" it instead of normally add it via a video element.
    Is the rx-player capable of beeing used as background video?

    And a big questionamrk for me is: how do the videos get splitted in chunks? Is this a Task for the serverside? Or does the player do this?

    Paul Berberian
    @peaBerberian

    Hi,
    First, yes the RxPlayer can be used to play video in the background (through the videoElement argument given on instantiation which will here be a HTMLVideoElement placed by your application in the background).
    For your questions about how does the videos get splitted into chunks, it is done server-side. Usually it is done with the help of an application called a "packager" which takes a simple media file (like an mp4) in input and gives a Manifest files and its associated chunks in output. For an example, you can look at the shaka-packager (https://github.com/google/shaka-packager), an open-source packager.

    But all this is most-of-all useful when you have multiple audio and video qualities, multiple tracks, live contents and/or DRM.
    For a simple use-case like the one you're describing (a single on-demand video quality), you're probably better off just adding it "normally" through the src of the video element. In most browsers, it should be able to stream it (and not wait for the whole video to be downloaded) as you want it. You just have to make sure that the format and codecs of your video is supported by all the browsers and platforms you want to target.
    Also, if you want to autoplay it when the user enters your page you might also want to play it muted, as some browsers (like chrome) will sometimes block autoplay for video with sounds.

    meladon1337
    @meladon1337

    Hi,
    First, yes the RxPlayer can be used to play video in the background (through the videoElement argument given on instantiation which will here be a HTMLVideoElement placed by your application in the background).
    For your questions about how does the videos get splitted into chunks, it is done server-side. Usually it is done with the help of an application called a "packager" which takes a simple media file (like an mp4) in input and gives a Manifest files and its associated chunks in output. For an example, you can look at the shaka-packager (https://github.com/google/shaka-packager), an open-source packager.

    But all this is most-of-all useful when you have multiple audio and video qualities, multiple tracks, live contents and/or DRM.
    For a simple use-case like the one you're describing (a single on-demand video quality), you're probably better off just adding it "normally" through the src of the video element. In most browsers, it should be able to stream it (and not wait for the whole video to be downloaded) as you want it. You just have to make sure that the format and codecs of your video is supported by all the browsers and platforms you want to target.
    Also, if you want to autoplay it when the user enters your page you might also want to play it muted, as some browsers (like chrome) will sometimes block autoplay for video with sounds.

    so i dont have pagespeed disadvantages, if i use the video just with the video tag?

    Paul Berberian
    @peaBerberian
    I don't think so. At the very least, full video loading should not be a pre-condition for the loading of the page. So here, I don't think there will be a profit to gain from chunking the content.
    Orlando David Mir Fonseca
    @orlando.mir_gitlab
    Hello ,
    I am new to react and using this plugin, how can I put in the control bar the option for the user to select the resolution of the video I am playing from a local dash server. Regards.
    Paul Berberian
    @peaBerberian

    Hi,

    First, I should say that the RxPlayer does not have an integrated control bar by default, nor a UI implementation.
    It is just a player library with an exposed (lower-level) API. The UI is usually implemented by the application importing the RxPlayer.
    We do have a demo page with an exposed UI, but this is just an example to showcase what the RxPlayer does. It is not exported by the RxPlayer package.

    If you want to create a UI where you let the user choose the quality of the video, you can use the getAvailableVideoBitrates method, which will list every video bitrates available for the current video track (or the current video AdaptationSet, in DASH parlance) and setVideoBitrate to set a video bitrate.
    You can find more information on those methods in the API documentation: https://developers.canal-plus.com/rx-player/doc/pages/api/index.html

    I stay available if you have more questions.

    Orlando David Mir Fonseca
    @orlando.mir_gitlab
    Thanks for your answer, I will see the documentation, I will expose any questions here, greetings
    Orlando David Mir Fonseca
    @orlando.mir_gitlab
    Hello, the player through the addEvent function of the player, can you hear the onClick event or does the player bring one?
    Paul Berberian
    @peaBerberian

    Hi,
    You don't have to go through the RxPlayer for browser-defined events such as "click".
    For example, if you want to catch when the user click on the media element, you can just add a "click" event handler directly to the element. With React and JSX, it would be a "onClick" prop directly on the <video> element in the JSX. The RxPlayer will have no problem with that as a click on the page doesn't change anything about the content that is being played.

    We do have multiple events that can be used as a replacement of browser events (for example "seeking"). In that case, both have their own definition but it's usually better to rely on the RxPlayer events.

    Orlando David Mir Fonseca
    @orlando.mir_gitlab

    Hi I have two problems:
    first:
    When I initialize my player I hear the event player.addEventListener ("availableVideoTracksChange", onVideoTrack); and this returns three tracks, well up to there, when the user selects one of the displayed tracks, it throws me the following exception error: No content loaded
    at Player.setVideoTrack (rx-player.js: 49011)
    at onChangeValueQuality (Player.js: 312)
    at HTMLUnknownElement.callCallback (react-dom.development.js: 188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js: 237)
    at invokeGuardedCallback (react-dom.development.js: 292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js: 306)
    at executeDispatch (react-dom.development.js: 389) and I don't know why this happens.
    The second:
    when I want to change the playBackRate

    const onSetPlayBackRate = (e) => {
    const value = parseFloat (e.target.value);
    console.log ("onSetPlayBackRate:" + value);
    player.setPlaybackRate (value);
    };
    it does not produce any change, if you could help me gracefully in advance

    Paul Berberian
    @peaBerberian

    Hi,
    For the "No content loaded" error, this is weird. It means that no content is playing when you're calling setVideoTrack.
    Are you sure the video is still playing when you call that API? (You can check by calling getPlayerState).

    For setPlaybackRate, it should not be a problem whether a content is loaded or not, the last content loaded should inherit the last rate set.
    Does getPlaybackRate returns the playback rate you have set? What do you mean by "does not produce any change", the content is still playing at a rate of x1?

    Orlando David Mir Fonseca
    @orlando.mir_gitlab
    yes, it stays at 1x speed, I'm going to try getPlayerState and tell you that it works for me, thanks for your answer.
    When I get the player's status it returns STOPPED, I don't understand why? The content is playing or at least it's what you see, if you could help me, the file is loaded from a local dash server which has a dash file already converted Could that have something to do with it?
    Paul Berberian
    @peaBerberian
    My guess is that some fatal error happened. Can you retrieve the error? (either player.getError() or the "error" event)
    Orlando David Mir Fonseca
    @orlando.mir_gitlab
    In fact, I start converting the video on the server and transmit it live and in the transmission I try to change setVideoTrack but first I ask the player its status and it keeps returning Stopped, is this possible? I already put this player.addEventListener ("Error" , function (err) {
    console.log (The player crashed: $ {err.message});
    });
    but no error appears in the console, only the one that gave me before when I tried to change the videotrack No content loaded
    at Player.setVideoTrack (rx-player.js: 49011)
    at onChangeValueQuality (Player.js: 318), any suggestions ?, regards.
    Paul Berberian
    @peaBerberian
    Another theory is that the player is "ending" at some point (after which it automatically stops).
    Can you check and log the "playerStateChange" event? If it goes through the "ENDED" state, there might be something in the Manifest/MPD that makes it thinks the content has ended.
    Orlando David Mir Fonseca
    @orlando.mir_gitlab

    I am subscribed to the event
    player.addEventListener ("playerStateChange", onChageState); I'm going to send you a sample of the browser console so you can see that before trying to change the track it never goes through stopped, or ended, greetings.

    initPlayer player: [object Object]
    Player.js: 327 New video tracks: (3) [{…}, {…}, {…}]
    Chat.js: 182 This will run after 1 second!
    Player.js: 185 onChageState: LOADED
    Player.js: 195 The new content is loaded and ready to be played
    Player.js: 185 onChageState: PLAYING
    Player.js: 202 The content is currently playing
    Player.js: 185 onChageState: SEEKING
    Player.js: 212 The content is still seeking, waiting for new data
    Player.js: 185 onChageState: PLAYING
    Player.js: 202 The content is currently playing
    7Chat.js: 182 This will run after 1 second!
    Player.js: 314 set valueQuality: 2
    Player.js: 316 player state: STOPPED
    Player.js: 321 Error: No content loaded
    at Player.setVideoTrack (rx-player.js: 49011)
    at onChangeValueQuality (Player.js: 319)
    at HTMLUnknownElement.callCallback (react-dom.development.js: 188)

    Paul Berberian
    @peaBerberian

    Hm, that's difficult to say here.
    Something is making the player to stop, somewhere...
    There is a few way the player can retrieve itself in the STOPPED state. From what I can tell right now, we may be in one of the following situation

    • you re-loaded a video through loadVideo
    • you called stop or dispose
    • a fatal error happened

    Can you enable RxPlayer's logs (RxPlayer.LogLevel = "DEBUG")? At the very least we will see if it's another loadVideo call or an error

    Orlando David Mir Fonseca
    @orlando.mir_gitlab

    I am using RxPlayer with reactjs, I am new to this world of reactjs, to initialize the rxPlayer as follows

    const initPlayer = () => {
    player = new RxPlayer ({videoElement: document.getElementById ("video")});
    video = player.getVideoElement ();
    videoContainer = video.parentNode;
    console.log ("initPlayer player:" + player);
    player.loadVideo ({
    url: "http: // localhost: 8000 / output / streams / video1 / dash.mpd",
    transport: "dash",
    autoPlay: autoplay,
    });

         player.addEventListener ("playerStateChange", onChageState);
         player.addEventListener ("availableVideoTracksChange", onVideoTrack);
         player.addEventListener ("Error", function (err) {
             console.log (`The player crashed: $ {err.message}`);
         });
     };
    
     useEffect (() => {
         console.log ("useEffect initPlayer ()");
         initPlayer ();
    
     }, [channelData, autoplay]); Could she be doing something wrong? Regards.
    Paul Berberian
    @peaBerberian
    You listen to the "Error" event, you should listen for "error" instead. Perhaps we're just not seeing the corresponding error.
    Orlando David Mir Fonseca
    @orlando.mir_gitlab

    Traducir del: inglés
    468/5000
    do the following:
    const onChangeValueQuality = (e) => {
    console.log ("set valueQuality:" + e.target.value);
    const value = player.getPlayerState ();
    console.log ("player state:" + value);

         try {
             player.setVideoTrack (e.target.value);
         } catch (e) {
             const error = player.getError ();
             console.log ("error:" + error + "code:");
             console.log (e);
    
         }
    
     };

    and error tells me it is null.

    Orlando David Mir Fonseca
    @orlando.mir_gitlab
    Good I am trying to implement the navigation bar, does the player have an event that is executed when the getPosition changes to update my bar?
    Orlando David Mir Fonseca
    @orlando.mir_gitlab

    Good, I need help, I don't know what else to do, I have the following problem whether it loads dash content or directfile when I am going to advance to a position in the player or I am going to change the resolution, it tells me the following error, Error: player: no content loaded
    at Player.seekTo (rx-player.js: 48473)
    at onMouseClick (Player.js: 334)
    at HTMLUnknownElement.callCallback (react-dom.development.js: 188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js: 237)
    at invokeGuardedCallback (react-dom.development.js: 292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js: 306)
    at executeDispatch (react-dom.development.js: 389)
    at executeDispatchesInOrder (react-dom.development.js: 414)
    at executeDispatchesAndRelease (react-dom.development.js: 3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js: 3287)
    at forEachAccumulated (react-dom.development.js: 3259)
    at runEventsInBatch (react-dom.development.js: 3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js: 3514)
    at handleTopLevel (react-dom.development.js: 3558)
    at batchedEventUpdates $ 1 (react-dom.development.js: 21871)
    at batchedEventUpdates (react-dom.development.js: 795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js: 3568)
    at attemptToDispatchEvent (react-dom.development.js: 4267)
    at dispatchEvent (react-dom.development.js: 4189)
    at unstable_runWithPriority (scheduler.development.js: 653)
    at runWithPriority $ 1 (react-dom.development.js: 11039)
    at discreteUpdates $ 1 (react-dom.development.js: 21887)
    at discreteUpdates (react-dom.development.js: 806)
    at dispatchDiscreteEvent (react-dom.development.js: 4168)

    However, the video is reproduced, the curious thing is that before performing the action I ask for the status of the player and it tells me that it is Stopped, however I am subscribed to the player's events and in Stopped I have an alert to see if it passes through the but I never run the alert, and it goes through playing, I don't know why this happens, if you could help me, greetings

    Paul Berberian
    @peaBerberian

    does the player have an event that is executed when the getPosition changes to update my bar?

    We do have a positionUpdate event but the frequency at which it is sent might not be the one you want.
    If that's the case you can call getPosition with an interval while also relying on the player's states (through playerStateChange) to know when the user is seeking etc. (or even the seeking and seeked events).

    For the "no content loaded" error, it seems again that the RxPlayer thinks that the content is stopped when the seeking is done.
    It seems there is something that makes the player stop somewhere.
    Legal
    @morganlegal
    Hi I'm trying to develop a custom segmentLoader. I've tried with the example from the docs with an mpd file and 2 mp4 files (one audio track and one video track). As long as I'm using the default segment loader, this works fine. But as soon as I use the custom one only the first segments from each track are loaded. Then it happens nothing. No error.
    Here's the code of the loader:
    const segmentLoader =  (infos, callbacks) => {
    
      console.log('customSegmentLoader', infos)
      const xhr = new XMLHttpRequest();
      const sendingTime = performance.now();
    
      xhr.onload = function onXHRLoaded(r) {
        if (200 <= xhr.status && xhr.status < 300) {
          const duration = performance.now() - sendingTime;
          const size = r.total;
          const data = xhr.response;
          callbacks.resolve({ duration, size, data });
        } else {
          const err = new Error("didn't work");
          err.xhr = xhr;
          callbacks.reject(err);
        }
      };
    
      xhr.onprogress = function onXHRProgress(event) {
        const currentTime = performance.now();
        callbacks.progress({ type: "progress",
          value: { duration: currentTime - sendingTime,
            size: event.loaded,
            totalSize: event.total } });
      };
    
      xhr.onerror = function onXHRError() {
        const err = new Error("didn't work");
        err.xhr = xhr;
        callbacks.reject(err);
      };
    
      xhr.open("GET", infos.url);
      xhr.responseType = "arraybuffer";
    
      const range = infos.segment.range;
      if (range) {
        if (range[1] && range[1] !== Infinity) {
          xhr.setRequestHeader("Range", `bytes=${range[0]}-${range[1]}`);
        } else {
          xhr.setRequestHeader("Range", `bytes=${range[0]}-`);
        }
      }
    
      xhr.send();
    
      return () => {
        xhr.abort();
      };
    };
    Am I missing something or doing something wrong?
    Paul Berberian
    @peaBerberian

    Hi,
    This should work... I tested it locally on the RxPlayer's demo page and I had no problem.
    Maybe it's a problem with the content.

    When you say "only the first segments" is loaded, you mean how many segments for each track? If it's just one, it is possible - for whatever reason - that we are only loading the initialization segment.

    Legal
    @morganlegal
    hello, yes 1 segment for audio and 1 for video
    the same content plays perfectly with the default segmentLoader
    when I put the Log.Level to "WARNING" I got the following message : Stream: Uninitialized index with an already loaded initialization segment
    If i console.log representation.index.isInitialized() it stays false forever
    Paul Berberian
    @peaBerberian
    Yes I got it...
    It's a little technical but basically you're playing a content which depends on an index segment, we also have to download it here.
    On the initialization segment (the first requested one), there is a supplementary property on infos.segment, called indexRange (set to undefined for the other segments)
    You have to also request that second byte range and concatenate both of those infos (range first, indexRange second).
    Very often, the indexRange comes just after the range, in those cases you can very easily do:
    xhr.setRequestHeader("Range", `bytes=${range[0]}-${indexRange[1]}`);
    Legal
    @morganlegal
    OK, I'll take a lokk at that and tell you if it fixes the issue
    Paul Berberian
    @peaBerberian
    To stay simple, a solution that should work on almost every cases (I say "almost" but it's pretty safe, I don't think you will see a situation where it doesn't work) would be to do a single request requesting both through a bigger byte-range:
    if (segment.range !== undefined) {
      let rangeStart, rangeEnd;
      if (segment.indexRange !== undefined) {
        rangeStart = Math.min(segment.range[0], segment.indexRange[0]);
        rangeEnd = Math.max(segment.range[1], segment.indexRange[1]);
      } else {
        rangeStart = segment.range[0];
        rangeEnd = segment.range[1];
      }
      xhr.setRequestHeader("Range", `bytes=${rangeStart}-${rangeEnd}`);
    }
    Legal
    @morganlegal
    It's working perfectly. Thanks a lot! You saved my day
    Paul Berberian
    @peaBerberian
    No problem !
    Legal
    @morganlegal
    hello @peaBerberian , Me again. Is it possible to increase the size of loaded segments in order to lower down the number of requests to the server? I saw MINIMUM_SEGMENT_SIZE in config but is it possible to set this value through the API? Or will I have to build a custom version of the player?
    Paul Berberian
    @peaBerberian

    MINIMUM_SEGMENT_SIZE is not really linked to requests, it is a configuration value related to how the RxPlayer calculate which segments are currently in the buffer, it will not help you here.

    So here you basically want to request "bigger segments" so there are fewer segment requests ?
    The size of segments is actually dictated by the content (more specially in your case, by the index segment). Technically, the RxPlayer could load multiple contiguous segments at a time instead of just one at a time, but this is not an usual feature and this is not something handled by the player today.

    If you control the content packaging process, it would be better to just generate bigger segments on that side.

    Legal
    @morganlegal
    Yes I would like "bigger segments" so there are fewer segment requests. And yes I manage the packaging process so I will investigate on this
    Josef Andersson
    @jandersson-svt
    Hi all, I have a basic question I guess. When having multiple adapationsets with contenttype audio, one main, others alternate how does rxplayer choose which one to use as default. I guess from my little test video that it is orderbased, ie i chooses the first audio-adapationset? I have a testlink to an mpd here if someone wants to see the behaviour. https://svt-vod-8d.akamaized.net/d0/se/20200926/5ff9aa85-f866-42d2-ad8d-bc974f198f44/dash-full.mpd?alt=https%3A%2F%2Fswitcher.cdn.svt.se%2F5ff9aa85-f866-42d2-ad8d-bc974f198f44%2Fdash-full.mpd
    I would have thought it should choose "main", but it seems to take the first in top-down order, even though it is an alternate
    Paul Berberian
    @peaBerberian

    Hi,

    Yes, we're just considering the "main" role for the video AdaptationSet for now.
    The reason we did not generalize at first that logic is that though that behavior (choosing the "main" AdaptationSet by default) was clearly defined for video contents in the DASH-IF IOPs it was a little unclear if that also concerned other AdaptationSet types.

    So, until now, we went for sorting based on:

    1. the selectionPriority attribute if available.
    2. the order in the MPD
      For AdaptationSet other than video.

    Though we do encounter many contents signalling a "main" audio AdaptationSet and the DASH-IF IOP tells us that this is a possibility.
    Consequently, I'm not against adding that behavior for audio contents. The main question I'm having now is what to prioritize between a "main" role and the selectionPriority attribute - but maybe I can find an answer by examining more closely the DASH-IF IOPs.
    I will try to schedule that improvement for the next release (for in 3-4 weeks?).

    Josef Andersson
    @jandersson-svt
    Thank you very much @peaBerberian !! That answer verifies it, until further I will add a workaround based on your current sorting priorities. I will also scan through the DASH-IF IOP tomorrow and see if I can make out something. All the best!
    Paul Berberian
    @peaBerberian

    3.9.5.2 does seem to say that we should first base ourselves on the content of Role, though it just says that we should just exclude all "alternative" first - which is weird because the role is actually called alternate.
    By reading what other players are doing (dash.js and the shaka-player) it looks that both are using the main role when there are multiple AdaptationSet possible. This looks to me like a sane default - and by reading the DASH-IF IOP I guess the role takes precedence on the selectionPriority attribute,

    That does not look too hard to implement so we will try to include it in the next release.

    Miltosh
    @Miltosh
    Hi to everyone. I have a question about rx-player. How I can mark color some parts on my timeline (like youtube marks ads yellow color on timeline)
    Guillaume Renault
    @grenault73

    Hello @Miltosh, 

RxPlayer is a javascript library implementing a streaming video player. It handles the core feature of playing content and provides an API.


    However, the library doesn’t implement a UI. For now, the RxPlayer demo page UI cannot be exported or reused. So, the RxPlayer’s users usually build an HTML web page above the lib, from scratch. Of course, it implies that you may have total control of the way to implement timelines, buttons, control panels, inputs, etc.

If you intend to build the UI from scratch, we may help you get the info you need for displaying correctly playback info, etc. For know, you can check our API here https://developers.canal-plus.com/rx-player/doc/pages/api/index.html.