Skip to content

Commit d6ed706

Browse files
dsilhavydsilhavy
authored
Fix/doc and naming changes (Dash-Industry-Forum#4648)
* Fix CMCD parameters in JSDoc * Add JSDoc for getDvrWindow * Sort Mediaplayer methods by name * Rename timeAsUTC method * Fix number of Representations in Low Latency sample * Documentation changes * Update webpack * Remove some files from JSDoc * Update README.md to include new links to documentation * Fix typo in settings * Update package-lock.json * Fix version issue in network interceptor sample
1 parent ade0ffd commit d6ed706

19 files changed

+121
-1256
lines changed

‎README.md‎

Lines changed: 39 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,66 @@
1-
21
<img src="https://cloud.githubusercontent.com/assets/2762250/7824984/985c3e76-03bc-11e5-807b-1402bde4fe56.png" width="400">
32

4-
[Join #dashjs on Slack!](https://join.slack.com/t/dashif/shared_invite/zt-egme869x-JH~UPUuLoKJB26fw7wj3Gg)
5-
6-
## Migration from v3.x to v4.0
7-
If you are migrating from dash.js v3.x to dash.js v4.x please read the migration document found [here](https://github.com/Dash-Industry-Forum/dash.js/wiki/Migration-to-dash.js-4.0).
8-
93
## Overview
10-
A reference client implementation for the playback of MPEG DASH via JavaScript and [compliant browsers](http://caniuse.com/#feat=mediasource). Learn more about DASH IF Reference Client on our [wiki](https://github.com/Dash-Industry-Forum/dash.js/wiki).
11-
12-
If your intent is to use the player code without contributing back to this project, then use the MASTER branch which holds the approved and stable public releases.
13-
14-
If your goal is to improve or extend the code and contribute back to this project, then you should make your changes in, and submit a pull request against, the DEVELOPMENT branch. Read our [CONTRIBUTION.md](https://github.com/Dash-Industry-Forum/dash.js/blob/development/CONTRIBUTING.md) file for a walk-through of the contribution process.
15-
16-
All new work should be in the development branch. Master is now reserved for tagged builds.
17-
18-
## Demo and reference players
19-
All these reference builds and minified files are available under both http and https.
20-
21-
### Samples
22-
Multiple [dash.js samples](https://reference.dashif.org/dash.js/latest/samples/index.html) covering a wide set of common use cases.
23-
24-
### Reference players
25-
The released [pre-built reference players ](http://reference.dashif.org/dash.js/) if you want direct access without writing any Javascript.
26-
27-
The [nightly build of the /dev branch reference player](http://reference.dashif.org/dash.js/nightly/samples/dash-if-reference-player/index.html), is pre-release but contains the latest fixes. It is a good place to start if you are debugging playback problems.
28-
29-
30-
### CDN hosted files
31-
The latest minified files have been hosted on a global CDN and are free to use in production:
32-
33-
- [dash.all.min.js](http://cdn.dashjs.org/latest/dash.all.min.js)
34-
- [dash.all.debug.js](http://cdn.dashjs.org/latest/dash.all.debug.js)
35-
36-
In addition, all the releases are available under the following urls. Replace "vx.x.x" with the release version, for instance "v3.1.0".
37-
38-
- [http://cdn.dashjs.org/vx.x.x/dash.all.min.js](http://cdn.dashjs.org/v3.1.0/dash.all.min.js)
39-
- [http://cdn.dashjs.org/vx.x.x/dash.all.debug.js](http://cdn.dashjs.org/v3.1.0/dash.all.debug.js)
40-
414

5+
dash.js is a JavaScript based implementation for the playback of MPEG DASH content in browser based
6+
environments that support the [Media Source Extensions](https://w3c.github.io/media-source/) and
7+
the [Encrypted Media Extensions](https://www.w3.org/TR/encrypted-media/).
428

439
## Documentation
44-
Full [API Documentation](http://cdn.dashjs.org/latest/jsdoc/module-MediaPlayer.html) is available describing all public methods, interfaces, properties, and events.
45-
46-
For help, join our [Slack channel](https://dashif-slack.azurewebsites.net), our [email list](https://groups.google.com/d/forum/dashjs) and read our [wiki](https://github.com/Dash-Industry-Forum/dash.js/wiki).
47-
48-
## Tutorials
4910

50-
Detailed information on specific topics can be found in our tutorials:
11+
To get started, check out our [documentation](https://dashif.org/dash.js/) that includes
12+
a [quickstart guide](https://dashif.org/dash.js/pages/quickstart/index.html) , [usage instructions](https://dashif.org/dash.js/pages/usage/index.html)
13+
and [contribution guidelines](https://dashif.org/dash.js/pages/developers/how-to-contribute.html).
5114

52-
* [Low latency streaming](https://github.com/Dash-Industry-Forum/dash.js/wiki/Low-Latency-streaming)
53-
* [UTCTiming Clock synchronization](https://github.com/Dash-Industry-Forum/dash.js/wiki/UTCTiming---Clock-synchronization)
54-
* [Digital Rights Management (DRM) and license acquisition](https://github.com/Dash-Industry-Forum/dash.js/wiki/Digital-Rights-Management-(DRM)-and-license-acquisition)
55-
* [Buffer and scheduling logic](https://github.com/Dash-Industry-Forum/dash.js/wiki/Buffer-and-Scheduling-Logic)
15+
## Hosted Examples
5616

57-
## Getting Started
17+
* [Reference Player](https://reference.dashif.org/dash.js/latest/samples/dash-if-reference-player/index.html)
18+
* [Samples](https://reference.dashif.org/dash.js/latest/samples/index.html)
5819

59-
The standard setup method uses javascript to initialize and provide video details to dash.js. `MediaPlayerFactory` provides an alternative declarative setup syntax.
20+
## Quickstart
6021

61-
### Standard Setup
22+
A very basic example on how to use dash.js in your application can be found below:
6223

63-
Create a video element somewhere in your html. For our purposes, make sure the controls attribute is present.
64-
```html
65-
<video id="videoPlayer" controls></video>
66-
```
67-
Add dash.all.min.js to the end of the body.
68-
```html
69-
<body>
70-
...
71-
<script src="yourPathToDash/dash.all.min.js"></script>
72-
</body>
73-
```
74-
Now comes the good stuff. We need to create a MediaPlayer and initialize it.
75-
``` js
76-
77-
var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
78-
var player = dashjs.MediaPlayer().create();
79-
player.initialize(document.querySelector("#videoPlayer"), url, true);
80-
81-
```
82-
83-
When it is all done, it should look similar to this:
8424
```html
8525
<!doctype html>
8626
<html>
87-
<head>
88-
<title>Dash.js Rocks</title>
89-
<style>
90-
video {
91-
width: 640px;
92-
height: 360px;
93-
}
94-
</style>
95-
</head>
96-
<body>
97-
<div>
98-
<video id="videoPlayer" controls></video>
99-
</div>
100-
<script src="yourPathToDash/dash.all.min.js"></script>
101-
<script>
102-
(function(){
103-
var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
104-
var player = dashjs.MediaPlayer().create();
105-
player.initialize(document.querySelector("#videoPlayer"), url, true);
106-
})();
107-
</script>
108-
</body>
27+
<head>
28+
<title>dash.js Rocks</title>
29+
<style>
30+
video {
31+
width: 640px;
32+
height: 360px;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div>
38+
<video id="videoPlayer" controls></video>
39+
</div>
40+
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
41+
<script>
42+
(function () {
43+
var url = "https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd";
44+
var player = dashjs.MediaPlayer().create();
45+
player.initialize(document.querySelector("#videoPlayer"), url, true);
46+
})();
47+
</script>
48+
</body>
10949
</html>
11050
```
11151

112-
### Module Setup
113-
114-
We publish dash.js to [npm](https://www.npmjs.com/package/dashjs). Examples of how to use dash.js in different module
115-
bundlers can be found in the [`samples/modules`](https://github.com/Dash-Industry-Forum/dash.js/tree/development/samples/modules) directory.
116-
117-
### MediaPlayerFactory Setup
118-
119-
An alternative way to build a Dash.js player in your web page is to use the MediaPlayerFactory. The MediaPlayerFactory will automatically instantiate and initialize the MediaPlayer module on appropriately tagged video elements.
120-
121-
Create a video element somewhere in your html and provide the path to your `mpd` file as src. Also ensure that your video element has the `data-dashjs-player` attribute on it.
122-
```html
123-
<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
124-
</video>
52+
## Contact
12553

126-
```
54+
Please raise any issue directly on [Github](https://github.com/Dash-Industry-Forum/dash.js/issues).
12755

128-
Add dash.all.min.js to the end of the body.
129-
```html
130-
<body>
131-
...
132-
<script src="yourPathToDash/dash.all.min.js"></script>
133-
</body>
134-
```
56+
You can also find us on [Slack!](https://join.slack.com/t/dashif/shared_invite/zt-egme869x-JH~UPUuLoKJB26fw7wj3Gg) and
57+
on [Google Groups](https://groups.google.com/g/dashjs).
13558

136-
When it is all done, it should look similar to this:
137-
```html
138-
<!doctype html>
139-
<html>
140-
<head>
141-
<title>Dash.js Rocks</title>
142-
<style>
143-
video {
144-
width: 640px;
145-
height: 360px;
146-
}
147-
</style>
148-
</head>
149-
<body>
150-
<div>
151-
<video data-dashjs-player autoplay src="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd" controls>
152-
</video>
153-
</div>
154-
<script src="yourPathToDash/dash.all.min.js"></script>
155-
</body>
156-
</html>
157-
```
59+
## License
15860

159-
## Quick Start for Developers
160-
161-
1. Install Core Dependencies
162-
* [install nodejs](http://nodejs.org/)
163-
2. Checkout project repository (default branch: development)
164-
* ```git clone https://github.com/Dash-Industry-Forum/dash.js.git```
165-
3. Install dependencies
166-
* ```npm install```
167-
4. Build, watch file changes and launch samples page, which has links that point to reference player and to other examples (basic examples, captioning, ads, live, etc).
168-
* ```npm run start```
169-
170-
171-
### Other Tasks to Build / Run Tests on Commandline.
172-
173-
* Build distribution files (minification included)
174-
* ```npm run build```
175-
* Build and watch distribution files
176-
* ```npm run dev```
177-
* Run linter on source files (linter is also applied when building files)
178-
* ```npm run lint```
179-
* Run unit tests
180-
* ```npm run test```
181-
* Generate API jsdoc
182-
* ```npm run doc```
183-
184-
### Troubleshooting
185-
* In case the build process is failing make sure to use an up-to-date node.js version. The build process was successfully tested with node.js version 20.10.0.
186-
187-
### License
18861
dash.js is released under [BSD license](https://github.com/Dash-Industry-Forum/dash.js/blob/development/LICENSE.md)
18962

190-
### Tested With
63+
## Tested With
19164

19265
[<img src="https://cloud.githubusercontent.com/assets/7864462/12837037/452a17c6-cb73-11e5-9f39-fc96893bc9bf.png" alt="Browser Stack Logo" width="300">](https://www.browserstack.com/)
19366
&nbsp;&nbsp;

‎contrib/akamai/controlbar/ControlBar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
182182
};
183183

184184
var _onPlayStart = function (/*e*/) {
185-
setTime(displayUTCTimeCodes ? self.player.timeAsUtc() : self.player.timeInDvrWindow());
185+
setTime(displayUTCTimeCodes ? self.player.timeAsUTC() : self.player.timeInDvrWindow());
186186
updateDuration();
187187
togglePlayPauseBtnState();
188188
if (seekbarBufferInterval) {
@@ -193,7 +193,7 @@ var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) {
193193
var _onPlayTimeUpdate = function (/*e*/) {
194194
updateDuration();
195195
if (!seeking) {
196-
setTime(displayUTCTimeCodes ? player.timeAsUtc() : player.timeInDvrWindow());
196+
setTime(displayUTCTimeCodes ? player.timeAsUTC() : player.timeInDvrWindow());
197197
if (seekbarPlay) {
198198
seekbarPlay.style.width = Math.max((player.timeInDvrWindow() / player.duration() * 100), 0) + '%';
199199
}

‎index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1450,7 +1450,7 @@ declare namespace dashjs {
14501450

14511451
duration(): number;
14521452

1453-
timeAsUtc(): number;
1453+
timeAsUTC(): number;
14541454

14551455
getActiveStream(): Stream | null;
14561456

0 commit comments

Comments
 (0)