Skip to content

Commit 3cad517

Browse files
misteroneillbrandonocaseymister-ben
authored
Add Video.js 8 and VHS 3 blog post and update guides (#158)
Co-authored-by: Brandon Casey <2381475+brandonocasey@users.noreply.github.com> Co-authored-by: mister-ben <git@misterben.me>
1 parent d209009 commit 3cad517

File tree

8 files changed

+411
-246
lines changed

8 files changed

+411
-246
lines changed

‎src/components/BlogComponents/BlogPost.jsx

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,28 @@ const Meta = styled.div`
6262
}
6363
`;
6464

65-
const Text = styled.div`
65+
// TODO: This should be joined with the Article component from the GuidesView.jsx
66+
const Article = styled.div`
6667
h1 {
68+
font-size: 32px;
69+
}
70+
71+
h2 {
6772
font-size: 28px;
6873
}
6974
75+
h3 {
76+
font-size: 24px;
77+
}
78+
79+
h4 {
80+
font-size: 20px;
81+
}
82+
83+
h5, h6 {
84+
font-size: 18px;
85+
}
86+
7087
h1, h2, h3, h4, h5, h6 {
7188
margin-bottom: 1em;
7289
}
@@ -92,6 +109,32 @@ const Text = styled.div`
92109
margin-bottom: 2.25em;
93110
}
94111
112+
.note {
113+
background-color: #f9f9f9;
114+
padding: 1em;
115+
margin-bottom: 2em;
116+
}
117+
118+
.note :last-child {
119+
margin-bottom: 0;
120+
}
121+
122+
table {
123+
margin-bottom: 2em;
124+
}
125+
126+
th, td {
127+
padding: 1em;
128+
border: 2px solid #ebebeb;
129+
}
130+
131+
th {
132+
background-color: #f9f9f9;
133+
color: rgba(0, 0, 0, 0.3);
134+
text-align: center;
135+
text-transform: uppercase;
136+
}
137+
95138
${VideoWrapper} {
96139
margin-bottom: 3em;
97140
}
@@ -122,12 +165,12 @@ const BlogPost = ({ post: { frontmatter, body, fields } }) => (
122165
<span>{frontmatter.author.name}</span>
123166
<span>{frontmatter.date}</span>
124167
</Meta>
125-
<Text>
168+
<Article>
126169
<TitleLink to={fields.slug}><h1>{frontmatter.title}</h1></TitleLink>
127170
<WithMdxComponents contentSlug={fields.slug}>
128171
<MDXRenderer>{body}</MDXRenderer>
129172
</WithMdxComponents>
130-
</Text>
173+
</Article>
131174
</TextCol>
132175
</Wrapper>
133176
);

‎src/components/GuidesComponents/GuidesView.jsx

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,27 @@ import WithMdxComponents from '../WithMdxComponents';
77
import VideoWrapper from '../VideoWrapper';
88
import TableOfContents from '../TableOfContents';
99

10-
const Text = styled.div`
10+
const Article = styled.div`
1111
h1 {
12+
font-size: 32px;
13+
}
14+
15+
h2 {
1216
font-size: 28px;
1317
}
1418
19+
h3 {
20+
font-size: 24px;
21+
}
22+
23+
h4 {
24+
font-size: 20px;
25+
}
26+
27+
h5, h6 {
28+
font-size: 18px;
29+
}
30+
1531
h1, h2, h3, h4, h5, h6 {
1632
margin-bottom: 1em;
1733
}
@@ -37,6 +53,32 @@ const Text = styled.div`
3753
margin-bottom: 2.25em;
3854
}
3955
56+
.note {
57+
background-color: #f9f9f9;
58+
padding: 1em;
59+
margin-bottom: 2em;
60+
}
61+
62+
.note :last-child {
63+
margin-bottom: 0;
64+
}
65+
66+
table {
67+
margin-bottom: 2em;
68+
}
69+
70+
th, td {
71+
padding: 1em;
72+
border: 2px solid #ebebeb;
73+
}
74+
75+
th {
76+
background-color: #f9f9f9;
77+
color: rgba(0, 0, 0, 0.3);
78+
text-align: center;
79+
text-transform: uppercase;
80+
}
81+
4082
${VideoWrapper} {
4183
margin-bottom: 3em;
4284
}
@@ -46,11 +88,11 @@ const GuidesView = ({ guide: { tableOfContents, frontmatter, body, fields } }) =
4688
<>
4789
<h1>{frontmatter.title}</h1>
4890
<TableOfContents contents={tableOfContents} />
49-
<Text>
91+
<Article>
5092
<WithMdxComponents contentSlug={fields.slug}>
5193
<MDXRenderer>{body}</MDXRenderer>
5294
</WithMdxComponents>
53-
</Text>
95+
</Article>
5496
</>
5597
);
5698

