mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 18:41:20 -08:00
remove danmuku.html
This commit is contained in:
Harvey committed
1 parent
0531717000
commit
f020c30f56
3 files changed
+31
-196
No files matched your search
@@ -29,7 +29,6 @@ var art = new Artplayer({
|
|||||||
|
|
||||||
// mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
|
// mount 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
|
||||||
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
|
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
|
||||||
// 移动端弹幕DEMO：http://artplayer.org/danmuku.html
|
|
||||||
// mount: document.querySelector('.your-danmu-input'),
|
// mount: document.querySelector('.your-danmu-input'),
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -1,195 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Artplayer.js</title>
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
||||||
<meta name="keywords" content="artplayer, player, js, html5, video" />
|
|
||||||
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
|
|
||||||
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
|
|
||||||
<link rel="stylesheet" href="./assets/css/normalize.css">
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
height: 100%;
|
|
||||||
padding: 50px 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.artplayer-app {
|
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.danmuku-input {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 5px;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tip {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="artplayer-app"></div>
|
|
||||||
<div class="danmuku-input"></div>
|
|
||||||
<p class="tip"></p>
|
|
||||||
</div>
|
|
||||||
<script src="./assets/js/vconsole.min.js"></script>
|
|
||||||
<script>var vConsole = new VConsole();</script>
|
|
||||||
<script src="./uncompiled/artplayer/index.js"></script>
|
|
||||||
<script src="./uncompiled/artplayer-plugin-danmuku/index.js"></script>
|
|
||||||
<script>
|
|
||||||
var art = new Artplayer({
|
|
||||||
container: '.artplayer-app',
|
|
||||||
url: '/assets/sample/video.mp4',
|
|
||||||
title: 'One More Time One More Chance',
|
|
||||||
poster: '/assets/sample/poster.jpg',
|
|
||||||
loop: true,
|
|
||||||
mutex: true,
|
|
||||||
setting: true,
|
|
||||||
flip: true,
|
|
||||||
lock: true,
|
|
||||||
autoSize: true,
|
|
||||||
fastForward: true,
|
|
||||||
playbackRate: true,
|
|
||||||
aspectRatio: true,
|
|
||||||
theme: '#ff0057',
|
|
||||||
fullscreen: true,
|
|
||||||
fullscreenWeb: true,
|
|
||||||
miniProgressBar: true,
|
|
||||||
autoOrientation: true,
|
|
||||||
whitelist: ['*'],
|
|
||||||
moreVideoAttr: {
|
|
||||||
'x5-video-player-type': 'h5',
|
|
||||||
'x5-video-player-fullscreen': false,
|
|
||||||
'x5-video-orientation': 'portraint',
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
url: '/assets/sample/subtitle.srt',
|
|
||||||
style: {
|
|
||||||
color: '#48aff0',
|
|
||||||
fontSize: '16px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
html: `<img width="50" src="/assets/sample/layer.png">`,
|
|
||||||
click: function () {
|
|
||||||
art.notice.show = "你点击了自定义层";
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
position: 'absolute',
|
|
||||||
top: '10px',
|
|
||||||
right: '10px',
|
|
||||||
opacity: '.9',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
icons: {
|
|
||||||
loading: '<img src="/assets/img/ploading.gif">',
|
|
||||||
state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
|
|
||||||
indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
|
|
||||||
},
|
|
||||||
settings: [
|
|
||||||
{
|
|
||||||
width: 200,
|
|
||||||
html: '切换字幕',
|
|
||||||
tooltip: '双语',
|
|
||||||
icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
|
|
||||||
selector: [
|
|
||||||
{
|
|
||||||
html: '开关',
|
|
||||||
switch: true,
|
|
||||||
tooltip: '显示',
|
|
||||||
onSwitch: function (item) {
|
|
||||||
item.tooltip = item.switch ? '隐藏' : '显示';
|
|
||||||
art.subtitle.show = !item.switch;
|
|
||||||
return !item.switch;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
default: true,
|
|
||||||
html: '双语',
|
|
||||||
url: '/assets/sample/subtitle.srt'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
html: '中文',
|
|
||||||
url: '/assets/sample/subtitle.cn.srt'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
html: '日文',
|
|
||||||
url: '/assets/sample/subtitle.jp.srt'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
onSelect: function (item) {
|
|
||||||
art.subtitle.switch(item.url, {
|
|
||||||
name: item.html
|
|
||||||
});
|
|
||||||
return item.html;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
artplayerPluginDanmuku({
|
|
||||||
danmuku: '/assets/sample/danmuku.xml',
|
|
||||||
speed: 5,
|
|
||||||
opacity: 1,
|
|
||||||
fontSize: 14,
|
|
||||||
color: '#FFFFFF',
|
|
||||||
mode: 0,
|
|
||||||
margin: [10, '25%'],
|
|
||||||
antiOverlap: true,
|
|
||||||
useWorker: true,
|
|
||||||
synchronousPlayback: false,
|
|
||||||
filter: (danmu) => danmu.text.length < 50,
|
|
||||||
lockTime: 5,
|
|
||||||
maxLength: 100,
|
|
||||||
minWidth: 150,
|
|
||||||
maxWidth: 0,
|
|
||||||
moveOnFullscreen: true,
|
|
||||||
mount: document.querySelector('.danmuku-input'),
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
// 移动端默认不会预加载数据，所以不会默认触发 ready 事件
|
|
||||||
// 但这里可监听 loadedmetadata 事件，自动适应高度
|
|
||||||
art.on('video:loadedmetadata', () => {
|
|
||||||
art.autoHeight = true;
|
|
||||||
})
|
|
||||||
|
|
||||||
Artplayer.config.events.forEach(function (item) {
|
|
||||||
art.on('video:' + item, function (event) {
|
|
||||||
console.log('video: ' + event.type);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (Artplayer.utils.isWechat) {
|
|
||||||
document.querySelector('.tip').textContent = '微信环境需手动触发播放';
|
|
||||||
let isClick = false;
|
|
||||||
document.body.addEventListener('click', () => {
|
|
||||||
if (!isClick) {
|
|
||||||
isClick = true;
|
|
||||||
art.play();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@@ -29,6 +29,14 @@
|
|||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.artplayer-danmuku {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
.tip {
|
.tip {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -38,11 +46,13 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="artplayer-app"></div>
|
<div class="artplayer-app"></div>
|
||||||
|
<div class="artplayer-danmuku"></div>
|
||||||
<p class="tip"></p>
|
<p class="tip"></p>
|
||||||
</div>
|
</div>
|
||||||
<script src="./assets/js/vconsole.min.js"></script>
|
<script src="./assets/js/vconsole.min.js"></script>
|
||||||
<script>var vConsole = new VConsole();</script>
|
<script>var vConsole = new VConsole();</script>
|
||||||
<script src="./uncompiled/artplayer/index.js"></script>
|
<script src="./uncompiled/artplayer/index.js"></script>
|
||||||
|
<script src="./uncompiled/artplayer-plugin-danmuku/index.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var art = new Artplayer({
|
var art = new Artplayer({
|
||||||
container: '.artplayer-app',
|
container: '.artplayer-app',
|
||||||
@@ -134,6 +144,27 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
plugins: [
|
||||||
|
artplayerPluginDanmuku({
|
||||||
|
danmuku: '/assets/sample/danmuku.xml',
|
||||||
|
speed: 5,
|
||||||
|
opacity: 1,
|
||||||
|
fontSize: 14,
|
||||||
|
color: '#FFFFFF',
|
||||||
|
mode: 0,
|
||||||
|
margin: [10, '25%'],
|
||||||
|
antiOverlap: true,
|
||||||
|
useWorker: true,
|
||||||
|
synchronousPlayback: false,
|
||||||
|
filter: (danmu) => danmu.text.length < 50,
|
||||||
|
lockTime: 5,
|
||||||
|
maxLength: 100,
|
||||||
|
minWidth: 150,
|
||||||
|
maxWidth: 0,
|
||||||
|
moveOnFullscreen: true,
|
||||||
|
mount: document.querySelector('.artplayer-danmuku'),
|
||||||
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
// 移动端默认不会预加载数据，所以不会默认触发 ready 事件
|
// 移动端默认不会预加载数据，所以不会默认触发 ready 事件
|
||||||
|
|||||||
Reference in new issue
Block a user