<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}/>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)
Generally speaking, just setting the width or the height should conserve the aspect ratio of the video
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.
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
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.
Yes
getLicenseis 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
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?
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);
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 ?
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.)
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?
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.
Hi,
First, yes the RxPlayer can be used to play video in the background (through thevideoElementargument 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?
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.