This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
How to custom LoadingSpinner, it support to config? #8347
Comments
|
👋 Thanks for opening your first issue here! 👋 If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. |
|
@JonasWater the naive approach, which handles internationalization, would be to do something like this: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video.js - LoadingSpinner</title>
<link
rel="stylesheet"
href="https://unpkg.com/video.js@next/dist/video-js.css"
/>
<style>
.vjs-loading-spinner {
border: none;
width: unset;
height: unset;
animation: none;
}
.vjs-seeking .vjs-loading-spinner::before,
.vjs-seeking .vjs-loading-spinner::after,
.vjs-waiting .vjs-loading-spinner::before,
.vjs-waiting .vjs-loading-spinner::after {
display: none;
animation: none;
border: unset;
animation-delay: unset;
}
.video-js .vjs-loading-spinner .vjs-control-text {
width: unset;
position: unset;
height: unset;
font-size: 2em;
font-weight: bold;
background-color: red;
}
</style>
</head>
<body>
<video-js
id="player"
class="video-js vjs-has-started"
controls
muted
></video-js>
<script type="module">
import 'https://unpkg.com/video.js@next/dist/video.js';
const player = videojs(
'player',
{
languages: {
fr: {
'Loading...': 'Chargement...',
},
},
},
() => {
const loadSpinnerControlText =
'.vjs-loading-spinner .vjs-control-text';
player.$(loadSpinnerControlText).textContent =
player.loadingSpinner.localize('Loading...');
player.on('languagechange', () => {
player.$(loadSpinnerControlText).textContent =
player.loadingSpinner.localize('Loading...');
});
}
);
player.src({
src: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
});
</script>
</body>
</html> |
|
Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:
|
|
Or if you want a custom component: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video.js - LoadingSpinner</title>
<link
rel="stylesheet"
href="https://unpkg.com/video.js@next/dist/video-js.css"
/>
<style>
.vjs-loading-spinner {
border: none;
width: unset;
height: unset;
animation: none;
}
.vjs-seeking .vjs-loading-spinner::before,
.vjs-seeking .vjs-loading-spinner::after,
.vjs-waiting .vjs-loading-spinner::before,
.vjs-waiting .vjs-loading-spinner::after {
display: none;
animation: none;
border: unset;
animation-delay: unset;
}
.video-js .vjs-loading-spinner .vjs-control-text {
width: unset;
position: unset;
height: unset;
font-size: 2em;
font-weight: bold;
background-color: red;
}
</style>
</head>
<body>
<video-js
id="player"
class="video-js vjs-has-started"
controls
muted
></video-js>
<script src="https://unpkg.com/video.js@next/dist/video.js"></script>
<script type="module">
import 'https://unpkg.com/video.js@next/dist/video.js';
class CustomLoadingSpinner extends videojs.getComponent( 'LoadingSpinner' ) {
createEl() {
const { controlText } = this.options();
const text = videojs.dom.createEl('span', {
className: 'vjs-control-text',
textContent: this.localize(controlText || 'Loading...'),
});
const el = videojs.dom.createEl(
'div',
{
className: 'vjs-loading-spinner',
dir: 'ltr',
},
{},
text
);
return el;
}
handleLanguagechange() {
const { controlText } = this.options();
this.$('.vjs-control-text').textContent = this.localize(
controlText || 'Loading...'
);
}
}
videojs.registerComponent('LoadingSpinner', CustomLoadingSpinner);
const controlText = 'My custom text...';
const player = videojs(
'player',
{
loadingSpinner: {
controlText
},
languages: {
fr: {
'Loading...': 'Chargement...',
[controlText]: 'Mon composant custom...'
},
},
}
);
player.src({
src: 'https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL',
});
</script>
</body>
</html> |
|
Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:
|
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Description
How to show the vjs-control-text, i found it is hidden
How to custom LoadingSpinner's vjs-control-text, just like below this, it supported?
Thx for your help~
Reduced test case
https://videojs.com/city
Steps to reproduce
Block the hls request within network devtools, and mock the loading.
https://videojs.com/city
Errors
No response
What version of Video.js are you using?
7.21.4
Video.js plugins used.
No response
What browser(s) including version(s) does this occur with?
Version 114
What OS(es) and version(s) does this occur with?
MacOS 12.4
The text was updated successfully, but these errors were encountered: