mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-16 01:26:16 -08:00
add subtitle
This commit is contained in:
Harvey Zack committed
1 parent
3e0c286c09
commit
5205847e1f
15 files changed
+375
-103
No files matched your search
+49
-37
@@ -1,37 +1,49 @@
|
||||
<svg class="lds-default" width="85px" height="85px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="75" cy="50" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.9166666666666666s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.9166666666666666s"></animate>
|
||||
</circle><circle cx="71.65063509461098" cy="62.5" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.8333333333333334s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.8333333333333334s"></animate>
|
||||
</circle><circle cx="62.5" cy="71.65063509461096" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.75s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.75s"></animate>
|
||||
</circle><circle cx="50" cy="75" fill="undefined" r="3.66667">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.6666666666666666s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.6666666666666666s"></animate>
|
||||
</circle><circle cx="37.50000000000001" cy="71.65063509461098" fill="undefined" r="4.33333">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.5833333333333334s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.5833333333333334s"></animate>
|
||||
</circle><circle cx="28.34936490538903" cy="62.5" fill="undefined" r="5">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.5s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.5s"></animate>
|
||||
</circle><circle cx="25" cy="50" fill="undefined" r="4.33333">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.4166666666666667s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.4166666666666667s"></animate>
|
||||
</circle><circle cx="28.34936490538903" cy="37.50000000000001" fill="undefined" r="3.66667">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.3333333333333333s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.3333333333333333s"></animate>
|
||||
</circle><circle cx="37.499999999999986" cy="28.349364905389038" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.25s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.25s"></animate>
|
||||
</circle><circle cx="49.99999999999999" cy="25" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.16666666666666666s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.16666666666666666s"></animate>
|
||||
</circle><circle cx="62.5" cy="28.349364905389034" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="-0.08333333333333333s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="-0.08333333333333333s"></animate>
|
||||
</circle><circle cx="71.65063509461096" cy="37.499999999999986" fill="undefined" r="3">
|
||||
<animate attributeName="r" values="3;3;5;3;3" times="0;0.1;0.2;0.3;1" dur="1s" repeatCount="indefinite" begin="0s"></animate>
|
||||
<animate attributeName="fill" values="#ffffcb;#ffffcb;#ff7c81;#ffffcb;#ffffcb" repeatCount="indefinite" times="0;0.1;0.2;0.3;1" dur="1s" begin="0s"></animate>
|
||||
</circle></svg>
|
||||
<svg class="lds-spinner" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(30 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(60 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(90 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(120 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(150 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(180 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(210 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(240 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(270 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(300 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(330 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#ffffff">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g></svg>
|
||||
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 3.3 KiB |
+2
-2
@@ -1,3 +1,3 @@
|
||||
<svg id="plyr-play" width="16px" height="18px">
|
||||
<path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path>
|
||||
</svg>
|
||||
<path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 188 B |
@@ -52,6 +52,8 @@ class Artplayer extends Emitter {
|
||||
loading: '',
|
||||
theme: '#1aafff',
|
||||
hotkey: true,
|
||||
subtitle: '',
|
||||
subtitleStyle: {},
|
||||
lang: navigator.language.toLowerCase()
|
||||
};
|
||||
}
|
||||
|
||||
+15
-2
@@ -25,9 +25,22 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-layers {
|
||||
.artplayer-subtitle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 40px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
|
||||
font-size: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.artplayer-layers {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -39,7 +52,7 @@
|
||||
.artplayer-mask {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
@@ -1,5 +1,56 @@
|
||||
export default class Subtitle {
|
||||
constructor(art) {
|
||||
this.art = art;
|
||||
if (this.art.option.subtitle) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
const {
|
||||
events: { proxy },
|
||||
option: { subtitle, subtitleStyle },
|
||||
refs: { $video, $subtitle }
|
||||
} = this.art;
|
||||
|
||||
Object.keys(subtitleStyle).forEach(key => {
|
||||
$subtitle.style[key] = subtitleStyle[key];
|
||||
});
|
||||
|
||||
const $track = document.createElement('track');
|
||||
$track.default = true;
|
||||
$track.kind = 'metadata';
|
||||
$track.src = subtitle;
|
||||
$video.appendChild($track);
|
||||
this.art.refs.$track = $track;
|
||||
|
||||
if ($video.textTracks && $video.textTracks[0]) {
|
||||
const [track] = $video.textTracks;
|
||||
proxy(track, 'cuechange', () => {
|
||||
const [cue] = track.activeCues;
|
||||
$subtitle.innerHTML = '';
|
||||
if (cue) {
|
||||
const template = document.createElement('div');
|
||||
template.appendChild(cue.getCueAsHTML());
|
||||
const trackHtml = template.innerHTML
|
||||
.split(/\r?\n/)
|
||||
.map(item => `<p>${item}</p>`)
|
||||
.join('');
|
||||
$subtitle.insertAdjacentHTML('beforeend', trackHtml);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
this.art.refs.$subtitle.style.display = 'block';
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.art.refs.$subtitle.style.display = 'none';
|
||||
}
|
||||
|
||||
change(url) {
|
||||
this.art.refs.$track.src = url;
|
||||
}
|
||||
}
|
||||
@@ -9,6 +9,7 @@ export default class Template {
|
||||
refs.$container.innerHTML = `
|
||||
<div class="artplayer-wrap">
|
||||
<video class="artplayer-video" webkit-playsinline playsinline></video>
|
||||
<div class="artplayer-subtitle"></div>
|
||||
<div class="artplayer-layers"></div>
|
||||
<div class="artplayer-mask"></div>
|
||||
<div class="artplayer-controls"></div>
|
||||
@@ -18,6 +19,7 @@ export default class Template {
|
||||
`;
|
||||
refs.$wrap = refs.$container.querySelector('.artplayer-wrap');
|
||||
refs.$video = refs.$container.querySelector('.artplayer-video');
|
||||
refs.$subtitle = refs.$container.querySelector('.artplayer-subtitle');
|
||||
refs.$controls = refs.$container.querySelector('.artplayer-controls');
|
||||
refs.$layers = refs.$container.querySelector('.artplayer-layers');
|
||||
refs.$loading = refs.$container.querySelector('.artplayer-loading');
|
||||
|
||||
@@ -80,4 +80,14 @@ export default function verification(option) {
|
||||
typeof option.hotkey === 'boolean',
|
||||
`'hotkey' option require 'boolean' type, but got '${typeof option.hotkey}'.`
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
typeof option.subtitle === 'string',
|
||||
`'subtitle' option require 'string' type, but got '${typeof option.subtitle}'.`
|
||||
);
|
||||
|
||||
errorHandle(
|
||||
Object.prototype.toString.call(option.subtitleStyle) === '[object Object]',
|
||||
`'subtitleStyle' option require 'object' type, but got '${typeof option.subtitleStyle}'.`
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user