feat: video requestPictureInPicture pratice

Author: crossskyLi

src/index.html

@@ -65,7 +65,11 @@
   <div class="justify">
     文字两端对齐文字两端对齐文字两端对齐文字两端对齐文字两端对齐
   </div>
-
+  <video controls muted="muted">
+    <source
+      src="http://aliyun36001.baomihua.com/05a0198bd7508ba99d9f54a6cb2c6945/5ced504f/3958/39574859_7_9a8aece27abb14c4d6f431752b2e8045.mp4"
+      type="video/mp4">
+  </video>
 </body>
 
 </html>

src/index.js

@@ -8,7 +8,7 @@ import { bindPloyfill } from '../bind_applay_call/bind.js'
 /* memory monitor */
 import monitor from '../memoryMonitor/index'
 
-
+import { reqVideoPictureInPicture } from '../video/index.js'
 
 
 

video/index.js

@@ -0,0 +1,21 @@
+
+export function reqVideoPictureInPicture() {
+  let video = document.getElementsByTagName('video')[0];
+  video.style.width = '1000px';
+  video.style.height = '1000px';
+  video.width = 1000;
+  video.height = 1000;
+  video.addEventListener('canplaythrough', function (event) {
+    const promise = video.play();
+    promise.then(() => {
+      video.removeAttribute('muted')
+      console.log(video.volume)
+    })
+    document.addEventListener('click', function () {
+      video.requestPictureInPicture();
+      video.volume = 1;
+    })
+  })
+}
+
+reqVideoPictureInPicture();