mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-29 11:11:20 -08:00
update docs
This commit is contained in:
Harvey Zack committed
1 parent
24e9c67718
commit
0d99e6d70b
15 files changed
+222
-421
No files matched your search
@@ -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
|
## poster
|
||||||
|
|
||||||
- Type: `String`
|
- Type: `String`
|
||||||
@@ -915,6 +958,117 @@ var art = new Artplayer({
|
|||||||
|
|
||||||
> TODO...
|
> 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
|
# Issue
|
||||||
|
|
||||||
> TODO...
|
> TODO...
|
||||||
+10
-4
@@ -12,10 +12,16 @@ window.runCode = function(hook) {
|
|||||||
codeElement.tagName === 'PRE' &&
|
codeElement.tagName === 'PRE' &&
|
||||||
codeElement.dataset.lang === 'js'
|
codeElement.dataset.lang === 'js'
|
||||||
) {
|
) {
|
||||||
var code = window.encodeURIComponent(codeElement.innerText);
|
var libs = item.href.split('/lib=')[1];
|
||||||
window.open(
|
var code = encodeURIComponent(codeElement.innerText);
|
||||||
'https://artplayer.org/lab/?code=' + code
|
var url = 'https://artplayer.org/lab/?';
|
||||||
);
|
if (libs) {
|
||||||
|
url += 'libs=' + libs + '&';
|
||||||
|
}
|
||||||
|
if (code) {
|
||||||
|
url += 'code=' + code;
|
||||||
|
}
|
||||||
|
window.open(url);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -31,13 +31,13 @@ html, body {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.part-left .header .left {
|
.part-left .header .links {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.part-left .header .left .logo {
|
.part-left .header .links a {
|
||||||
padding-right: 30px;
|
padding-right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
+5
-5
@@ -20,14 +20,14 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="part-left">
|
<div class="part-left">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="left">
|
<div class="links">
|
||||||
<a href="./" class="logo">ArtPlayer.js Lab</a>
|
<a href="./">ArtPlayer.js Lab</a>
|
||||||
<a href="../docs" class="logo">Github</a>
|
<a href="../docs">Document</a>
|
||||||
<a href="../docs" class="logo">Document</a>
|
<a href="https://github.com/zhw2590582/ArtPlayer">Github</a>
|
||||||
</div>
|
</div>
|
||||||
<input class="run" type="button" value="Run Code">
|
<input class="run" type="button" value="Run Code">
|
||||||
</div>
|
</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 class="code"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="part-right">
|
<div class="part-right">
|
||||||
|
|||||||
+51
-46
@@ -1,4 +1,4 @@
|
|||||||
(function(win) {
|
(function() {
|
||||||
var $code = document.querySelector('.code');
|
var $code = document.querySelector('.code');
|
||||||
var $run = document.querySelector('.run');
|
var $run = document.querySelector('.run');
|
||||||
var $lib = document.querySelector('.lib');
|
var $lib = document.querySelector('.lib');
|
||||||
@@ -57,23 +57,33 @@
|
|||||||
script.onload = function() {
|
script.onload = function() {
|
||||||
resolve(url);
|
resolve(url);
|
||||||
};
|
};
|
||||||
|
script.onerror = function() {
|
||||||
|
reject(new Error('Loading script failed:' + url));
|
||||||
|
};
|
||||||
document.querySelector('head').appendChild(script);
|
document.querySelector('head').appendChild(script);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadStyle(url) {
|
function loadStyle(url) {
|
||||||
return new Promise(function(resolve) {
|
return new Promise(function(resolve, reject) {
|
||||||
var style = document.createElement('style');
|
var link = document.createElement('link');
|
||||||
style.type = 'text/css';
|
link.rel = 'stylesheet';
|
||||||
style.src = url;
|
link.href = url;
|
||||||
document.querySelector('head').appendChild(style);
|
link.onload = function() {
|
||||||
resolve(url);
|
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 = [];
|
var libPromise = [];
|
||||||
libs.split(',')
|
var libsDecode = decodeURIComponent(libs || defaultLib);
|
||||||
|
libsDecode
|
||||||
|
.split(/\r?\n/)
|
||||||
.filter(function(url) {
|
.filter(function(url) {
|
||||||
return !loaddLib.includes(url);
|
return !loaddLib.includes(url);
|
||||||
})
|
})
|
||||||
@@ -85,45 +95,27 @@
|
|||||||
libPromise.push(loadStyle(url));
|
libPromise.push(loadStyle(url));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$lib.value = decodeURIComponent(libs);
|
$lib.value = libsDecode;
|
||||||
return Promise.all(libPromise);
|
return Promise.all(libPromise);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadCode(code) {
|
function loadCode(code) {
|
||||||
return new Promise(function(resolve, reject) {
|
if (code) {
|
||||||
if (code) {
|
mirror.setValue(decodeURIComponent(code).trim());
|
||||||
mirror.setValue(decodeURIComponent(code).trim());
|
runCode();
|
||||||
runCode();
|
} else {
|
||||||
resolve(code);
|
fetch('./js/example.js')
|
||||||
} else {
|
.then(response => {
|
||||||
fetch('./js/example.js')
|
return response.text();
|
||||||
.then(response => {
|
})
|
||||||
return response.text();
|
.then(text => {
|
||||||
})
|
mirror.setValue(text);
|
||||||
.then(text => {
|
runCode();
|
||||||
mirror.setValue(text);
|
})
|
||||||
runCode();
|
.catch(err => {
|
||||||
resolve(text);
|
console.error(err.message);
|
||||||
})
|
|
||||||
.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');
|
|
||||||
});
|
});
|
||||||
})
|
}
|
||||||
.catch(err => {
|
|
||||||
console.error(err.message);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function runCode() {
|
function runCode() {
|
||||||
@@ -133,19 +125,32 @@
|
|||||||
var code = mirror.getValue();
|
var code = mirror.getValue();
|
||||||
eval(code);
|
eval(code);
|
||||||
initArt(Artplayer.instances[0]);
|
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) {
|
$run.addEventListener('click', function(e) {
|
||||||
runCode();
|
|
||||||
const libs = encodeURIComponent($lib.value);
|
const libs = encodeURIComponent($lib.value);
|
||||||
const code = encodeURIComponent(mirror.getValue());
|
const code = encodeURIComponent(mirror.getValue());
|
||||||
const url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
|
const url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
|
||||||
history.pushState(null, null, url);
|
history.pushState(null, null, url);
|
||||||
|
initApp();
|
||||||
});
|
});
|
||||||
|
|
||||||
win.addEventListener('error', err => {
|
window.addEventListener('error', err => {
|
||||||
console.error(err.message);
|
console.error(err.message);
|
||||||
});
|
});
|
||||||
|
|
||||||
initApp();
|
initApp();
|
||||||
})(window);
|
})();
|
||||||
@@ -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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -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();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -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);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -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
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
Reference in new issue
Block a user