‎src/mdx-pages/blog/videojs-8-and-vhs-3.mdx

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
title: Video.js 8 and Video.js HTTP Streaming 3
3+
author:
4+
name: Pat O'Neill
5+
github: misteroneill
6+
date: 2022-08-22 14:49:43
7+
tags:
8+
---
9+
10+
<div class="note">
11+
<p><b>NOTE:</b> For details on migrating from Video.js 7.x to 8.x, please see <a href="/guides/videojs-7-to-8/">our migration guide</a>!</p>
12+
</div>
13+
14+
We are very excited to announce that Video.js 8.0 and Video.js HTTP Streaming (VHS) 3.0 are available!
15+
16+
While these releases are constituted of a lot of housecleaning tasks, there are some changes of interest to users of the Video.js platform.
17+
18+
## Contributors
19+
20+
Before we dive into the software changes, open source doesn't work without _people_. Huge thanks to everyone who contributed pull requests to these releases!
21+
22+
* [@alex-barstow](https://github.com/alex-barstow)
23+
* [@Essk](https://github.com/Essk)
24+
* [@gesinger](https://github.com/gesinger)
25+
* [@gjanblaszczyk](https://github.com/gjanblaszczyk)
26+
* [@gkatsev](https://github.com/gkatsev)
27+
* [@harisha-swaminathan](https://github.com/harisha-swaminathan)
28+
* [@hugorogz](https://github.com/hugorogz)
29+
* [@KangXinzhi](https://github.com/KangXinzhi)
30+
* [@kchang-brightcove](https://github.com/kchang-brightcove)
31+
* [@mister-ben](https://github.com/mister-ben)
32+
* [@misteroneill](https://github.com/misteroneill)
33+
* [@phloxic](https://github.com/phloxic)
34+
* [@roman-bc-dev](https://github.com/roman-bc-dev)
35+
36+
## What's Changed?
37+
### Video.js
38+
39+
The [complete CHANGELOG is available](https://github.com/videojs/video.js/blob/c8fd5bbcdebacdb2e1f46ae8be02ef6c91797262/CHANGELOG.md), but here are some highlights:
40+
41+
* No longer transpiled into ES5 for compatibility with older browsers like Internet Explorer
42+
* Updated to VHS 3.0
43+
* Enabled the `sourceset` event by default, `enableSourceset: false` can be used to turn this off.
44+
* Added new `TitleBar` component, which is not visible in the UI by default _([see below for details](#new-videojs-titlebar-component))_. As a result, we moved the `BigPlayButton` component to the center of the player by default
45+
* `addClass` and `removeClass` methods can now be given multiple class names
46+
* Clicking the playback rate button now opens the menu rather than changing the playback rate
47+
* Deprecated many old top-level utility methods in favor of utility methods stored on objects _([see below for details](#new-videojs-utility-objects))_
48+
* Invalid event types will now throw errors instead of log warnings
49+
* Change `addRemoteTextTrack`'s `manualCleanup` option to default to `false`
50+
* Removed the `videojs.extend()` function
51+
* Removed the `firstplay` event
52+
* Removed the `retryOnError` option and made this behavior the default
53+
* Removed the ability to set `aria-*`, `role`, and `type` attributes via the `props` argument of `createEl` methods
54+
* Removed remaining references and logic related to Flash and SWF
55+
* Remove fallbacks for missing flexbox support
56+
* Removed IE-specific code
57+
58+
Overall, the minfied and gzipped size of Video.js is **reduced by around 3%**. We will continue to look for ways to optimize the size of Video.js.
59+
60+
### VHS
61+
62+
The [complete CHANGELOG is available](https://github.com/videojs/http-streaming/blob/afb1ff700e490d131df4aea66d746cf72794caae/CHANGELOG.md), but here are some highlights:
63+
64+
* No longer transpiled into ES5 for compatibility with older browsers like Internet Explorer.
65+
* Naming changes for more inclusive language (e.g. "master" becomes "main", "blacklist" becomes "exclude", "whitelist" becomes "include").
66+
* Skip detected gaps immediately instead of waiting the duration of the gap before skipping.
67+
* Removed the deprecated `smoothQualityChange` method.
68+
* Improved behavior when encountering `output-restricted` event handling.
69+
* Cleaned up parameters of `excludePlaylist`.
70+
71+
Overall, the minfied and gzipped size of VHS is **reduced by around 4%**. We will continue to look for ways to optimize the size of VHS.
72+
73+
### Browser/Device Support
74+
75+
With these releases, our new browser/device targets are generally focused on the last 3 major versions of so-called "evergreen" browsers:
76+
77+
* Chrome
78+
* Firefox
79+
* Safari
80+
* Edge (Chromium, not Legacy)
81+
82+
However, with Video.js being used in more contexts than just desktop and mobile web, like Smart TVs or OTT devices, we have an additional minimum support threshold for _Chromium-based browsers version 53 and newer_. This grants support for:
83+
84+
* [webOS TV](https://webostv.developer.lge.com/develop/specifications/web-engine/) 4.x and newer
85+
* [Tizen](https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html) 2018 models and newer
86+
87+
## New Video.js `TitleBar` Component
88+
89+
The new `TitleBar` component will show a UI element across the top of the player which displays the title and/or description of the current media in the player. The `TitleBar` will not show if no title or description is provided.
90+
91+
### Using `loadMedia` to Populate the `TitleBar`
92+
93+
The easiest way to provide a title and/or description is to use your player's `loadMedia` method:
94+
95+
```js
96+
player.loadMedia({
97+
artist: 'Disney',
98+
album: 'Oceans',
99+
title: 'Oceans',
100+
description: 'Journey in to the depths ... and race with dolphins at play.',
101+
poster: 'https://vjs.zencdn.net/v/oceans.png',
102+
src: [{
103+
src: 'https://vjs.zencdn.net/v/oceans.mp4',
104+
type: 'video/mp4'
105+
}, {
106+
src: 'https://vjs.zencdn.net/v/oceans.webm',
107+
type: 'video/webm'
108+
}]
109+
})
110+
```
111+
112+
If you're not familiar with the `loadMedia` method, it's a way to provide additional metadata for your media beyond what is available through the `src` method alone. As you see in the above example, the `title` and `description` are provided and will be used to populate the title bar.
113+
114+
### Populating the `TitleBar` Directly
115+
116+
The `TitleBar` can also be populated through direct input using the component's `update` method:
117+
118+
```js
119+
player.titleBar.update({
120+
title: 'Oceans',
121+
description: 'Journey in to the depths ... and race with dolphins at play.'
122+
});
123+
```
124+
125+
The title and/or description can be removed by passing an empty string for one or both of these values:
126+
127+
```js
128+
player.titleBar.update({
129+
title: '',
130+
description: ''
131+
});
132+
```
133+
134+
If both are removed, the `TitleBar` will no longer be visible.
135+
136+
## New Video.js Utility Objects
137+
138+
Over time, the `videojs` namespace has become cluttered with a wide variety of utility functions. One of the changes we are introducing is a more deliberately designed interface for these utility functions.
139+
140+
The guiding principle here was that if a function didn't feel like a core part of the library, but was still potentially useful to plugins and other integrations, we exposed it as part of a utility object instead of a top-level function.
141+
142+
These are the utility objects attached to `videojs` in 8.0.0:
143+
144+
Object | Description
145+
----------------------|--------------------------------------
146+
`videojs.browser` | Various user-agent detection values (available previously)
147+
`videojs.dom` | DOM functions (available previously)
148+
`videojs.fn` | Function... functions
149+
`videojs.num` | Number functions
150+
`videojs.obj` | Object functions
151+
`videojs.str` | String functions
152+
`videojs.time` | Time-related functions
153+
`videojs.url` | URL-related functions
154+
155+
<div class="note">
156+
<p><b>NOTE:</b> For details on migrating from Video.js 7.x to 8.x, please see <a href="/guides/videojs-7-to-8/">our migration guide</a>!</p>
157+
</div>
158+
159+
## Conclusion
160+
161+
Thanks again to all our contributors and to the large community of developers who support Video.js by using it every day!
162+
163+
If you'd like to contribute to Video.js, the place to start is our [CONTRIBUTING](https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md) guide on GitHub.
164+
165+
_Be well and build great things!_

‎src/mdx-pages/guides/components.mdx

Lines changed: 12 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,13 @@ order: 3
55
description: Understanding components, the building blocks of the Video.js player.
66
---
77

8-
The architecture of the Video.js player is centered around components. The `Player` class and all classes representing player controls and other UI elements inherit from the `Component` class. This architecture makes it easy to construct the user interface of the Video.js player in a tree-like structure that mirrors the DOM.
8+
<div class="note">
9+
<p><b>NOTE:</b> This guide is focused on Video.js 8+. It no longer mentions use of the <code>videojs.extend()</code> method, which was removed in 8.0. Please see <a href="/guides/videojs-7-to-8/">our migration guide</a> for further information!</p>
10+
</div>
11+
12+
The architecture of the Video.js player is centered around components.
13+
14+
The `Player` class and all classes representing player controls and other UI elements inherit from the `Component` class. This architecture makes it easy to construct the user interface of the Video.js player in a tree-like structure that mirrors the DOM.
915

1016
## What is a Component?
1117

@@ -90,13 +96,12 @@ myButton.addClass('vjs-visible-text');
9096

9197
## Creating a Component
9298

93-
Video.js components can be inherited and registered with Video.js to add new features and UI to the player.
99+
Video.js components are es6 classes that can be extended using class syntax and registered with Video.js to add new features and UI to the player.
94100

95-
There are a few used for creating and registering components:
101+
There are a few functions used for creating and registering components:
96102

97-
* `videojs.getComponent(String name)`: Retrieves component constructors from Video.js.
98-
* `videojs.registerComponent(String name, Function Comp)`: Registers component constructors with Video.js.
99-
* `videojs.extend(Function component, Object properties)`: Provides prototype inheritance. Can be used to extend a component's constructor, returning a new constructor with the given properties. *Deprecated, will be removed in Video.js 8 in favor of ES6 classes.
103+
* `videojs.getComponent(String name)`: Retrieves component classes from Video.js.
104+
* `videojs.registerComponent(String name, Function Comp)`: Registers component classes with Video.js.
100105

101106
This example creates a title bar component, as a class extending `Component`.
102107

@@ -148,42 +153,7 @@ class TitleBar extends Component {
148153
}
149154
```
150155

151-
This creates the same component without using classes, using the `videojs.extend()` helper instead.
152-
153-
```js
154-
var Component = videojs.getComponent('Component');
155-
156-
// The videojs.extend function can be used instead of ES6 classes.
157-
var TitleBar = videojs.extend(Component, {
158-
159-
constructor: function(player, options) {
160-
161-
// Equivalent of `super(this, arguments)`
162-
Component.apply(this, arguments);
163-
164-
if (options.text) {
165-
this.updateTextContent(options.text);
166-
}
167-
},
168-
169-
createEl: function() {
170-
return videojs.dom.createEl('div', {
171-
className: 'vjs-title-bar'
172-
});
173-
},
174-
175-
updateTextContent: function(text) {
176-
if (typeof text !== 'string') {
177-
text = 'Title Unknown';
178-
}
179-
180-
videojs.emptyEl(this.el());
181-
videojs.appendContent(this.el(), text);
182-
}
183-
});
184-
```
185-
186-
Either way, the component can be registered, and used in a player.
156+
Once the component is created, it can be registered, and used in a player.
187157

188158
```js
189159
// Register the component with Video.js, so it can be used in players.

0 commit comments

Comments
 (0)