add playsInline option

packages/artplayer-document/docs/en/Options.md

@@ -496,6 +496,23 @@ SSR is the abbreviation of Server Side Render. The content on the page is genera
 
 :::
 
+## playsInline
+
+-   Type: `Boolean`
+-   Default: `true`
+
+Whether use playsInline in mobile
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});
+```
+
 ## layers
 
 -   Type: `Array`

packages/artplayer-document/docs/zh-cn/Options.md

@@ -496,6 +496,23 @@ SSR 是 Server Side Render 简称，页面上的内容是通过服务端渲染
 
 :::
 
+## playsInline
+
+-   类型: `Boolean`
+-   默认: `true`
+
+在移动端是否使用 playsInline 模式
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});
+```
+
 ## layers
 
 -   类型: `Array`
@@ -570,9 +587,9 @@ var art = new Artplayer({
                     html: '子菜单02',
                 },
             ],
-            onSelect: function(item) {
+            onSelect: function (item) {
                 console.log(item.html);
-            }
+            },
         },
         {
             html: '自定义设置02',
@@ -584,9 +601,9 @@ var art = new Artplayer({
                     html: '子菜单02',
                 },
             ],
-            onSelect: function(item) {
+            onSelect: function (item) {
                 console.log(item.html);
-            }
+            },
         },
     ],
 });
@@ -820,7 +837,6 @@ var art = new Artplayer({
     // whitelist: ['*'],
     // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)],
     // whitelist: [/iPhone OS 11/gi],
-    
 });
 ```
 

packages/artplayer/src/index.js

@@ -141,6 +141,7 @@ export default class Artplayer extends Emitter {
             subtitleOffset: false,
             miniProgressBar: false,
             useSSR: false,
+            playsInline: true,
             ads: [],
             layers: [],
             contextmenu: [],

packages/artplayer/src/player/eventInit.js

@@ -14,7 +14,9 @@ export default function eventInit(art) {
     const maxReconnectTime = 5;
 
     proxy($video, 'click', () => {
-        art.toggle();
+        if (!isMobile) {
+            art.toggle();
+        }
     });
 
     proxy($video, 'dblclick', () => {

packages/artplayer/src/player/optionInit.js

@@ -32,6 +32,11 @@ export default function attrInit(art) {
         $video.autoplay = option.autoplay;
     }
 
+    if (option.playsInline) {
+        $video.playsInline = true;
+        $video['webkit-playsinline'] = true;
+    }
+
     if (option.theme) {
         art.theme = option.theme;
     }

packages/artplayer/src/scheme/index.js

@@ -55,6 +55,7 @@ export default {
     subtitleOffset: b,
     miniProgressBar: b,
     useSSR: b,
+    playsInline: b,
     ads: [
         {
             url: s,

packages/artplayer/types/artplayer.d.ts

@@ -319,6 +319,11 @@ type Option = {
      */
     useSSR?: boolean;
 
+    /**
+     * Whether use playsInline in mobile
+     */
+    playsInline?: boolean;
+
     /**
      * Custom plugin list
      */