artplayer-plugin-iframe(#407)

* update artplayer-plugin-iframe

docs/assets/css/style.css

@@ -75,6 +75,7 @@ img {
     display: flex;
     justify-content: space-between;
     height: 100%;
+    line-height: 1;
 }
 
 .header .qq {
@@ -265,3 +266,14 @@ img {
     background-position: center center;
     background-size: contain;
 }
+
+.fullscreenWeb {
+    position: fixed;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}

docs/assets/example/iframe.js

@@ -0,0 +1,43 @@
+const $iframe = document.createElement('iframe');
+$iframe.allowFullscreen = true;
+$iframe.width = '100%';
+$iframe.height = '100%';
+
+const $container = document.querySelector('.artplayer-app');
+$container.innerHTML = '';
+$container.appendChild($iframe);
+
+const iframe = new ArtplayerPluginIframe({
+    iframe: $iframe,
+    url: '/iframe.html',
+});
+
+iframe.message(({ type, data }) => {
+    switch (type) {
+        case 'fullscreenWeb':
+            if (data) {
+                $iframe.classList.add('fullscreenWeb');
+            } else {
+                $iframe.classList.remove('fullscreenWeb');
+            }
+            break;
+        default:
+            break;
+    }
+});
+
+iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        fullscreen: true,
+        fullscreenWeb: true,
+    });
+
+    art.on('fullscreenWeb', (state) => {
+        ArtplayerPluginIframe.postMessage({
+            type: 'fullscreenWeb',
+            data: state,
+        });
+    });
+});