mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-10 21:06:15 -08:00
update docs
This commit is contained in:
Harvey Zack committed
1 parent
e96778746a
commit
4338cb2217
6 files changed
+165
-47
No files matched your search
+77
-21
@@ -1,32 +1,88 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artplayer-app {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
margin: 0 auto 20px;
|
||||
background: #000;
|
||||
.part-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 700px;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.error-tip {
|
||||
font-size: 13px;
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 20px;
|
||||
color: red;
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid red;
|
||||
border-radius: 3px;
|
||||
.part-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
.part-left .controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
.part-left .controls .menus {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.part-left .controls .run {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.part-left .code {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.part-left .code .CodeMirror {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.part-left .code .CodeMirror pre {
|
||||
padding-left: 7px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
.part-right .video-wrap {
|
||||
display: flex;
|
||||
height: 70%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.part-right .video-wrap .artplayer-app {
|
||||
width: 800px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.part-right .console {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.part-right .console textarea {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
overflow-y: scroll;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
+14
-5
@@ -17,12 +17,21 @@
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="artplayer-app"></div>
|
||||
<div class="error-tip"></div>
|
||||
<div class="control">
|
||||
<div class="part-left">
|
||||
<div class="controls">
|
||||
<div class="menus">
|
||||
menu
|
||||
</div>
|
||||
<input class="run" type="button" value="Run Code">
|
||||
</div>
|
||||
<div class="code"></div>
|
||||
<div class="bottom">
|
||||
<input class="run" type="button" value="执行代码">
|
||||
</div>
|
||||
<div class="part-right">
|
||||
<div class="video-wrap">
|
||||
<div class="artplayer-app"></div>
|
||||
</div>
|
||||
<div class="console">
|
||||
<textarea class="textarea" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4903,7 +4903,7 @@
|
||||
height: 90,
|
||||
column: 10
|
||||
},
|
||||
screenshot: true,
|
||||
screenshot: false,
|
||||
autoplay: false,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
@@ -4918,7 +4918,7 @@
|
||||
theme: '#f00',
|
||||
setting: false,
|
||||
hotkey: true,
|
||||
pip: true,
|
||||
pip: false,
|
||||
mutex: true,
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/validStringEmpty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loaLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/index.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/scheme/validElement.js","../../packages/artplayer/src/scheme/validStringEmpty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/mimeCodec.js","../../packages/artplayer/src/config/mse.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/node_modules/tiny-emitter/index.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n.js","../../packages/artplayer/src/player/mountUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMin.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/node_modules/get-size/get-size.js","../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../packages/artplayer/node_modules/unipointer/unipointer.js","../../packages/artplayer/node_modules/unidragger/unidragger.js","../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/controls/fullscreen.js","../../packages/artplayer/src/controls/fullscreenWeb.js","../../packages/artplayer/src/controls/pip.js","../../packages/artplayer/src/controls/playAndPause.js","../../packages/artplayer/src/controls/progress.js","../../packages/artplayer/src/controls/subtitle.js","../../packages/artplayer/src/controls/time.js","../../packages/artplayer/src/controls/volume.js","../../packages/artplayer/src/controls/setting.js","../../packages/artplayer/src/controls/thumbnails.js","../../packages/artplayer/src/controls/screenshot.js","../../packages/artplayer/src/controls/quality.js","../../packages/artplayer/src/controls/index.js","../../packages/artplayer/src/contextmenu/playbackRate.js","../../packages/artplayer/src/contextmenu/aspectRatio.js","../../packages/artplayer/src/contextmenu/info.js","../../packages/artplayer/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loaLine truncated
|
||||
+69
-16
@@ -1,49 +1,102 @@
|
||||
var mirror = CodeMirror(document.querySelector(`.code`), {
|
||||
var $code = document.querySelector('.code');
|
||||
var $run = document.querySelector('.run');
|
||||
var $textarea = document.querySelector('.textarea');
|
||||
|
||||
var mirror = CodeMirror($code, {
|
||||
lineNumbers: true,
|
||||
mode: 'javascript',
|
||||
matchBrackets: true,
|
||||
value: ''
|
||||
});;
|
||||
|
||||
function creatCodeMirror(value) {
|
||||
function setCode(value) {
|
||||
mirror.setValue(value.trim());
|
||||
}
|
||||
|
||||
function log(msg) {
|
||||
msg = typeof msg === 'string' ? msg : JSON.stringify(msg);
|
||||
$textarea.value = $textarea.value + '\n' + msg;
|
||||
$textarea.scrollTop = $textarea.scrollHeight;
|
||||
}
|
||||
|
||||
function initApp(app) {
|
||||
Artplayer.config.video.events.forEach(item => {
|
||||
app.on('video:' + item, event => {
|
||||
console.log('video: ' + event.type);
|
||||
log('video: ' + event.type);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function runApp() {
|
||||
function runCode() {
|
||||
try {
|
||||
Artplayer.instances.forEach(ins => {
|
||||
ins.destroy(true)
|
||||
});;
|
||||
eval(mirror.getValue());
|
||||
initApp(Artplayer.instances[0]);
|
||||
$error.style.display = 'none';
|
||||
$error.innerHTML = '';
|
||||
} catch (error) {
|
||||
var msg = error.message.trim();
|
||||
$error.style.display = 'block';
|
||||
$error.innerHTML = '请打开控制台：' + msg;
|
||||
console.error(msg);
|
||||
log('运行错误：' + msg);
|
||||
}
|
||||
}
|
||||
|
||||
var $error = document.querySelector('.error-tip');
|
||||
document.querySelector('.run').addEventListener('click', function (e) {
|
||||
runApp();
|
||||
$run.addEventListener('click', function (e) {
|
||||
runCode();
|
||||
});
|
||||
|
||||
creatCodeMirror(`
|
||||
new Artplayer({
|
||||
setCode(`
|
||||
var url = 'https://blog.zhw-island.com/assets-cdn';
|
||||
var app = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.mp4'
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4',
|
||||
poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
|
||||
pip: true,
|
||||
theme: '#ffad00',
|
||||
quality: [
|
||||
{
|
||||
default: true,
|
||||
name: '标清 480P',
|
||||
url: url + '/video/one-more-time-one-more-chance-480p.mp4'
|
||||
},
|
||||
{
|
||||
name: '高清 720P',
|
||||
url: url + '/video/one-more-time-one-more-chance-720p.mp4'
|
||||
}
|
||||
],
|
||||
thumbnails: {
|
||||
url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
|
||||
width: 190,
|
||||
height: 107
|
||||
},
|
||||
subtitle: {
|
||||
url: url + '/subtitle/one-more-time-one-more-chance.srt',
|
||||
style: {
|
||||
color: '#03A9F4'
|
||||
}
|
||||
},
|
||||
highlight: [
|
||||
{
|
||||
time: 60,
|
||||
text: 'One more chance'
|
||||
},
|
||||
{
|
||||
time: 120,
|
||||
text: '谁でもいいはずなのに'
|
||||
},
|
||||
{
|
||||
time: 180,
|
||||
text: '夏の想い出がまわる'
|
||||
},
|
||||
{
|
||||
time: 240,
|
||||
text: 'こんなとこにあるはずもないのに'
|
||||
},
|
||||
{
|
||||
time: 300,
|
||||
text: '－－终わり－－'
|
||||
}
|
||||
]
|
||||
});
|
||||
`);
|
||||
|
||||
runApp();
|
||||
runCode();
|
||||
@@ -57,7 +57,7 @@ class Artplayer extends Emitter {
|
||||
height: 90,
|
||||
column: 10
|
||||
},
|
||||
screenshot: true,
|
||||
screenshot: false,
|
||||
autoplay: false,
|
||||
playbackRate: true,
|
||||
aspectRatio: true,
|
||||
@@ -72,7 +72,7 @@ class Artplayer extends Emitter {
|
||||
theme: '#f00',
|
||||
setting: false,
|
||||
hotkey: true,
|
||||
pip: true,
|
||||
pip: false,
|
||||
mutex: true,
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
|
||||
Reference in new issue
Block a user