mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-14 00:06:17 -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 选项用于自定义弹幕输入框的挂载位置，默认挂载在播放器控制栏中间
|
||||
// 但在移动端下控制栏宽度不足，所以最好自己决定弹幕输入框放在那里
|
||||
// 移动端弹幕DEMO：http://artplayer.org/danmuku.html
|
||||
// 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%;
|
||||
}
|
||||
|
||||
.artplayer-danmuku {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.tip {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -38,11 +46,13 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="artplayer-app"></div>
|
||||
<div class="artplayer-danmuku"></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',
|
||||
@@ -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 事件
|
||||
|
||||
Reference in new issue
Block a user