How to custom LoadingSpinner, it support to config? #8350
-
Description
Thx for your help~ Reduced test caseSteps to reproduceBlock the hls request within network devtools, and mock the loading.
ErrorsNo 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 |
Beta Was this translation helpful? Give feedback.
Replies: 6 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. |
Beta Was this translation helpful? Give feedback.
-
|
@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> |
Beta Was this translation helpful? Give feedback.
-
|
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:
|
Beta Was this translation helpful? Give feedback.
-
|
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> |
Beta Was this translation helpful? Give feedback.
-
|
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:
|
Beta Was this translation helpful? Give feedback.
-
|
Thx for your help~ @amtins |
Beta Was this translation helpful? Give feedback.
Or if you want a custom component: