添加hls.js演示

packages/artplayer/src/controls/index.js

@@ -27,7 +27,7 @@ export default class Controls {
         this.add(
             progress({
                 name: 'progress',
-                disable: false,
+                disable: option.isLive,
                 position: 'top',
                 index: 10,
             }),
@@ -36,7 +36,7 @@ export default class Controls {
         this.add(
             thumbnails({
                 name: 'thumbnails',
-                disable: !option.thumbnails.url,
+                disable: !option.thumbnails.url || option.isLive,
                 position: 'top',
                 index: 20,
             }),
@@ -63,7 +63,7 @@ export default class Controls {
         this.add(
             time({
                 name: 'time',
-                disable: false,
+                disable: option.isLive,
                 position: 'left',
                 index: 30,
             }),

packages/artplayer/src/index.js

@@ -55,6 +55,7 @@ class Artplayer extends Emitter {
             mimeCodec: '',
             theme: '#f00',
             volume: 0.7,
+            isLive: false,
             mse: false,
             muted: false,
             autoplay: false,

packages/artplayer/src/info.js

@@ -8,32 +8,26 @@ export default class Info {
 
     init() {
         const {
-            refs: { $infoClose, $infoPanel },
+            refs: { $infoClose },
             events: { proxy },
         } = this.art;
         proxy($infoClose, 'click', () => {
             this.hide();
         });
-        this.art.on('switch', () => {
-            if ($infoPanel.innerHTML) {
-                this.getHeader();
-            }
-        });
     }
 
     show() {
         const { $info, $infoPanel } = this.art.refs;
         setStyle($info, 'display', 'block');
         if (!$infoPanel.innerHTML) {
-            append($infoPanel, Info.creatInfo());
-            this.getHeader();
+            append($infoPanel, this.creatInfo());
         }
         clearTimeout(this.timer);
         this.loop();
         this.art.emit('info:show', $info);
     }
 
-    static creatInfo() {
+    creatInfo() {
         const infoHtml = [];
 
         infoHtml.push(`
@@ -46,21 +40,7 @@ export default class Info {
         infoHtml.push(`
           <div class="art-info-item">
             <div class="art-info-title">Video url:</div>
-            <div class="art-info-content" data-video="currentSrc"></div>
-          </div>
-        `);
-
-        infoHtml.push(`
-          <div class="art-info-item">
-            <div class="art-info-title">Video type:</div>
-            <div class="art-info-content" data-head="Content-Type"></div>
-          </div>
-        `);
-
-        infoHtml.push(`
-          <div class="art-info-item">
-            <div class="art-info-title">Video size:</div>
-            <div class="art-info-content" data-head="Content-length"></div>
+            <div class="art-info-content">${this.art.option.url}</div>
           </div>
         `);
 
@@ -97,29 +77,6 @@ export default class Info {
         return infoHtml.join('');
     }
 
-    getHeader() {
-        const { $infoPanel, $video } = this.art.refs;
-        const url = $video.src;
-        const types = Array.from($infoPanel.querySelectorAll('[data-head]'));
-        types.forEach(item => {
-            item.innerHTML = 'loading...';
-        });
-        fetch(url, {
-            method: 'HEAD',
-        })
-            .then(data => {
-                types.forEach(item => {
-                    const value = data.headers.get(item.dataset.head);
-                    item.innerHTML = value !== undefined ? value : 'unknown';
-                });
-            })
-            .catch(() => {
-                types.forEach(item => {
-                    item.innerHTML = 'unknown';
-                });
-            });
-    }
-
     readInfo() {
         const { $infoPanel, $video } = this.art.refs;
         const types = Array.from($infoPanel.querySelectorAll('[data-video]'));

packages/artplayer/src/player/attachUrlMix.js

@@ -1,3 +1,5 @@
+import { getExt } from '../utils';
+
 export default function attachUrlMix(art, player) {
     const {
         option: { type, customType },
@@ -11,11 +13,12 @@ export default function attachUrlMix(art, player) {
 
     Object.defineProperty(player, 'attachUrl', {
         value: url => {
-            const typeCallback = customType[type];
-            if (type && typeCallback) {
-                art.emit('beforeCustomType', type);
+            const typeName = type || getExt(url);
+            const typeCallback = customType[typeName];
+            if (typeName && typeCallback) {
+                art.emit('beforeCustomType', typeName);
                 typeCallback($video, player.returnUrl(url), art);
-                art.emit('afterCustomType', type);
+                art.emit('afterCustomType', typeName);
             } else {
                 art.emit('beforeAttachUrl', url);
                 $video.src = player.returnUrl(url);

packages/artplayer/src/scheme/index.js

@@ -19,6 +19,7 @@ export default {
     mimeCodec: 'string',
     theme: 'string',
     volume: 'number',
+    isLive: 'boolean',
     mse: 'boolean',
     muted: 'boolean',
     autoplay: 'boolean',

packages/artplayer/src/style/info.scss

@@ -24,6 +24,9 @@
     
             .art-info-content {
                 flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
                 padding-left: 5px;
             }
         }