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
    The bug :p
    Paul Berberian
    @peaBerberian
    I found the problem
    It's actually a little funny.
    When you call document.querySelector('video') in the script part of your svelte file, the video tag seems to not be in the DOM yet
    So, that code returns null
    When the RxPlayer is instanciated without a video tag, it creates one.
    So we actually end up with two video tags, the one created by the RxPlayer (which is not in the DOM, but which you can get through rxPlayer.getVideoElement()), and the one in the DOM (but not linked to the RxPlayer)
    Paul Berberian
    @peaBerberian
    The one which plays is not added to the DOM, so we cannot see it, but audio can still play (funny behavior btw)
    When you were putting the video element in full screen, you were actually putting the wrong one (through which nothing plays)
    Mathieu Devos
    @mathieudevos
    Hmmm, should we use the "onMount" thing then found here: (I'm very new to Svelte, as in, this is my first time playing with it) https://svelte.dev/tutorial/bind-this
    Paul Berberian
    @peaBerberian
    Yep, I ended up on the same link, that must be it!
    Mathieu Devos
    @mathieudevos
    Cross linking this as well from Svelte:
    antony: your use of document.querySelector is probably unecessary and may cause issues though
    antony: prefer bind:this={variableName} to access the element from your JS
    I'll play around with it tomorrow and see if I come up with a solution.
    Paul Berberian
    @peaBerberian
    :rocket:
    Mathieu Devos
    @mathieudevos
    Tried the onMount thing, but doing things pretty wrong it seems
    Mathieu Devos
    @mathieudevos
    @peaBerberian - managed to get a minimal solution working with Svelte:
    <script>
        export let videoUrl;
    
        import RxPlayer from 'rx-player';
        import { onMount } from 'svelte';
    
        let video;
    
        onMount(() => {
            const rxPlayer = new RxPlayer({
                videoElement: document.querySelector('video'),
            });
    
            rxPlayer.loadVideo({
                url: videoUrl,
                autoPlay: false,
                transport: 'dash',
            });
        });
    </script>
    
    <video bind:this={video}/>
    Paul Berberian
    @peaBerberian
    Nice! OK thanks, this was interesting.
    Shouldn't the video element also available through the video variable (to remove the querySelector)?
    Mathieu Devos
    @mathieudevos
    Yeah, seems to also work with videoElement: video. But I have no understanding as why :D
    Paul Berberian
    @peaBerberian
    I think bind:this actually "binds" the variable video (declared in the <script> part) to the element on which it is applied.
    You could have called it foobar and set bind:this={foobar} it also would have worked.
    Mathieu Devos
    @mathieudevos
    Any way to get the css of the <video> to take the max width available and fit the height to the aspect ratio of the video?
    Mathieu Devos
    @mathieudevos

    Right now I have the following:

    <div>
      <video />
    <div>
    
    <style>
      div {
              width: 92%;
            min-width: 1280px;
            min-height: 740px;
            max-width: 3840px;
            max-height: 2180px;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 0 auto;
            padding: 1em;
            text-align: center;
    
            background: #414141;
            box-shadow: 0px 20px 14px 8px rgba(0, 0, 0, 0.58);
            color: #fdfdfd;
    
            font-size: 14pt;
      }
      video {
        width: 100%;
      }
    </style>

    But this just shows a small quality video very small (it's just centered)

    Paul Berberian
    @peaBerberian
    I'm very far from an expert in CSS but I found your code sufficient in my case to achieve that: https://imgur.com/a/xzqWK9E
    Generally speaking, just setting the width or the height should conserve the aspect ratio of the video
    Mathieu Devos
    @mathieudevos
    Even if the video-preload is small?
    Paul Berberian
    @peaBerberian
    Yes, that is the case in my image where I've chosen the lowest video quality
    Mathieu Devos
    @mathieudevos
    Forgot I had it wrapped in a div and that was causing issues, thanks. I'm a first timer on front-end
    So this is asboslutely fun for me :joy:
    Paul Berberian
    @peaBerberian
    no problem! :D
    Julien
    @juleur
    hi
    Paul Berberian
    @peaBerberian
    hi :)
    Julien
    @juleur
    does videoElement apply player bottom bar controls ?
    Paul Berberian
    @peaBerberian

    I'm not sure I understand the question completely so I will try to give a general answer. As I don't know your background, I'll begin from the browser and end with the RxPlayer, and I hope you will find an answer to your question.

    By default, a <video> element will not display any control in the UI. But browsers provide them when you add add the controls "boolean attribute" to it. A boolean attribute is just an attribute without a value. When set it is equivalent to a true value and when not set, it is equivalent to a false. So you can just add "controls" in the list of the video element's attributes like this: <video controls /> to display your default browser's controls.
    Those will be different from browser to browser but they will usually support the usual play/pause buttons, seeking bar and more. This is well documented in the standard here: https://html.spec.whatwg.org/multipage/media.html#user-interface

    What most applications are doing - instead of just relying on the browser's default UI - is to create their own. This is down simply by adding other elements to the page. The interaction with the video by interacting with them is entirely handled through JavaScript in that case (e.g. in JavaScript, videoElement.pause() will pause playback).

    This is what can be seen in the demo page of the RxPlayer: https://developers.canal-plus.com/rx-player/
    Here controls are entirely defined through JavaScript. It is actually a code specific for our demo, located in the demo directory at the root of the project.

    We had to define those in a demo page because the RxPlayer in itself doesn't define controls. It is a more low-level concept of a player in a sense than how the general public would imagine it. The RxPlayer only download video, audio and subtitles and display those in a video element. It relies on streaming formats (like DASH) to do so, and it provides APIs to allow an application to have control over its behavior such as playing/pausing, changing the current audio track...
    It is then the task of the application to create its own UI - such as controls - over this.
    Often the application calling the RxPlayer (or other player libraries like it) is also called a "player" - this does not help comprehension but that's how it is!

    The RxPlayer is in fact used in several products which do not have the same interface at all. Each one of them define their own elements in the page and usually link those to the RxPlayer API.

    Rag Patel
    @raag_1599_twitter
    Hello
    So, I want to understand the "getLicense" method for DRM configuration. Tutorial example shows it takes one argument i.e. "challenge" while description say it has two arguments i.e. message and messageType. Are this "challenge" and "message" one and the same. https://developers.canal-plus.com/rx-player/doc/pages/tutorials/contents_with_DRM.html#subchapter-The%20license-fetching%20logic
    @peaBerberian reply asap.
    Paul Berberian
    @peaBerberian

    Yes getLicense is actually called each time the CDM (the module decrypting the content inside the browser) gives us a "message" for the currently-playing content.
    In the great majority of cases, this will only be for licence requests.
    But technically, it can be for other types (https://www.w3.org/TR/encrypted-media/#dom-mediakeymessagetype) for example an "individualization-request". Again, you most likely won't need this and noone we work with do need this.

    This is why the tutorial example only make use of the first argument. When a message comes, you'll most likely never encounter any other cases that one just necessitating a license request.
    We're aware that this can be confusing. This callback was written that way and documented as such long ago and we did not change its interface to not break the API. We're thinking about splitting this callback into multiple APIs for a future major version.

    And yes the "challenge" argument is named "message" in the example. I'll rename it so it's easier to understand, thanks.
    Rag Patel
    @raag_1599_twitter

    Yes getLicense is actually called each time the CDM (the module decrypting the content inside the browser) gives us a "message" for the currently-playing content.
    In the great majority of cases, this will only be for licence requests.
    But technically, it can be for other types (https://www.w3.org/TR/encrypted-media/#dom-mediakeymessagetype) for example an "individualization-request". Again, you most likely won't need this and noone we work with do need this.

    This is why the tutorial example only make use of the first argument. When a message comes, you'll most likely never encounter any other cases that one just necessitating a license request.
    We're aware that this can be confusing. This callback was written that way and documented as such long ago and we did not change its interface to not break the API. We're thinking about splitting this callback into multiple APIs for a future major version.

    Thanks and Regards

    Rag Patel
    @raag_1599_twitter
    Hi
    Can you help me with this error:
    Uncaught EncryptedMediaError: EncryptedMediaError (KEY_UPDATE_ERROR) TypeError: Failed to execute 'update' on 'MediaKeySession': Rejected with system code (89)
    Paul Berberian
    @peaBerberian
    Hi,
    It appears that the license, as returned by getLicense's Promise, is found to be invalid by the CDM (part of the browser decrypting the content). Can you look at the response from the license server (it may be not in the right format - like wrapped in an object - or just not the right response at all - like an error message) ?
    On what platform/browser are you on?
    Rag Patel
    @raag_1599_twitter
    Browser is Chrome
    vended license is like this CAUSwgUKvAIIAxIQCuQRtZRasVgFt7DIvVtVHBi17OSpBSKOAjCCAQoCggEBAKU2UrYVOSDlcXajWhpEgGhqGraJtFdUPgu6plJGy9ViaRn5mhyXON5PXmw1krQdi0SLxf00FfIgnYFLpDfvNeItGn9rcx0RNPwP39PW7aW0Fbqi6VCaKWlR24kRpd7NQ4woyMXr7xlBWPwPNxK4xmR/
    I used this for proper conversion:
    var binaryString = $wnd.atob(vended_license);
    var len = binaryString.length;
    var bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
    }
    console.log("Succeed");
    resolve(bytes.buffer);
    I used to console.log for debugging
    Rag Patel
    @raag_1599_twitter
    Any follow-up?
    Paul Berberian
    @peaBerberian
    Hm you will have a problem here if the corresponding string does not only contain ASCII data.
    We may want to test with a proper Base64->Binary conversion. Can you check with the right function (base64ToBytes) at: https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727 ?
    Paul Berberian
    @peaBerberian
    (the problem I see, is that you're calling charCodeAt which is going to output UTF16 code points, 16 bits by 16 bits. Then you're putting each of them as a single element in an Uint8Array. This means that any value superior to 255 will be truncated here. You also will be removing every other byte.
    This logic seems only valid to transform an UTF-16 string to an ASCII or UTF8 (only containing ASCII data) array of bytes .
    If we're sure we're not in that case, we could be using Uint16Array instead but I'm unsure if there can be a loss when converting to a string with atob when the outputted value is not a valid UTF16 string.
    Here doing the base64->Binary conversion ourselves allow to not rely on string conversion in the meantime.)
    Rag Patel
    @raag_1599_twitter
    I didn't see any character out of 0-255 range
    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?