成功读取tags

docs/flv/css/common.css

@@ -19,17 +19,12 @@ body,
 
 .part-top .config {
     width: 500px;
-    display: flex;
     margin-bottom: 20px;
 }
 
 .part-top .config .urlInput {
-    flex: 1;
+    width: 100%;
-    outline: none;
+    margin-bottom: 20px;
-}
-
-.part-top .config .playBtn {
-    width: 50px;
 }
 
 .part-top .artplayer {

docs/flv/index.html

@@ -20,7 +20,10 @@
         <div class="part-top">
             <div class="config">
                 <input class="urlInput" type="text" value="https://blog.zhw-island.com/assets-cdn/video/one-more-time-one-more-chance-480p.flv">
-                <input class="playBtn" type="button" value="play">
+                <div class="btns">
+                    <input class="playBtn" type="button" value="Play">
+                    <input class="fileBtn" type="file">
+                </div>
             </div>
             <div class="artplayer"></div>
         </div>

docs/flv/js/common.js

@@ -1,11 +1,11 @@
 'use strict';
 
 (function() {
-    consola.creat({
+    // consola.creat({
-        target: '.part-bottom',
+    //     target: '.part-bottom',
-        size: '100%',
+    //     size: '100%',
-        zIndex: 99,
+    //     zIndex: 99,
-    });
+    // });
 
     console.info('Welcome, if you like it, consider star it, thank you.');
     console.info('https://github.com/zhw2590582/ArtPlayer');
@@ -16,8 +16,9 @@
 
     var $urlInput = document.querySelector('.urlInput');
     var $playBtn = document.querySelector('.playBtn');
+    var $fileBtn = document.querySelector('.fileBtn');
 
-    function creatPlayer() {
+    function creatPlayer(file) {
         Artplayer.instances.forEach(function(art) {
             art.destroy(true);
         });
@@ -28,7 +29,7 @@
             type: 'flv',
             customType: {
                 flv: function(video, url) {
-                    this.plugins.artplayerPluginFlv.init(video, url);
+                    this.plugins.artplayerPluginFlv.init(video, file || url);
                 },
             },
             plugins: [artplayerPluginFlv]
@@ -37,4 +38,8 @@
 
     creatPlayer();
     $playBtn.addEventListener('click', creatPlayer);
+    $fileBtn.addEventListener('change', () => {
+        const file = $fileBtn.files[0];
+        creatPlayer(file);
+    });
 })();

docs/uncompiled/artplayer-plugin-flv.js

@@ -283,7 +283,7 @@
 
   function checkSupport(mediaElement, url) {
     errorHandle(mediaElement instanceof HTMLVideoElement, 'The first parameter is not a video tag element');
-    errorHandle(typeof url === 'string', 'The second parameter is not a string type');
+    errorHandle(typeof url === 'string' || url instanceof File && url.type === 'video/x-flv', 'The second parameter is not a string type or flv file');
     var MP4H264MimeCodec = 'video/mp4; codecs="avc1.42001E, mp4a.40.2"';
     var canPlay = mediaElement.canPlayType(MP4H264MimeCodec);
     errorHandle(window.MediaSource && window.MediaSource.isTypeSupported(MP4H264MimeCodec) && (canPlay === 'probably' || canPlay === 'maybe'), "Unsupported MIME type or codec: ".concat(MP4H264MimeCodec));
@@ -388,6 +388,87 @@
     return CreatMediaSource;
   }();
 
+  var LoadFile =
+  /*#__PURE__*/
+  function () {
+    function LoadFile(flv) {
+      classCallCheck(this, LoadFile);
+
+      this.flv = flv;
+      this.uint8 = [];
+      this.index = 0;
+      this.header = {};
+      this.tags = [];
+
+      if (typeof flv.url === 'string') {
+        this.fromNetwork(flv.url);
+      } else {
+        this.fromLocal(flv.url);
+      }
+    }
+
+    createClass(LoadFile, [{
+      key: "fromNetwork",
+      value: function fromNetwork(url) {
+        console.log(this.flv.url);
+      }
+    }, {
+      key: "fromLocal",
+      value: function fromLocal(file) {
+        var _this = this;
+
+        var proxy = this.flv.events.proxy;
+        var reader = new FileReader();
+        proxy(reader, 'load', function (e) {
+          var buffer = e.target.result;
+          _this.uint8 = new Uint8Array(buffer);
+
+          _this.parse();
+        });
+        reader.readAsArrayBuffer(file);
+      }
+    }, {
+      key: "parse",
+      value: function parse() {
+        this.header.signature = this.read(3);
+        this.header.version = this.read(1);
+        this.header.flags = this.read(1);
+        this.header.headersize = this.read(4);
+        this.read(4);
+
+        while (this.index < this.uint8.length) {
+          var tag = {};
+          tag.tagType = this.read(1);
+          tag.dataSize = this.read(3);
+          tag.Timestamp = this.read(4);
+          tag.StreamID = this.read(3);
+          tag.body = this.read(LoadFile.getBodySum(tag.dataSize));
+          this.tags.push(tag);
+          this.read(4);
+        }
+      }
+    }, {
+      key: "read",
+      value: function read(length) {
+        var tempUint8 = [];
+
+        for (var i = 0; i < length; i += 1) {
+          tempUint8.push(this.uint8[this.index]);
+          this.index += 1;
+        }
+
+        return tempUint8;
+      }
+    }], [{
+      key: "getBodySum",
+      value: function getBodySum(arr) {
+        return arr[0] * Math.pow(256, 2) + arr[1] * 256 + arr[2];
+      }
+    }]);
+
+    return LoadFile;
+  }();
+
   var id = 0;
 
   var Flv =
@@ -415,6 +496,7 @@
       value: function load() {
         this.events = new EventProxy(this);
         this.mediaSource = new CreatMediaSource(this);
+        this.file = new LoadFile(this);
         this.emit('load');
       }
     }, {

docs/uncompiled/artplayer-plugin-flv.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer-plugin-flv.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-plugin-flv/node_modules/tiny-emitter/index.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer-plugin-flv/src/flv/utils/index.js","../../packages/artplayer-plugin-flv/src/flv/utils/checkSupport.js","../../packages/artplayer-plugin-flv/src/flv/eventProxy.js","../../packages/artplayer-plugin-flv/src/flv/config.js","../../packages/artplayer-plugin-flv/src/flv/creatMediaSource.js","../../packages/artplayer-plugin-flv/src/flv/index.js","../../packages/artplayer-plugin-flv/src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    return this;\n  },\n\n  once: function (name, callback, ctLine truncated
+{"version":3,"file":"artplayer-plugin-flv.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer-plugin-flv/node_modules/tiny-emitter/index.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer-plugin-flv/src/flv/utils/index.js","../../packages/artplayer-plugin-flv/src/flv/utils/checkSupport.js","../../packages/artplayer-plugin-flv/src/flv/eventProxy.js","../../packages/artplayer-plugin-flv/src/flv/config.js","../../packages/artplayer-plugin-flv/src/flv/creatMediaSource.js","../../packages/artplayer-plugin-flv/src/flv/loadFile.js","../../packages/artplayer-plugin-flv/src/flv/index.js","../../packages/artplayer-plugin-flv/src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n  if (!(instance instanceof Constructor)) {\n    throw new TypeError(\"Cannot call a class as a function\");\n  }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n  for (var i = 0; i < props.length; i++) {\n    var descriptor = props[i];\n    descriptor.enumerable = descriptor.enumerable || false;\n    descriptor.configurable = true;\n    if (\"value\" in descriptor) descriptor.writable = true;\n    Object.defineProperty(target, descriptor.key, descriptor);\n  }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n  if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n  if (staticProps) _defineProperties(Constructor, staticProps);\n  return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n  if (self === void 0) {\n    throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  }\n\n  return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n  if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n    return call;\n  }\n\n  return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n  module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n    return o.__proto__ || Object.getPrototypeOf(o);\n  };\n  return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","function _setPrototypeOf(o, p) {\n  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n    o.__proto__ = p;\n    return o;\n  };\n\n  return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction _inherits(subClass, superClass) {\n  if (typeof superClass !== \"function\" && superClass !== null) {\n    throw new TypeError(\"Super expression must either be null or a function\");\n  }\n\n  subClass.prototype = Object.create(superClass && superClass.prototype, {\n    constructor: {\n      value: subClass,\n      writable: true,\n      configurable: true\n    }\n  });\n  if (superClass) setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inherits;","function E () {\n  // Keep this empty so it's easier to inherit from\n  // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n  on: function (name, callback, ctx) {\n    var e = this.e || (this.e = {});\n\n    (e[name] || (e[name] = [])).push({\n      fn: callback,\n      ctx: ctx\n    });\n\n    Line truncated

packages/artplayer-plugin-flv/src/flv/index.js

@@ -2,6 +2,7 @@ import Emitter from 'tiny-emitter';
 import checkSupport from './utils/checkSupport';
 import EventProxy from './eventProxy';
 import CreatMediaSource from './creatMediaSource';
+import LoadFile from './loadFile';
 import * as utils from './utils';
 import config from './config';
 
@@ -33,6 +34,7 @@ class Flv extends Emitter {
     load() {
         this.events = new EventProxy(this);
         this.mediaSource = new CreatMediaSource(this);
+        this.file = new LoadFile(this);
         this.emit('load');
     }
 

packages/artplayer-plugin-flv/src/flv/loadFile.js

@@ -0,0 +1,62 @@
+export default class LoadFile {
+    constructor(flv) {
+        this.flv = flv;
+        this.uint8 = [];
+        this.index = 0;
+        this.header = {};
+        this.tags = [];
+        if (typeof flv.url === 'string') {
+            this.fromNetwork(flv.url);
+        } else {
+            this.fromLocal(flv.url);
+        }
+    }
+
+    fromNetwork(url) {
+        console.log(this.flv.url);
+    }
+
+    fromLocal(file) {
+        const {
+            events: { proxy },
+        } = this.flv;
+        const reader = new FileReader();
+        proxy(reader, 'load', e => {
+            const buffer = e.target.result;
+            this.uint8 = new Uint8Array(buffer);
+            this.parse();
+        });
+        reader.readAsArrayBuffer(file);
+    }
+
+    parse() {
+        this.header.signature = this.read(3);
+        this.header.version = this.read(1);
+        this.header.flags = this.read(1);
+        this.header.headersize = this.read(4);
+        this.read(4);
+        while (this.index < this.uint8.length) {
+            const tag = {};
+            tag.tagType = this.read(1);
+            tag.dataSize = this.read(3);
+            tag.Timestamp = this.read(4);
+            tag.StreamID = this.read(3);
+            tag.body = this.read(LoadFile.getBodySum(tag.dataSize));
+            this.tags.push(tag);
+            this.read(4);
+        }
+    }
+
+    read(length) {
+        const tempUint8 = [];
+        for (let i = 0; i < length; i += 1) {
+            tempUint8.push(this.uint8[this.index]);
+            this.index += 1;
+        }
+        return tempUint8;
+    }
+
+    static getBodySum(arr) {
+        return arr[0] * 256 ** 2 + arr[1] * 256 + arr[2];
+    }
+}

packages/artplayer-plugin-flv/src/flv/utils/checkSupport.js

@@ -2,7 +2,10 @@ import { errorHandle } from '.';
 
 export default function checkSupport(mediaElement, url) {
     errorHandle(mediaElement instanceof HTMLVideoElement, 'The first parameter is not a video tag element');
-    errorHandle(typeof url === 'string', 'The second parameter is not a string type');
+    errorHandle(
+        typeof url === 'string' || (url instanceof File && url.type === 'video/x-flv'),
+        'The second parameter is not a string type or flv file',
+    );
     const MP4H264MimeCodec = 'video/mp4; codecs="avc1.42001E, mp4a.40.2"';
     const canPlay = mediaElement.canPlayType(MP4H264MimeCodec);
     errorHandle(