PinP

by noromanba 2019-05-04 [2019/05/04 07:43:39]
(Forked from picture-in-picture by hogashi)

toggle the video Picture-in-Picture mode

@@ -10,15 +10,35 @@
 
 // e.g.
 // https://vimeo.com/44039048
-{
+// http://www.htmq.com/html5/sample/004_1.html
+//
+// TBD shadow-root e.g.
+// https://interactive-examples.mdn.mozilla.net/pages/tabbed/video.html
+//  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
+(() => {
     'use strict';
     // c.f.
     // https://wicg.github.io/picture-in-picture/
     // https://github.com/WICG/picture-in-picture
-    document.pictureInPictureElement ?
-        document.exitPictureInPicture() :
-        [...document.body.querySelectorAll('video')].find(v => {
-            v.src && v.requestPictureInPicture();
-        });
-}
+    if (document.pictureInPictureElement) {
+        document.exitPictureInPicture();
+        return;
+    }
+
+    [...document.body.querySelectorAll([
+        /*/
+        'video[src]'
+        // NIY :has() Selectors Level 4
+        'video:has(> source)',
+        /*/
+        'video',
+        //*/
+    ])].some(v => {
+        if (v.src || [...v.querySelectorAll([
+            'source',
+        ])].some(s => !!s && s.src)) {
+            v.requestPictureInPicture();
+        }
+    });
+})();
 

• /*
   * @title PinP
   * @description toggle the video Picture-in-Picture mode
   * @include http://*
   * @include https://*
   * @contributor hogashi http://let.hatelabo.jp/hogashi/let/hJmexZGA67IB
   * @license MIT License https://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // e.g.
  // https://vimeo.com/44039048
  // http://www.htmq.com/html5/sample/004_1.html
  //
  // TBD shadow-root e.g.
  // https://interactive-examples.mdn.mozilla.net/pages/tabbed/video.html
  //  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
  (() => {
      'use strict';
      // c.f.
      // https://wicg.github.io/picture-in-picture/
      // https://github.com/WICG/picture-in-picture
      if (document.pictureInPictureElement) {
          document.exitPictureInPicture();
          return;
      }
  
      [...document.body.querySelectorAll([
          /*/
          'video[src]'
          // NIY :has() Selectors Level 4
          'video:has(> source)',
          /*/
          'video',
          //*/
      ])].some(v => {
          if (v.src || [...v.querySelectorAll([
              'source',
          ])].some(s => !!s && s.src)) {
              v.requestPictureInPicture();
          }
      });
  })();
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。