use artplayer
qkqpttgf
GitHub
parent
d99ee1dadc
commit
95b43461e8
|
|
@ -187,7 +187,9 @@
|
|||
<img src="<!--FileEncodeUrl-->" alt="<!--FileName-->" onload="if (this.offsetWidth>document.getElementById('url').offsetWidth) this.style.width='100%';if (this.offsetHeight>document.documentElement.clientHeight) this.style.height=document.documentElement.clientHeight + 'px';" />
|
||||
<!--IsimgFileEnd-->
|
||||
<!--IsvideoFileStart-->
|
||||
<div id="video-a0"></div>
|
||||
<div id="video-a0" class="artplayerdiv" style="width: 100%; height: 100%;"></div>
|
||||
<!--<script src="https://artplayer.org/uncompiled/artplayer.js"></script>-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/artplayer@4.0.9/dist/artplayer.min.js"></script>
|
||||
<!--IsvideoFileEnd-->
|
||||
<!--IsmusicFileStart-->
|
||||
<audio src="<!--FileDownUrl-->" controls="controls" style="width: 100%"></audio>
|
||||
|
|
@ -548,70 +550,129 @@
|
|||
}
|
||||
<!--IstxtFileEnd-->
|
||||
<!--IsvideoFileStart-->
|
||||
function loadResources(type, src, callback) {
|
||||
let script = document.createElement(type);
|
||||
let loaded = false;
|
||||
if (typeof callback === 'function') {
|
||||
script.onload = script.onreadystatechange = () => {
|
||||
if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) {
|
||||
script.onload = script.onreadystatechange = null;
|
||||
loaded = true;
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (type === 'link') {
|
||||
script.href = src;
|
||||
script.rel = 'stylesheet';
|
||||
} else {
|
||||
script.src = src;
|
||||
}
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
}
|
||||
function addVideos(videos) {
|
||||
let host = 'https://s0.pstatp.com/cdn/expire-1-M';
|
||||
let unloadedResourceCount = 4;
|
||||
let callback = (() => {
|
||||
return () => {
|
||||
if (!--unloadedResourceCount) {
|
||||
createDplayers(videos);
|
||||
}
|
||||
};
|
||||
})(unloadedResourceCount, videos);
|
||||
loadResources(
|
||||
'link',
|
||||
host + '/dplayer/1.25.0/DPlayer.min.css',
|
||||
callback
|
||||
);
|
||||
loadResources(
|
||||
'script',
|
||||
host + '/dplayer/1.25.0/DPlayer.min.js',
|
||||
callback
|
||||
);
|
||||
loadResources(
|
||||
'script',
|
||||
host + '/hls.js/0.12.4/hls.light.min.js',
|
||||
callback
|
||||
);
|
||||
loadResources(
|
||||
'script',
|
||||
host + '/flv.js/1.5.0/flv.min.js',
|
||||
callback
|
||||
);
|
||||
}
|
||||
function createDplayers(videos) {
|
||||
for (i = 0; i < videos.length; i++) {
|
||||
console.log(videos[i]);
|
||||
new DPlayer({
|
||||
container: document.getElementById('video-a' + i),
|
||||
screenshot: true,
|
||||
video: {
|
||||
url: videos[i]
|
||||
}
|
||||
document.getElementById('video-a0').style.height = window.innerHeight + 'px';
|
||||
var fileurl = "<!--FileEncodeUrl-->";
|
||||
var filename1 = fileurl.substr(0, fileurl.lastIndexOf('.'));
|
||||
var art = new Artplayer({
|
||||
//container: '#video-a0',
|
||||
container: '.artplayerdiv',
|
||||
url: fileurl,
|
||||
title: fileurl,
|
||||
autoplay: true,
|
||||
pip: true,
|
||||
autoSize: true,
|
||||
autoMini: true,
|
||||
//loop: true,
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
subtitleOffset: true,
|
||||
miniProgressBar: true,
|
||||
//localVideo: true,
|
||||
//localSubtitle: true,
|
||||
mutex: true,
|
||||
//backdrop: true,
|
||||
theme: '#23ade5',
|
||||
lang: navigator.language.toLowerCase(),
|
||||
/*moreVideoAttr: {
|
||||
crossOrigin: 'anonymous',
|
||||
},
|
||||
settings: [
|
||||
{
|
||||
index: 1,
|
||||
html: 'Custom setting',
|
||||
click: function (setting) {
|
||||
console.info('You clicked on the custom setting');
|
||||
setting.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
contextmenu: [
|
||||
{
|
||||
html: 'Custom menu',
|
||||
click: function (contextmenu) {
|
||||
console.info('You clicked on the custom menu');
|
||||
contextmenu.show = false;
|
||||
},
|
||||
},
|
||||
],
|
||||
layers: [
|
||||
{
|
||||
html: '<img style="width: 100px" src="/assets/sample/layer.png">',
|
||||
click: function () {
|
||||
console.info('You clicked on the custom layer');
|
||||
},
|
||||
style: {
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
opacity: '.9',
|
||||
},
|
||||
},
|
||||
],
|
||||
quality: [
|
||||
{
|
||||
default: true,
|
||||
html: 'SD 480P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
html: 'HD 720P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
],
|
||||
thumbnails: {
|
||||
url: '/assets/sample/thumbnails.png',
|
||||
number: 100,
|
||||
width: 160,
|
||||
height: 90,
|
||||
column: 10,
|
||||
},*/
|
||||
subtitle: {
|
||||
url: filename1+'.srt',
|
||||
type: 'srt',
|
||||
style: {
|
||||
color: '#03A9F4',
|
||||
},
|
||||
encoding: 'utf-8',
|
||||
bilingual: true,
|
||||
},/*
|
||||
highlight: [
|
||||
{
|
||||
time: 60,
|
||||
text: 'One more chance',
|
||||
},
|
||||
{
|
||||
time: 120,
|
||||
text: '谁でもいいはずなのに',
|
||||
},
|
||||
{
|
||||
time: 180,
|
||||
text: '夏の想い出がまわる',
|
||||
},
|
||||
{
|
||||
time: 240,
|
||||
text: 'こんなとこにあるはずもないのに',
|
||||
},
|
||||
{
|
||||
time: 300,
|
||||
text: '终わり',
|
||||
},
|
||||
],
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'localsubtitle',
|
||||
mounted: ($preview) => {
|
||||
art.plugins.localSubtitle.attach($preview);
|
||||
},
|
||||
},
|
||||
],
|
||||
icons: {
|
||||
indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
|
||||
loading: '<img src="/assets/img/ploading.gif">',
|
||||
state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
|
||||
},*/
|
||||
});
|
||||
}
|
||||
}
|
||||
addVideos(["<!--FileEncodeUrl-->"]);
|
||||
<!--IsvideoFileEnd-->
|
||||
<!--IspdfFileStart-->
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js';
|
||||
|
|
|
|||
Loading…
Reference in New Issue