Add supportsFlex() function and error handling for unsupported flex layout

packages/artplayer/src/template.js

@@ -1,4 +1,4 @@
-import { errorHandle, query, addClass, isMobile } from './utils';
+import { supportsFlex, errorHandle, query, addClass, isMobile } from './utils';
 
 export default class Template {
     constructor(art) {
@@ -12,6 +12,8 @@ export default class Template {
             errorHandle(this.$container, `No container element found by ${option.container}`);
         }
 
+        errorHandle(supportsFlex(), 'The current browser does not support flex layout');
+
         const type = this.$container.tagName.toLowerCase();
         errorHandle(type === 'div', `Unsupported container element type, only support 'div' but got '${type}'`);
 

packages/artplayer/src/utils/dom.js

@@ -107,3 +107,9 @@ export function setStyleText(id, style) {
         document.head.appendChild($style);
     }
 }
+
+export function supportsFlex() {
+    const div = document.createElement('div');
+    div.style.display = 'flex';
+    return div.style.display === 'flex';
+}