x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-15 00:56:16 -08:00
Code Issues Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-26 14:10:12 +08:00
1 parent 24e9c67718
commit 0d99e6d70b
15 files changed
+222 -421
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/docs/README.md
+154
View File
@@ -90,6 +90,49 @@ var art = new Artplayer({
});
```
## type
- Type: `String`
- Default: `''`
Specify the format for the `url`, use with `customType`
[Run Code](/)
```js
var url = 'https://blog.zhw-island.com/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.flv'
type: 'flv'
});
```
## customType
- Type: `Object`
- Default: `{}`
Customize when loading third-party libraries
[Run Code](/)
```js
var url = 'https://blog.zhw-island.com/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.flv'
type: 'flv',
customType: {
flv: function(video, url, art) {
// video: The video element
// url: The video url
// art: The Artplayer instance
}
}
});
```
## poster
- Type: `String`
@@ -915,6 +958,117 @@ var art = new Artplayer({
> TODO...
# Third-party libraries
## flv.js
- HomePage: [https://github.com/Bilibili/flv.js](https://github.com/Bilibili/flv.js)
[Run Code](/lib=https://cdn.bootcss.com/flv.js/1.4.2/flv.js)
```js
var url = 'https://blog.zhw-island.com/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.flv',
customType: {
flv: function(video, url) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: url,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
},
},
});
```
## hls.js
- HomePage: [https://github.com/video-dev/hls.js](https://github.com/video-dev/hls.js)
[Run Code](/lib=https://cdn.bootcss.com/hls.js/0.10.1/hls.js)
```js
var art = new Artplayer({
container: '.artplayer-app',
url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
customType: {
m3u8: function(video, url) {
var hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
},
},
});
```
## dash.js
- HomePage: [https://github.com/Dash-Industry-Forum/dash.js](https://github.com/Dash-Industry-Forum/dash.js)
[Run Code](/lib=https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js)
```js
var art = new Artplayer({
container: '.artplayer-app',
url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
customType: {
mpd: function(video, url) {
var player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
},
},
});
```
## shaka-player
- HomePage: [https://github.com/google/shaka-player](https://github.com/google/shaka-player)
[Run Code](/lib=https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js)
```js
var art = new Artplayer({
container: '.artplayer-app',
url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
customType: {
mpd: function(video, url) {
shaka.polyfill.installAll();
var player = new shaka.Player(video);
player.load(url);
},
},
});
```
## webtorrent
- HomePage: [https://github.com/webtorrent/webtorrent](https://github.com/webtorrent/webtorrent)
[Run Code](/lib=https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js)
```js
var art = new Artplayer({
container: '.artplayer-app',
url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
type: 'torrent',
customType: {
torrent: function (video, url, art) {
var client = new WebTorrent();
art.loading.show();
client.add(url, function (torrent) {
var file = torrent.files[0];
file.renderTo(video, {
autoplay: true
})
})
},
},
});
```
# Issue
> TODO...
docs/docs/runCode.js
+10 -4
View File
@@ -12,10 +12,16 @@ window.runCode = function(hook) {
codeElement.tagName === 'PRE' &&
codeElement.dataset.lang === 'js'
) {
var code = window.encodeURIComponent(codeElement.innerText);
window.open(
'https://artplayer.org/lab/?code=' + code
);
var libs = item.href.split('/lib=')[1];
var code = encodeURIComponent(codeElement.innerText);
var url = 'https://artplayer.org/lab/?';
if (libs) {
url += 'libs=' + libs + '&';
}
if (code) {
url += 'code=' + code;
}
window.open(url);
}
});
});
docs/lab/css/common.css
+2 -2
View File
@@ -31,13 +31,13 @@ html, body {
box-sizing: border-box;
}
.part-left .header .left {
.part-left .header .links {
display: flex;
align-items: center;
flex: 1;
}
.part-left .header .left .logo {
.part-left .header .links a {
padding-right: 30px;
}
docs/lab/dash.html
-60
View File
@@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer.js Lab</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
<meta name="keywords" content="artplayer,html5,video,player">
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
<link rel="shortcut icon" href="./img/favicon.ico">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./plugins/codemirror.css">
<link rel="stylesheet" href="./plugins/consola.css">
<link rel="stylesheet" href="./css/artplayer.css">
</head>
<body>
<div class="container">
<div class="part-left">
<div class="controls">
<div class="left">
<a href="./dash.html" class="logo">ArtPlayer.js Lab</a>
<a href="../docs" class="logo">Document</a>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
<input class="run" type="button" value="Run Code">
</div>
<div class="code"></div>
</div>
<div class="part-right">
<div class="video-wrap">
<div class="artplayer-app"></div>
</div>
<div class="console"></div>
</div>
</div>
<script src="./plugins/consola.js"></script>
<script src="./plugins/codemirror.js"></script>
<script src="./plugins/javascript.js"></script>
<script src="https://cdn.bootcss.com/dashjs/2.9.2/dash.all.min.js"></script>
<script src="./js/artplayer.js"></script>
<script src="./js/common.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?59d546bcda559725a968939647a0dcae";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
loadCode('./js/dash.js');
</script>
</body>
</html>
docs/lab/flv.html
-60
View File
@@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer.js Lab</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
<meta name="keywords" content="artplayer,html5,video,player">
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
<link rel="shortcut icon" href="./img/favicon.ico">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./plugins/codemirror.css">
<link rel="stylesheet" href="./plugins/consola.css">
<link rel="stylesheet" href="./css/artplayer.css">
</head>
<body>
<div class="container">
<div class="part-left">
<div class="controls">
<div class="left">
<a href="./flv.html" class="logo">ArtPlayer.js Lab</a>
<a href="../docs" class="logo">Document</a>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
<input class="run" type="button" value="Run Code">
</div>
<div class="code"></div>
</div>
<div class="part-right">
<div class="video-wrap">
<div class="artplayer-app"></div>
</div>
<div class="console"></div>
</div>
</div>
<script src="./plugins/consola.js"></script>
<script src="./plugins/codemirror.js"></script>
<script src="./plugins/javascript.js"></script>
<script src="https://cdn.bootcss.com/flv.js/1.4.2/flv.js"></script>
<script src="./js/artplayer.js"></script>
<script src="./js/common.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?59d546bcda559725a968939647a0dcae";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
loadCode('./js/flv.js');
</script>
</body>
</html>
docs/lab/hls.html
-60
View File
@@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer.js Lab</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
<meta name="keywords" content="artplayer,html5,video,player">
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
<link rel="shortcut icon" href="./img/favicon.ico">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./plugins/codemirror.css">
<link rel="stylesheet" href="./plugins/consola.css">
<link rel="stylesheet" href="./css/artplayer.css">
</head>
<body>
<div class="container">
<div class="part-left">
<div class="controls">
<div class="left">
<a href="./hls.html" class="logo">ArtPlayer.js Lab</a>
<a href="../docs" class="logo">Document</a>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
<input class="run" type="button" value="Run Code">
</div>
<div class="code"></div>
</div>
<div class="part-right">
<div class="video-wrap">
<div class="artplayer-app"></div>
</div>
<div class="console"></div>
</div>
</div>
<script src="./plugins/consola.js"></script>
<script src="./plugins/codemirror.js"></script>
<script src="./plugins/javascript.js"></script>
<script src="https://cdn.bootcss.com/hls.js/0.10.1/hls.js"></script>
<script src="./js/artplayer.js"></script>
<script src="./js/common.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?59d546bcda559725a968939647a0dcae";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
loadCode('./js/hls.js');
</script>
</body>
</html>
docs/lab/index.html
+5 -5
View File
@@ -20,14 +20,14 @@
<div class="container">
<div class="part-left">
<div class="header">
<div class="left">
<a href="./" class="logo">ArtPlayer.js Lab</a>
<a href="../docs" class="logo">Github</a>
<a href="../docs" class="logo">Document</a>
<div class="links">
<a href="./">ArtPlayer.js Lab</a>
<a href="../docs">Document</a>
<a href="https://github.com/zhw2590582/ArtPlayer">Github</a>
</div>
<input class="run" type="button" value="Run Code">
</div>
<textarea class="lib" cols="30" rows="10" placeholder="Other dependencies, multiple line breaks" spellcheck="false"></textarea>
<textarea class="lib" cols="30" rows="10" placeholder="Other dependencies, support for js and css, multiple line breaks" spellcheck="false"></textarea>
<div class="code"></div>
</div>
<div class="part-right">
docs/lab/js/common.js
+51 -46
View File
@@ -1,4 +1,4 @@
(function(win) {
(function() {
var $code = document.querySelector('.code');
var $run = document.querySelector('.run');
var $lib = document.querySelector('.lib');
@@ -57,23 +57,33 @@
script.onload = function() {
resolve(url);
};
script.onerror = function() {
reject(new Error('Loading script failed:' + url));
};
document.querySelector('head').appendChild(script);
});
}
function loadStyle(url) {
return new Promise(function(resolve) {
var style = document.createElement('style');
style.type = 'text/css';
style.src = url;
document.querySelector('head').appendChild(style);
resolve(url);
return new Promise(function(resolve, reject) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = function() {
resolve(url);
};
link.onerror = function() {
reject(new Error('Loading style failed:' + url));
};
document.querySelector('head').appendChild(link);
});
}
function loadLib(libs = defaultLib) {
function loadLib(libs) {
var libPromise = [];
libs.split(',')
var libsDecode = decodeURIComponent(libs || defaultLib);
libsDecode
.split(/\r?\n/)
.filter(function(url) {
return !loaddLib.includes(url);
})
@@ -85,45 +95,27 @@
libPromise.push(loadStyle(url));
}
});
$lib.value = decodeURIComponent(libs);
$lib.value = libsDecode;
return Promise.all(libPromise);
}
function loadCode(code) {
return new Promise(function(resolve, reject) {
if (code) {
mirror.setValue(decodeURIComponent(code).trim());
runCode();
resolve(code);
} else {
fetch('./js/example.js')
.then(response => {
return response.text();
})
.then(text => {
mirror.setValue(text);
runCode();
resolve(text);
})
.catch(err => {
console.error(err.message);
});
}
});
}
function initApp() {
const { code, libs } = getURLParameters(window.location.href);
loadLib(libs)
.then(function(result) {
loaddLib = loaddLib.concat(result);
loadCode(code).then(() => {
console.info('App initialization completed');
if (code) {
mirror.setValue(decodeURIComponent(code).trim());
runCode();
} else {
fetch('./js/example.js')
.then(response => {
return response.text();
})
.then(text => {
mirror.setValue(text);
runCode();
})
.catch(err => {
console.error(err.message);
});
})
.catch(err => {
console.error(err.message);
});
}
}
function runCode() {
@@ -133,19 +125,32 @@
var code = mirror.getValue();
eval(code);
initArt(Artplayer.instances[0]);
console.info('Player initialization completed');
}
function initApp() {
const { code, libs } = getURLParameters(window.location.href);
loadLib(libs)
.then(function(result) {
loaddLib = loaddLib.concat(result);
loadCode(code);
})
.catch(err => {
console.error(err.message);
});
}
$run.addEventListener('click', function(e) {
runCode();
const libs = encodeURIComponent($lib.value);
const code = encodeURIComponent(mirror.getValue());
const url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
history.pushState(null, null, url);
initApp();
});
win.addEventListener('error', err => {
window.addEventListener('error', err => {
console.error(err.message);
});
initApp();
})(window);
})();
docs/lab/js/dash.js
-10
View File
@@ -1,10 +0,0 @@
var art = new Artplayer({
container: '.artplayer-app',
url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',
customType: {
mpd: function(video, url) {
var player = dashjs.MediaPlayer().create();
player.initialize(video, url, true);
},
},
});
docs/lab/js/flv.js
-15
View File
@@ -1,15 +0,0 @@
var url = 'https://blog.zhw-island.com/assets-cdn';
var art = new Artplayer({
container: '.artplayer-app',
url: url + '/video/one-more-time-one-more-chance-480p.flv',
customType: {
flv: function(video, url) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: url,
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
},
},
});
docs/lab/js/hls.js
-11
View File
@@ -1,11 +0,0 @@
var art = new Artplayer({
container: '.artplayer-app',
url: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
customType: {
m3u8: function(video, url) {
var hls = new Hls();
hls.loadSource(url);
hls.attachMedia(video);
},
},
});
docs/lab/js/shaka.js
-11
View File
@@ -1,11 +0,0 @@
var art = new Artplayer({
container: '.artplayer-app',
url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',
customType: {
mpd: function(video, url) {
shaka.polyfill.installAll();
var player = new shaka.Player(video);
player.load(url);
},
},
});
docs/lab/js/webtorrent.js
-17
View File
@@ -1,17 +0,0 @@
var art = new Artplayer({
container: '.artplayer-app',
url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',
type: 'torrent',
customType: {
torrent: function (video, url, art) {
var client = new WebTorrent();
art.loading.show();
client.add(url, function (torrent) {
var file = torrent.files[0];
file.renderTo(video, {
autoplay: true
})
})
},
},
});
docs/lab/shaka.html
-60
View File
@@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer.js Lab</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
<meta name="keywords" content="artplayer,html5,video,player">
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
<link rel="shortcut icon" href="./img/favicon.ico">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./plugins/codemirror.css">
<link rel="stylesheet" href="./plugins/consola.css">
<link rel="stylesheet" href="./css/artplayer.css">
</head>
<body>
<div class="container">
<div class="part-left">
<div class="controls">
<div class="left">
<a href="./shaka.html" class="logo">ArtPlayer.js Lab</a>
<a href="../docs" class="logo">Document</a>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
<input class="run" type="button" value="Run Code">
</div>
<div class="code"></div>
</div>
<div class="part-right">
<div class="video-wrap">
<div class="artplayer-app"></div>
</div>
<div class="console"></div>
</div>
</div>
<script src="./plugins/consola.js"></script>
<script src="./plugins/codemirror.js"></script>
<script src="./plugins/javascript.js"></script>
<script src="https://cdn.bootcss.com/shaka-player/2.5.0-beta/shaka-player.compiled.js"></script>
<script src="./js/artplayer.js"></script>
<script src="./js/common.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?59d546bcda559725a968939647a0dcae";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
loadCode('./js/shaka.js');
</script>
</body>
</html>
docs/lab/webtorrent.html
-60
View File
@@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer.js Lab</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0,minimal-ui">
<meta name="keywords" content="artplayer,html5,video,player">
<meta name="description" content="ArtPlayer is a modern HTML5 video player">
<link rel="shortcut icon" href="./img/favicon.ico">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./plugins/codemirror.css">
<link rel="stylesheet" href="./plugins/consola.css">
<link rel="stylesheet" href="./css/artplayer.css">
</head>
<body>
<div class="container">
<div class="part-left">
<div class="controls">
<div class="left">
<a href="./webtorrent.html" class="logo">ArtPlayer.js Lab</a>
<a href="../docs" class="logo">Document</a>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=zhw2590582&repo=ArtPlayer&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
<input class="run" type="button" value="Run Code">
</div>
<div class="code"></div>
</div>
<div class="part-right">
<div class="video-wrap">
<div class="artplayer-app"></div>
</div>
<div class="console"></div>
</div>
</div>
<script src="./plugins/consola.js"></script>
<script src="./plugins/codemirror.js"></script>
<script src="./plugins/javascript.js"></script>
<script src="https://cdn.bootcss.com/webtorrent/0.102.4/webtorrent.min.js"></script>
<script src="./js/artplayer.js"></script>
<script src="./js/common.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?59d546bcda559725a968939647a0dcae";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
loadCode('./js/webtorrent.js');
</script>
</body>
</html>