ヅラッシュ！ by NI-Lab.

Twitter の動画投稿機能は2015年1月からスタートしたらしい。

最大140文字という制限を持つツイートですが、その文字数を超える思いを乗せることができます。画像やGIF、Vine、オーディオやビデオのファイルなど、これまでのさまざまな方法に加え、Twitterアプリから簡単に動画の撮影、編集ができ、そのままツイートに添付することができるようにしました。

スマートフォンのTwitterアプリから離れることなく、大切な瞬間を動画取り込んでツイートに添えることが、数回のタップだけで簡単に行えます。動画の再生はさらに簡単。ツイート上にサムネイルで表示された動画を1回タップするだけで再生が始まります。

Twitterの新機能：グループダイレクトメッセージと動画の投稿

先日、Twitter に動画を投稿してみた。

→ NI-Lab.さんのツイート: "ストランドビーストの求愛行動 https://t.co/YJZGLjhlO8"

Twitter の API GET statuses/show/:id — Twitter Developers をコールして該当するツイートの情報を取得する。

APIのレスポンスを見ると、動画関係の情報はこのへん。

"extended_entities": {
  "media": [
    {
      "id": 892916610209431552,
      "id_str": "892916610209431552",
      "indices": [
        15,
        38
      ],
      "media_url": "http://pbs.twimg.com/ext_tw_video_thumb/892916610209431552/pu/img/MtJJBDhABRiTuLQp.jpg",
      "media_url_https": "https://pbs.twimg.com/ext_tw_video_thumb/892916610209431552/pu/img/MtJJBDhABRiTuLQp.jpg",
      "url": "https://t.co/YJZGLjhlO8",
      "display_url": "pic.twitter.com/YJZGLjhlO8",
      "expanded_url": "https://twitter.com/nilab/status/892916753776361472/video/1",
      "type": "video",
      "sizes": {
        "thumb": {
          "w": 150,
          "h": 150,
          "resize": "crop"
        },
        "medium": {
          "w": 600,
          "h": 338,
          "resize": "fit"
        },
        "small": {
          "w": 340,
          "h": 191,
          "resize": "fit"
        },
        "large": {
          "w": 1024,
          "h": 576,
          "resize": "fit"
        }
      },
      "video_info": {
        "aspect_ratio": [
          16,
          9
        ],
        "duration_millis": 10466,
        "variants": [
          {
            "bitrate": 832000,
            "content_type": "video/mp4",
            "url": "https://video.twimg.com/ext_tw_video/892916610209431552/pu/vid/640x360/NOGel3RtCshvKp0O.mp4"
          },
          {
            "content_type": "application/x-mpegURL",
            "url": "https://video.twimg.com/ext_tw_video/892916610209431552/pu/pl/phG6la_UNbchjW1P.m3u8"
          },
          {
            "bitrate": 2176000,
            "content_type": "video/mp4",
            "url": "https://video.twimg.com/ext_tw_video/892916610209431552/pu/vid/1280x720/95yUGRznnDAc1s2y.mp4"
          },
          {
            "bitrate": 320000,
            "content_type": "video/mp4",
            "url": "https://video.twimg.com/ext_tw_video/892916610209431552/pu/vid/320x180/ZU3F6Q7DQG7Xt-bE.mp4"
          }
        ]
      },
      "additional_media_info": {
        "monetizable": false
      }
    }
  ]
},

bitrate の値が一番大きいものが画像サイズが大きい動画らしい。

bitrate: 2176000
URL: https://video.twimg.com/ext_tw_video/892916610209431552/pu/vid/1280x720/95yUGRznnDAc1s2y.mp4
size: 1280x720

bitrate: 832000
URL: https://video.twimg.com/ext_tw_video/892916610209431552/pu/vid/640x360/NOGel3RtCshvKp0O.mp4
size: 640x360

bitrate: 320000
URL: https://video.twimg.com/ext_tw_video/892916610209431552/pu/vid/320x180/ZU3F6Q7DQG7Xt-bE.mp4
size: 320x180

動画のURLからmp4ファイルをダウンロードして自分のサイトに置く。

HTML5のVideo要素を使った以下のようなコードを埋め込んでみる。

<video width="600" height="338" controls>
  <source src="/f0/2017/95yUGRznnDAc1s2y.mp4" type="video/mp4">
  I'm sorry; your browser doesn't support HTML5 video with MP4.
</video>

↓再生できているだろうか？

tags: twitter movie

Posted by NI-Lab. (@nilab)