canalplus / rx-player Goto Github PK
View Code? Open in Web Editor NEWDASH/Smooth HTML5 Video Player
Home Page: https://developers.canal-plus.com/rx-player/
License: Apache License 2.0
DASH/Smooth HTML5 Video Player
Home Page: https://developers.canal-plus.com/rx-player/
License: Apache License 2.0
The Media Capabilities API is an API for querying the user agent about decoding and encoding capabilities of the device, providing better information about the display properties, and real-time feedback about playback so that adaptive streaming can better alter the quality of content based on user perceived quality. The intent of this API is to give more control for content delivery while providing a better user experience.
I think this would be great to integrate it into rx-player as it is going to be enabled by default in Chrome 66 and is already used by YouTube.
Resources:
Are you planning to add support to send cdmData on IE11/Edge?
From what i know it must be done by using old MediaKeys API.
IE 11 and Edge supports MSMediaKeys,createSession method which takes cdmData as 3rd argument (see MSMediaKeys interface) which allows to set CustomData required by some license servers.
actual pop up error alerts
hard to slide position (no knob)
hard to adjust volume ( no visual indication of max to min)
fullscreen button fails to go to a fullscreen view
lacks indication of elapsed/remaining time and length
Uncaught IndexSizeError: Failed to set the 'volume' property on 'HTMLMediaElement': The volume provided (1.00176) is outside the range [0, 1].
not sure if reactive extensions is helping out there much
Hi :),
I have some trouble playing the last seconds of my video using rx-player library.
After some research I found that there is a END_OF_PLAY constant :
/**
* Time before the end of a video (in seconds) at which the player should
* automatically stop.
* It happens often that the video gets stuck 100 to 300 ms before the end,
* especially on IE11 and Edge
* @type {Number}
*/
END_OF_PLAY: 0.5,
that limit the playing time of the streams
/**
* End-Of-Play emit when the current timing is really close to the end.
* @see END_OF_PLAY
* @type {Observable}
*/
const endOfPlay = timings$
.filter(({ currentTime, duration }) => (
duration > 0 && duration - currentTime < END_OF_PLAY
));
and later
return createAndPlugMediaSource(
url,
videoElement,
withMediaSource,
sourceBufferMemory
)
.mergeMap(startStream)
.takeUntil(endOfPlay);
I have a particular use-case that requires to read the very last frame of a video.
Could you change END_OF_PLAY into a configurable variable ?
I also noticed that a ENDED status automatically lead to a stop action. Is it possible to disable this behavior ?
For the moment, the only way to set the language in advance is through two loadVideo
options:
defaultAudioTrack
: set the first chosen audio trackdefaultTextTrack
: set the first chosen text trackThis is very limited. For example, the following cases are not handled:
we do not know which languages will be available on the content, and we have several preferred languages (e.g. italian or french):
For example, let's consider multiple multilingual contents. If a content has an italian track, we want to chose it. If it has not, but it has a french track, we want to chose it instead.
For now, we have to chose a single language in advance (e.g. "italian") and if the corresponding manifest does not have this language, there's no way of setting a fallback language. We will automatically fallback to the first track declared in the Manifest.
we're playing a multi-period content and we want to update in advance the language chosen for the next period:
Let's imagine that we're playing a live content with the current program being in english and the next one being in armenian. While we're playing the first program, we want to update our language preferences so that the next program will be in armenian if available. For the moment, we cannot - we're stuck with the single preference given at the beginning.
The current feature we're implementing to resolve those issues introduce the following constructor options:
preferredAudioTracks
: for an ordered (from the most preferred to the least) list of audio tracks languagespreferredTextTracks
: for an ordered (from the most preferred to the least) list of text tracks languagesWe're also bringing four new methods:
getPreferredAudioTracks
getPreferredTextTracks
setPreferredAudioTracks
setPreferredTextTracks
To allow those choices to be updated at any time.
To stay with a simple API, this new feature will deprecate the current intialAudioTrack
and initialTextTrack
loadVideo options.
You can follow the current development here: #477
This is scheduled for a future v3.11.0
at the moment.
Hi there,
since rc6 I have the following "bug":
If I set no setMaxBufferAhead value, the player is stuck at LOADING state, and under the network tab in the dev tools I can see, that the download of the .m4v and .m4a files is canceled.
If I set setMaxBufferAhead to sth around 10 - 20 for testing, it works until it downloads the next .mpd file. The state of the player is then still PLAYING, but there is no video anymore.
Everything worked fine in rc4.
This is my nginx config:
live on;
dash on;
dash_playlist_length 30s;
dash_fragment 5s;
This is maybe not a bug in rx-player but rather my nginx config.
Best
CLEMARC
The rx-player should be able to manage XLINKS in a DASH MPD.
This might be useful with future ad-insertion use cases.
Hello,
I trying to play a widevine protected DASH stream.
I didn't understand what I should return in the getLicense method.
Any help would be be highly appreciated.
player.loadVideo({
url: "//media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p.mpd",
transport: "dash",
autoPlay: false,
keySystems: [
{
type: "widevine",
getLicense(message, messageType) {
console.log("Message");
var msg = message;
console.log("Message type: " + messageType);
return new Promise((resolve, reject) => {
return fetch("https://drm-widevine-licensing.axtest.net/AcquireLicense", {
body: msg,
headers: {
"X-AxDRM-Message": 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.4lWwW46k-oWcah8oN18LPj5OLS5ZU-_AQv7fe0JhNjA',
},
method: "POST"
})
.then((response) => {
if (response.ok) {
response.arrayBuffer().then(function(buffer) {
resolve(buffer);
});
} else {
reject(new Error('error'))
}
}, error => {
reject(new Error(error.message))
})
});
},
}
]
});
Hey. Thanks for this player it's working really good. I load a custom smooth link to your demo page but it's taking the wrong duraion. My video lenght is : 01:47:34 but it's looking like 01:01:33. Is this problem related with my content ? I tried another video which has a 04:34:58 lenght but your demo player saying it's 04:04:57. Could you check it please ? Thanks!
And i should ask you something. I don't any experience with website and html players. Can i make this player work locally on my pc ? And can i send command it with c# without touching any controller ? For example go to 00:10:15 i think it can be done with javascript ? I have private wowza streaming server so i need player too. Thanks again!
The Rx-Player should support a "directfile" mode, where it would be possible to manage mp4/webm or even audio files directly on the browser (by just setting their URL on the given videoElement
)
This is a feature often asked by people outside canalplus, but we might also need it in-house
in the future.
Why imposing the Promise implementation? Wouldn't it be better to let the user use whatever he wants to polyfill it and just use the standard Promise API inside rx-player? This would allow people to use other libs like bluebird, Q or RSVP.
Current Readme.md is not showing that rx-player can be installed from npm repo directly with npm i --save rx-player
IE11 / Edge don't seem to support natively WebVTT subtitles, so the best solution is to create a vtt-parser, as we have implemented for sami or ttml
We are starting to implement the new API for media capabilities, but we found a problem in the implementation of it.
Firefox Developer Edition, Version 63.0b4 (64 bits)
With the given config pass in second parameter to isDRMSupported
:
isDRMSupported("com.widevine.alpha", config)
{
"initDataTypes": [
"cenc"
],
"videoCapabilities": [
{
"contentType": "video/mp4;codecs=\"avc1.4d401e\"",
"robustness": "HW_SECURE_ALL"
},
{
"contentType": "video/mp4;codecs=\"avc1.4d401e\"",
"robustness": "HW_SECURE_DECODE"
},
{
"contentType": "video/mp4;codecs=\"avc1.4d401e\"",
"robustness": "HW_SECURE_CRYPTO"
},
{
"contentType": "video/mp4;codecs=\"avc1.4d401e\"",
"robustness": "SW_SECURE_DECODE"
},
{
"contentType": "video/mp4;codecs=\"avc1.4d401e\"",
"robustness": "SW_SECURE_CRYPTO"
}
],
"audioCapabilities": [
{
"contentType": "audio/mp4;codecs=\"mp4a.40.2\"",
"robustness": "HW_SECURE_ALL"
},
{
"contentType": "audio/mp4;codecs=\"mp4a.40.2\"",
"robustness": "HW_SECURE_DECODE"
},
{
"contentType": "audio/mp4;codecs=\"mp4a.40.2\"",
"robustness": "HW_SECURE_CRYPTO"
},
{
"contentType": "audio/mp4;codecs=\"mp4a.40.2\"",
"robustness": "SW_SECURE_DECODE"
},
{
"contentType": "audio/mp4;codecs=\"mp4a.40.2\"",
"robustness": "SW_SECURE_CRYPTO"
}
],
"persistentState": "optional"
}
We are expecting that isDRMSupported
to return true
.
isDRMSupported
return false
with the above config.
However, when we don't pass the config, isDRMSupported
is returning true
as expected.
I also noticed, that you accept an object
type as config in second parameter of isDRMSupported
that can lead to misunderstood since the native function navigator.requestMediaKeySystemAccess(keySystem, configuration)
accept an array as config.
Hello!
Are you exposing your types?
I'm using rx-player and Typescript but I had to silent Type missing error by declaring the rx-player
in my modules.d.ts.
We are having some problems with disableTextTrack
when using HTMLTextSourceBuffer
.
Reproduce by:
The issue is that the TextBufferManager
keeps the first cue when remove is called.
We think that getCuesBefore
is incorrect, because it will return the first cue on getCuesBefore(cues, 0)
.
Here's an attempt at a solution https://github.com/SVT/rx-player/blob/fix/get-cues-before/src/core/source_buffers/text/html/buffer_manager.ts#L82.
Also, see this commit which changed the logic 8 months ago: 91995c3
What are your thoughts?
Hello all,
In our stream, the traf box was built by putting tfxd and tfrf boxes before the trun box:
traf
tfhd
tfxd
tfrf
trun
[...]
As a result, it was not possible to play Smooth Streaming streams.
We solve it by changing the order of the boxes (tfxd and tfrf after trun)
The problem may be located in src/transports/smooth/mp4_utils.ts:
// reads [moof[mfhd|traf[tfhd|trun|..]]]
const tfdtlen = newtfdt.length;
const mfhdlen = be4toi(oldmoof, 8);
const traflen = be4toi(oldmoof, mfhdlen + 8);
const tfhdlen = be4toi(oldmoof, mfhdlen + 8 + 8);
const trunlen = be4toi(oldmoof, mfhdlen + 8 + 8 + tfhdlen);
Also note that CMAF specification (ISO/IEC 23000-19) recommends to put tfdt after tfhd (7.3.1 CMAF Boxes)
Even if this box may not be used for Smooth, it may be present.
Hope this helps,
--
sym39
In the current code, if a DASH adaptation/representation with a SegmentTimeline index is encountered, it immediately infer that we are based on
It thus does not calculate the number of the segment, leading to replace any undefined
.
Example of a content for which this behavior causes problems:
https://storage.googleapis.com/shaka-live-assets/player-source.mpd
Currently latest available version on npmjs.org is v1.4.2 And in this repo latest release it 2.3.2
Is there any particular reason why npmjs.org "latest" version is 1.4.2 and not 2.3.2?
When you try to play one smooth streaming media after another, There is no playback and there are QuotaExceededErrors in the console
The DASH-IF IOPs specify a specific "trickmodes" AdaptationSet which allows to define I-Frame only tracks. This is originally meant to be displayed when using features like fast-forward or rewind (to imitates VHS behavior).
With the RxPlayer, we do not really have this need now. What we propose instead is to use those same tracks to generate helpful thumbnails to be displayed while seeking.
Please note that this is still an idea in a really early phase, not a fixed goal for a future release.
GET http://hss-live-m3-aka.canal-plus.com/live/hss/alaune-hd/hd-clair.isml/Manifest 403 (Forbidden)
I also got this alert: manifest: no compatible representation for this adaptation
Hi,
I would like to use the player with a dash manifest, and need to acquire a license with a server given. The DRM is playready.
I have the custom data, the server url and the manifest, however I couldn't read the video, by following the wiki.
I have tried to provide a promise to make the request to the server for the license, but I haven't been able to play the video. I notice however that the player does retrieve the video length.
Could you give some advice on how I could do this ? Unfortunately, I didn't find anything else that Silverlight players to acquire the license, meaning I can't see how it is implementend.
Thanks
On Firefox, in native text track mode, when setting no text track when a track is active :
The cue which was displayed when the action is performed doesn't disappear and stays until a new text track is initialized.
This request has been blocked; the content must be served over HTTPS.
Why not post real online demo ?
Hi, I have some trouble using playerStates
of rx-player library.
I work on an app which used to work with the one-player-core library derivated from the V2 rx-player.
I have followed the upgrading documentation, and made some tweaks to make the new player work :
positionUpdate
instead of currentTimeChange
timeFragment
by startAt
However, I get a strange issue; some contents streamed (through Smooth Streaming) on the player never end :
The player doesn't reach the ENDED
state but loop on the BUFFERING
state instead.
Weirdly, the videoElement itself never reaches the ended state, while the content used to work on the previous version of the player.
Do you have any idea of which can explain this new behavior ?
Hi,
I'm trying to play one of the dash manifests provided in the React demo app in a raw javascript application of my own.
I've included the rx-player source from dist/rx-player.min.js
.
index.html
<!doctype HTML>
<html>
<head>
<title>Rx-Player Demo</title>
<meta charset="utf-8" />
</head>
<body>
<video controls id="video-player">
</video>
<script src="javascript/vendor/rx-player.min.js"></script>
<script src="javascript/application.js"></script>
</body>
</html>
application.js
var player = new RxPlayer({videoElement: document.getElementById('video-player')})
var params = {
url: "http://dash-vod-aka-test.canal-bis.com/test/pub-cube-s/index.mpd",
transport: "dash",
keySystems: null,
autoPlay: true
};
player.loadVideo(params);
The player doesn't play the content (no video output).
The video duration (1:04) is correctly displayed on the video controls.
The players seems to correctly load the data chunks on page loading and when I move the time slider:
GET "http://dash-vod-aka-test.canal-bis.com/test/pub-cube-s/index.mpd".
GET "http://dash-vod-aka-test.canal-bis.com/test/pub-cube-s/le-cube-s-output_video_300kbps.mp4".
GET "http://dash-vod-aka-test.canal-bis.com/test/pub-cube-s/le-cube-s-output_audioFR_96kbps.mp4".
But the player seems stuck in the LOADING
state.
Player.getDebug() information can be found here.
Browser info:
The provided LIVE dash manifest (http://live.unified-streaming.com/loop/loop.isml/loop.mpd?format=mp4&session_id=25020
) works fine.
Am I missing something?
Thanks.
Hey. I'm trying full demo on my local machine but i can't seek the video with IExplorer 11.0.9600.17728 on Windows 8.1 x64. Everything is working perfectly pause, play, mute, volume controls etc but i can't seek the video. IExplorer 11 is supported am i wrong ? Thanks!
Edit : Seeking only works with DirectFile mod.
Edit 2 : I have no idea why but standalone demo isn't start playing on iexplorer. But it works with chrome. I really need help about iexplorer problems. Because i wanna use it with c# webbrowser control.
Hi, I'm a logo designer, I saw your project and I can make a free logo for your project. So, what do you think?
Please add test/fixtures/isml.protection.xml to the repository or remove smooth parser protection tests.
When i try to play this manifest
SSW 720p H264 CLEAR (SuperSpeedWay, 720p, H264 AAC, no encryption)
rx-player fails with:
stream: video element MEDIA_ERR code 3
Tested with Chrome 49
On RxPlayer documentation page link to Player Events resolves to 404 error.
Hi Today I tried to start the application in local but getting below error.
'RXP_ENV' is not recognized as an internal or external command,
operable program or batch file.
Can you please let me know how can I resolve this issue?
Sometimes, for tests purposes, we need do deactivate adaptative features
With desktop Safari, Chrome and others starting to block playback for HTML5 <audio>
and <video>
"without user action" similar to iOS Safari and mobile Chrome, with some special rules and exceptions for major sites like YouTube et al.
The Webkit announcement. Important note: users can disable auto-play entirely, even for silent videos.
https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/
The Chromium project is following the same policy from version M66 Stable.
https://sites.google.com/a/chromium.org/dev/audio-video/autoplay
On iOS Safari 11 the media element's method .play()
returns following:
Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Anyway, I get to catch this while using rx-player ?
The recommended way by Apple is:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
Now that our last major period of refactoring is finished, we should provide documentation about the code's architecture to help contributions.
Take frame drop into account in adaptive bitrate.
Take MPD@minimumUpdatePeriod into account to limit the frequency of manifest-refreshing.
For now, we always assume it is equal to 0 (we refresh the manifest as we need it).
This may be needed on future canalplus targets.
getVideoBitrate
api returns the currently downloaded bitrate instead of the currently played bitrate.
We should make it clear in the documentation or provide two distinct APIs.
Chrome can be locked indefinitely when playing a mix of encrypted/unencrypted contents.
This happens mostly when the first content played is unencrypted.
It is due to the fact that we create a MediaKeys
instance - which allows to decrypt content - only on the first encrypted content encountered and Chrome does not seem to work well when "attaching" a MediaKeys to the media element while content has already begun.
A first attempt has been made by creating and attaching the MediaKeys at the same time the Manifest
is loaded - even if the content loaded is not encrypted, but IE11 sadly throw in those cases.
From there, we're going towards two possible solution:
For now, only the first Period is considered in DASH manifests.
Please however note that:
Hi,
I am considering using your library but it really hard to follow the code without documentation.
It would be great to have some documentation to understand what each file is doing.
An Architecture section in the wiki would be great aswell.
I got an error from jest, that indicate that a variable in the modular build is exported but have not been declared.
Here is the error:
<projects>/node_modules/rx-player/dist/_esm5.processed/compat/constants.js: Exporting local "ICompatVTTCue", which is not declared.
export { HTMLElement_, ICompatVTTCue, MediaKeys_, MediaSource_, READY_STATES, VTTCue_, isFirefox, isIE, };
When I go to the concerned file, indeed ICompatVTTCue
is not declared.
Thank's :)
Hi!
We've noticed that the player will sometimes pause to build a buffer. This seems to happen when the speed_manager.js
receives a stall event.
This is a console output from a Firefox-session where autoPlay
is set to false
:
Stream: canplay event initial_seek_and_play.js:62
Stream: Stream is loaded. stream_loader.js:104
API: playerStateChange event LOADED index.js:1645
API: new clock tick
Object { bufferGap: 5.983333333333333, buffered: TimeRanges, currentRange: {…}, currentTime: 0.05666666666666667, duration: 3516.84, ended: false, paused: true, playbackRate: 1, readyState: 1, seeking: true, … }
clock.js:218
Buffer: update downloading queue audio representation_buffer.js:171
SpeedManager: Pause playback to build buffer speed_manager.js:55
API: playerStateChange event SEEKING index.js:1645
Buffer: update downloading queue video representation_buffer.js:171
API: new clock tick
Object { bufferGap: 5.983333, buffered: TimeRanges, currentRange: {…}, currentTime: 0.056667, duration: 3516.84, ended: false, paused: true, playbackRate: 0, readyState: 3, seeking: false, … }
clock.js:218
Buffer: update downloading queue audio representation_buffer.js:171
SpeedManager: Resume playback speed 1 speed_manager.js:62
API: playerStateChange event PAUSED
In this example, the video is first considered LOADED
. For some reason, it will then perform a seek which will cause a stalled
event. When the buffer is ready, the player will go to a PAUSED
state.
I would expect the player state to stay LOADED
until the user press play?
Here is some additional output from the debug window in the reference player:
2018-11-21T13:15:25.114Z - A new content is Loading.
2018-11-21T13:15:25.183Z - Audio Bitrate changed to 48000
2018-11-21T13:15:25.187Z - Video Bitrate changed to 300000
2018-11-21T13:15:25.431Z - The new content has been loaded.
2018-11-21T13:15:25.459Z - The current content is seeking
2018-11-21T13:15:25.484Z - The current content is not seeking anymore
Thanks!
Hello :)
Thank's for the new release especially concerning the MediaCapabilitiesProber, it's precisely what we expected!
However, we are encountering a major bug concerning the fairplay drm on Safari 12.0.1.
Even if we are using the hls.js player which is completed separated from the rx-player, just the fact to import:
import { mediaCapabilitiesProber } from 'rx-player/experimental/tools';
Break the support of drm on the hls player, an exception is throw:
This problem is encountered only since the latest release (3.9.0) and only concern Safari, it works well on IE11 and others browsers...
Seems a very strange issue but an important one.
Thank's :)
The DASH-IF IOPs 4.1 now gives recommendations for thumbnail tracks in a MPD (clause 6.2.6).
We should implement it as a POC to test thumbnail tracks on live contents.
This might be needed in-house and would be great for the community anyway.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.