はじめに

この記事は、社内公開用に編集した記事をQiitaに転載したものです。
モザイクとか黒塗りとかが多いのはそのためです。ご了承ください。

tl;dr;

詳細

Twitter CardによるTwitterシェアをしたときに、ツイートにHLS動画を表示する方法が公式で提供されていたので、
やってみました。

ドキュメント： https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card

htmlに、以下のmetaタグを加えればよいです。

  <meta name="twitter:card" content="player"/>
  <meta name="twitter:site" content="@gecko655" />
  <meta name="twitter:text:title" content="Twitter Cardで"/>
  <meta name="twitter:description" content="HLS動画を表示させる"/>
  <meta name="twitter:image" content="https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>
  <meta name="twitter:player" content="https://s3-ap-northeast-1.amazonaws.com/xxxxxx/hls.html" />
  <meta name="twitter:player:width" content="640"/>
  <meta name="twitter:player:height" content="360"/>
  <meta name="twitter:player:stream" content="https://s3-ap-northeast-1.amazonaws.com/xxxxxx/hls.m3u8" />
  <meta name="twitter:player:stream:content_type" content="application/vnd.apple.mpegurl" />

twitter:image

Cardのクリック前に表示される画像です。
今回はこれを拝借しています。

twitter:player

ブラウザで表示されるHLS動画のhtmlファイルのURLです。
mp4などの通常の動画であれば、動画URLをそのまま記載すればよいですが、
mp4と異なり、HLS動画はjsライブラリを別に用意しないとChromeなどのPCブラウザで再生できないため、
ブラウザ上でHLS動画を表示できる（jsライブラリを参照してある）htmlファイルを用意し、
そのファイルへのURLを指定する必要があります。

↓こんな感じ

hls.html

<!DOCTYPE html>
<html>
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://vjs.zencdn.net/7.1/video-js.min.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.1.0/video.js"></script>
  </head>
  <body>
    <video id="test-video" class="video-js vjs-default-skin vjs-16-9" controls playsinline crossorigin="anonymous">
      <source src="https://s3-ap-northeast-1.amazonaws.com/xxxxxx/hls.m3u8" type='application/vnd.apple.mpegurl' />
    </video>
    <script>
      var main = function(){
        player = videojs("test-video");
        player.on(player, 'loadstart', function(){player.autoplay('any');});
      }
      main();
    </script>
  </body>
</html>

twitter:player:stream

スマホアプリ上で表示される動画のURLです。
Card部分をクリック後、アプリ内ブラウザ上が開き、ここで指定したURLに遷移します。
m3u8ファイルを指定していた場合はフルスクリーンで表示されます。

アプリ内に直接動画が表示されるわけではありません。
アプリ内ブラウザを介さないといけないということは普通のリンクとなんにも変わらないので、
あまり使う意味はないかなと思います。
普通に動画配信のWebページに飛ばしてあげたほうが、多くの場合快適な気がします。

注意点

Twitter Cardの挙動は、Card validator で検証できます。
https://cards-dev.twitter.com/validator
シェアするwebページのURLは、ポートが80番である必要があります。8080とかにWebサーバーを立てていると、 ERROR: Failed to fetch page due to: HttpConnectionTimeout などと言われて動きません。
HLS動画のURLは、HTTPSである必要があります。（webページのURLはHTTPのままで問題ありませんでした）
Twitter Cardのキャッシュは、最低でも3日以上はあるようです。キャッシュを飛ばすには、webページのURLを使い捨てにするしかなさそうです。 ( 末尾に ?t=1534737531 のようなものを付ければよさそう）

各サービスのTwitterシェアの挙動

おまけで、世にあるライブ配信サービスでTwitterシェアしたときの挙動を調べたので、書き留めておきます。

YouTube Live: ライブ配信の動画が入ったTwitter Cardが投稿される（この記事で紹介したやつです）
Twitcasting: ライブ配信の動画が入ったTwitter Cardが投稿される（この記事で紹介したやつです）
Periscope: ライブ配信がツイートに埋め込まれて投稿される。クリック必要なし。実装は謎だが多分Twitterの非公開機能を使用している。
LINE LIVE: ライブ中のスクショが入ったTwitter Cardが投稿される
showroom: ユーザーのプロフィール画像が入ったTwitter Cardが投稿される
ニコニコ動画: ユーザーのプロフィール画像が入ったTwitter Cardが投稿される
17 live: Twitterシェア機能を持っていない
MixChannel: ライブ中のスクショを含んだツイート(Twitter Cardではなくただの画像添付)

参考

Twitterカードで動画をインライン再生する方法(mp4動画の貼り方) https://qiita.com/makutenia/items/eb653dd91bc58b1736fd

Twitter CardでHLS動画をシェアさせる