use artplayer

artplayer_test
qkqpttgf 2021-12-30 14:13:52 +00:00 committed by GitHub
parent d99ee1dadc
commit 95b43461e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 126 additions and 65 deletions

View File

@ -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';" /> <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--> <!--IsimgFileEnd-->
<!--IsvideoFileStart--> <!--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--> <!--IsvideoFileEnd-->
<!--IsmusicFileStart--> <!--IsmusicFileStart-->
<audio src="<!--FileDownUrl-->" controls="controls" style="width: 100%"></audio> <audio src="<!--FileDownUrl-->" controls="controls" style="width: 100%"></audio>
@ -548,70 +550,129 @@
} }
<!--IstxtFileEnd--> <!--IstxtFileEnd-->
<!--IsvideoFileStart--> <!--IsvideoFileStart-->
function loadResources(type, src, callback) { document.getElementById('video-a0').style.height = window.innerHeight + 'px';
let script = document.createElement(type); var fileurl = "<!--FileEncodeUrl-->";
let loaded = false; var filename1 = fileurl.substr(0, fileurl.lastIndexOf('.'));
if (typeof callback === 'function') { var art = new Artplayer({
script.onload = script.onreadystatechange = () => { //container: '#video-a0',
if (!loaded && (!script.readyState || /loaded|complete/.test(script.readyState))) { container: '.artplayerdiv',
script.onload = script.onreadystatechange = null; url: fileurl,
loaded = true; title: fileurl,
callback(); autoplay: true,
} pip: true,
} autoSize: true,
} autoMini: true,
if (type === 'link') { //loop: true,
script.href = src; fullscreen: true,
script.rel = 'stylesheet'; fullscreenWeb: true,
} else { subtitleOffset: true,
script.src = src; miniProgressBar: true,
} //localVideo: true,
document.getElementsByTagName('head')[0].appendChild(script); //localSubtitle: true,
} mutex: true,
function addVideos(videos) { //backdrop: true,
let host = 'https://s0.pstatp.com/cdn/expire-1-M'; theme: '#23ade5',
let unloadedResourceCount = 4; lang: navigator.language.toLowerCase(),
let callback = (() => { /*moreVideoAttr: {
return () => { crossOrigin: 'anonymous',
if (!--unloadedResourceCount) { },
createDplayers(videos); settings: [
} {
}; index: 1,
})(unloadedResourceCount, videos); html: 'Custom setting',
loadResources( click: function (setting) {
'link', console.info('You clicked on the custom setting');
host + '/dplayer/1.25.0/DPlayer.min.css', setting.show = false;
callback },
); },
loadResources( ],
'script', contextmenu: [
host + '/dplayer/1.25.0/DPlayer.min.js', {
callback html: 'Custom menu',
); click: function (contextmenu) {
loadResources( console.info('You clicked on the custom menu');
'script', contextmenu.show = false;
host + '/hls.js/0.12.4/hls.light.min.js', },
callback },
); ],
loadResources( layers: [
'script', {
host + '/flv.js/1.5.0/flv.min.js', html: '<img style="width: 100px" src="/assets/sample/layer.png">',
callback click: function () {
); console.info('You clicked on the custom layer');
} },
function createDplayers(videos) { style: {
for (i = 0; i < videos.length; i++) { position: 'absolute',
console.log(videos[i]); top: '20px',
new DPlayer({ right: '20px',
container: document.getElementById('video-a' + i), opacity: '.9',
screenshot: true, },
video: { },
url: videos[i] ],
} quality: [
}); {
} default: true,
} html: 'SD 480P',
addVideos(["<!--FileEncodeUrl-->"]); 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">',
},*/
});
<!--IsvideoFileEnd--> <!--IsvideoFileEnd-->
<!--IspdfFileStart--> <!--IspdfFileStart-->
pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js'; pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdn.bootcss.com/pdf.js/2.3.200/pdf.worker.min.js';