/motoso/✅Tweetを取り込むPopup menu v2：動画も引用できるようにする

generated at 11/17/2024, 8:27:51 AM
✅Tweetを取り込むPopup menu v2：動画も引用できるようにする
from Tweetを取り込むPopup menu v2



利用した感想
大きい動画がページに挟まると見づらいので一番小さいのでいいかも


video要素を眺める
 video.poster  サムネイル
 video.variants に各種URL
これからURLを取得する必要があるが、URLは増減しそうだし文字列抽出があるのでやや面倒。GPTでショートカットする。
zsh"video": {
    "aspectRatio": [
        4,
        3
    ],
    "contentType": "media_entity",
    "durationMs": 25375,
    "mediaAvailability": {
        "status": "available"
    },
    "poster": "https://pbs.twimg.com/ext_tw_video_thumb/1637231504135979008/pu/img/fovpeMW5PhoHOzNO.jpg",
    "variants": [
        {
            "type": "video/mp4",
            "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/360x270/2uNLd70OTKMrXOTc.mp4?tag=12"
        },
        {
            "type": "video/mp4",
            "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/480x360/pQfxn-P2eFiMzS7_.mp4?tag=12"
        },
        {
            "type": "application/x-mpegURL",
            "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/pl/TFSxJvxOtzft4OtY.m3u8?tag=12&container=fmp4"
        },
        {
            "type": "video/mp4",
            "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/960x720/o9q2H41DJFhMOALs.mp4?tag=12"
        }
    ],
    "videoId": {
        "type": "tweet",
        "id": "1637231593432707073"
    },
    "viewCount": 1524426
}


問題を定義してChatGPTに渡す
 （要約 by ）まず最大の解像度をURLから取得し、そのURLを取得するという方法。
あまりスマートではないと感じた
以下は、与えられたjsonから、動画の解像度が最も大きいものを取得するJavaScriptコードの例です。もし解像度が大きなものがない場合は、最も小さい解像度の動画を取得します。
jsconst variants = [
  {
    type: "video/mp4",
    src: "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/360x270/2uNLd70OTKMrXOTc.mp4?tag=12"
  },
  {
    type: "video/mp4",
    src: "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/480x360/pQfxn-P2eFiMzS7_.mp4?tag=12"
  },
  {
    type: "application/x-mpegURL",
    src: "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/pl/TFSxJvxOtzft4OtY.m3u8?tag=12&container=fmp4"
  },
  {
    type: "video/mp4",
    src: "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/960x720/o9q2H41DJFhMOALs.mp4?tag=12"
  }
];

let maxResolution = 0;
let videoUrl = null;

variants.forEach((variant) => {
  const match = variant.src.match(/\/vid\/(\d+)x(\d+)\//);
  if (match) {
    const resolution = parseInt(match[1]) * parseInt(match[2]);
    if (resolution > maxResolution) {
      maxResolution = resolution;
      videoUrl = variant.src;
    }
  }
});

if (videoUrl == null) {
  variants.forEach((variant) => {
    if (variant.type === "video/mp4") {
      videoUrl = variant.src;
      return;
    }
  });
}

console.log(videoUrl);
このコードは、正規表現を使用して、動画URLから解像度を抽出し、解像度が最も大きい動画を選択します。もし解像度が大きなものがない場合は、最も小さい解像度の動画を選択します。最後に、選択された動画のURLをコンソールに出力します。


（要約 by ）mp4の動画に対して解像度をループして大きければURLを入れかえるという方法
GPT-3.5よりループが少なく、スマートだと感じた
以下のJavaScriptコードは、与えられたJSONから最も高い解像度の動画を取得する方法を示しています。
jsconst json = {
  "variants": [
    {
      "type": "video/mp4",
      "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/360x270/2uNLd70OTKMrXOTc.mp4?tag=12"
    },
    {
      "type": "video/mp4",
      "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/480x360/pQfxn-P2eFiMzS7_.mp4?tag=12"
    },
    {
      "type": "application/x-mpegURL",
      "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/pl/TFSxJvxOtzft4OtY.m3u8?tag=12&container=fmp4"
    },
    {
      "type": "video/mp4",
      "src": "https://video.twimg.com/ext_tw_video/1637231504135979008/pu/vid/960x720/o9q2H41DJFhMOALs.mp4?tag=12"
    }
  ]
};

function getHighestResolutionVideo(variants) {
  let highestResolution = -1;
  let highestResolutionVideoSrc = null;

  for (const variant of variants) {
    if (variant.type === 'video/mp4') {
      const [width, height] = variant.src.match(/\d+x\d+/)[0].split('x').map(Number);
      const resolution = width * height;

      if (resolution > highestResolution) {
        highestResolution = resolution;
        highestResolutionVideoSrc = variant.src;
      }
    }
  }

  return highestResolutionVideoSrc;
}

const highestResolutionVideoSrc = getHighestResolutionVideo(json.variants);
console.log(highestResolutionVideoSrc);
このコードは、variants 配列内の各動画に対して、video/mp4 タイプの動画を探し、最も高い解像度を持つ動画のURLを取得します。getHighestResolutionVideo 関数は、最も高い解像度の動画URLを返します。


ここまでくるとGitじゃないと辛い