mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-25 08:01:20 -08:00
添加hls.js演示
This commit is contained in:
Harvey Zack committed
1 parent
63c178e177
commit
7c3f7f2696
14 files changed
+194
-119
No files matched your search
+28
-59
@@ -572,6 +572,7 @@
|
||||
mimeCodec: 'string',
|
||||
theme: 'string',
|
||||
volume: 'number',
|
||||
isLive: 'boolean',
|
||||
mse: 'boolean',
|
||||
muted: 'boolean',
|
||||
autoplay: 'boolean',
|
||||
@@ -853,12 +854,13 @@
|
||||
});
|
||||
Object.defineProperty(player, 'attachUrl', {
|
||||
value: function value(url) {
|
||||
var typeCallback = customType[type];
|
||||
var typeName = type || getExt(url);
|
||||
var typeCallback = customType[typeName];
|
||||
|
||||
if (type && typeCallback) {
|
||||
art.emit('beforeCustomType');
|
||||
if (typeName && typeCallback) {
|
||||
art.emit('beforeCustomType', typeName);
|
||||
typeCallback($video, player.returnUrl(url), art);
|
||||
art.emit('afterCustomType');
|
||||
art.emit('afterCustomType', typeName);
|
||||
} else {
|
||||
art.emit('beforeAttachUrl', url);
|
||||
$video.src = player.returnUrl(url);
|
||||
@@ -3929,13 +3931,13 @@
|
||||
var option = this.art.option;
|
||||
this.add(progress({
|
||||
name: 'progress',
|
||||
disable: false,
|
||||
disable: option.isLive,
|
||||
position: 'top',
|
||||
index: 10
|
||||
}));
|
||||
this.add(thumbnails({
|
||||
name: 'thumbnails',
|
||||
disable: !option.thumbnails.url,
|
||||
disable: !option.thumbnails.url || option.isLive,
|
||||
position: 'top',
|
||||
index: 20
|
||||
}));
|
||||
@@ -3953,7 +3955,7 @@
|
||||
}));
|
||||
this.add(time({
|
||||
name: 'time',
|
||||
disable: false,
|
||||
disable: option.isLive,
|
||||
position: 'left',
|
||||
index: 30
|
||||
}));
|
||||
@@ -4275,30 +4277,22 @@
|
||||
var _this = this;
|
||||
|
||||
var _this$art = this.art,
|
||||
_this$art$refs = _this$art.refs,
|
||||
$infoClose = _this$art$refs.$infoClose,
|
||||
$infoPanel = _this$art$refs.$infoPanel,
|
||||
$infoClose = _this$art.refs.$infoClose,
|
||||
proxy = _this$art.events.proxy;
|
||||
proxy($infoClose, 'click', function () {
|
||||
_this.hide();
|
||||
});
|
||||
this.art.on('switch', function () {
|
||||
if ($infoPanel.innerHTML) {
|
||||
_this.getHeader();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
var _this$art$refs2 = this.art.refs,
|
||||
$info = _this$art$refs2.$info,
|
||||
$infoPanel = _this$art$refs2.$infoPanel;
|
||||
var _this$art$refs = this.art.refs,
|
||||
$info = _this$art$refs.$info,
|
||||
$infoPanel = _this$art$refs.$infoPanel;
|
||||
setStyle($info, 'display', 'block');
|
||||
|
||||
if (!$infoPanel.innerHTML) {
|
||||
append($infoPanel, Info.creatInfo());
|
||||
this.getHeader();
|
||||
append($infoPanel, this.creatInfo());
|
||||
}
|
||||
|
||||
clearTimeout(this.timer);
|
||||
@@ -4306,35 +4300,23 @@
|
||||
this.art.emit('info:show', $info);
|
||||
}
|
||||
}, {
|
||||
key: "getHeader",
|
||||
value: function getHeader() {
|
||||
var _this$art$refs3 = this.art.refs,
|
||||
$infoPanel = _this$art$refs3.$infoPanel,
|
||||
$video = _this$art$refs3.$video;
|
||||
var url = $video.src;
|
||||
var types = Array.from($infoPanel.querySelectorAll('[data-head]'));
|
||||
types.forEach(function (item) {
|
||||
item.innerHTML = 'loading...';
|
||||
});
|
||||
fetch(url, {
|
||||
method: 'HEAD'
|
||||
}).then(function (data) {
|
||||
types.forEach(function (item) {
|
||||
var value = data.headers.get(item.dataset.head);
|
||||
item.innerHTML = value !== undefined ? value : 'unknown';
|
||||
});
|
||||
}).catch(function () {
|
||||
types.forEach(function (item) {
|
||||
item.innerHTML = 'unknown';
|
||||
});
|
||||
});
|
||||
key: "creatInfo",
|
||||
value: function creatInfo() {
|
||||
var infoHtml = [];
|
||||
infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">1.0.3</div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\">".concat(this.art.option.url, "</div>\n </div>\n "));
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n ");
|
||||
return infoHtml.join('');
|
||||
}
|
||||
}, {
|
||||
key: "readInfo",
|
||||
value: function readInfo() {
|
||||
var _this$art$refs4 = this.art.refs,
|
||||
$infoPanel = _this$art$refs4.$infoPanel,
|
||||
$video = _this$art$refs4.$video;
|
||||
var _this$art$refs2 = this.art.refs,
|
||||
$infoPanel = _this$art$refs2.$infoPanel,
|
||||
$video = _this$art$refs2.$video;
|
||||
var types = Array.from($infoPanel.querySelectorAll('[data-video]'));
|
||||
types.forEach(function (item) {
|
||||
var value = $video[item.dataset.video];
|
||||
@@ -4361,20 +4343,6 @@
|
||||
clearTimeout(this.timer);
|
||||
this.art.emit('info:hide', $info);
|
||||
}
|
||||
}], [{
|
||||
key: "creatInfo",
|
||||
value: function creatInfo() {
|
||||
var infoHtml = [];
|
||||
infoHtml.push("\n <div class=\"art-info-item \">\n <div class=\"art-info-title\">Player version:</div>\n <div class=\"art-info-content\">1.0.3</div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video url:</div>\n <div class=\"art-info-content\" data-video=\"currentSrc\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video type:</div>\n <div class=\"art-info-content\" data-head=\"Content-Type\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video size:</div>\n <div class=\"art-info-content\" data-head=\"Content-length\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video volume:</div>\n <div class=\"art-info-content\" data-video=\"volume\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video time:</div>\n <div class=\"art-info-content\" data-video=\"currentTime\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video duration:</div>\n <div class=\"art-info-content\" data-video=\"duration\"></div>\n </div>\n ");
|
||||
infoHtml.push("\n <div class=\"art-info-item\">\n <div class=\"art-info-title\">Video resolution:</div>\n <div class=\"art-info-content\">\n <span data-video=\"videoWidth\"></span> x <span data-video=\"videoHeight\"></span>\n </div>\n </div>\n ");
|
||||
return infoHtml.join('');
|
||||
}
|
||||
}]);
|
||||
|
||||
return Info;
|
||||
@@ -5442,6 +5410,7 @@
|
||||
mimeCodec: '',
|
||||
theme: '#f00',
|
||||
volume: 0.7,
|
||||
isLive: false,
|
||||
mse: false,
|
||||
muted: false,
|
||||
autoplay: false,
|
||||
|
||||
@@ -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/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.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/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.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/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.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/switchQualityMix.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/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.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/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/contextmenuLine 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/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.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/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.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/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/attachUrlMix.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/switchQualityMix.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/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/mse.js","../../../packages/artplayer/src/utils/component.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/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/contextmenuLine truncated
|
||||
@@ -2,7 +2,6 @@ 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) {
|
||||
const flvPlayer = flvjs.createPlayer({
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
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);
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
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);
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user