player (Twitter Card)

<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://www.example.com/example.html">
<meta name="twitter:site" content="@example">
<meta name="twitter:title" content="twたいとる">
<meta name="twitter:player:width" content="504"><!-- validator は 436-->
<meta name="twitter:player:height" content="252"><!-- validator は 218-->
<meta name="twitter:image" content="http://www.example.com/example.png">

説明

動画再生用だが、以下のような注意事項がある:

詳しくは後述。PCでは以下のように展開される。
再生前:

再生中:

なおCard validatorと本番では微妙にサイズが異なるので、気になる場合は本番で試すと良い。画像のカードと違って自動でフィットはされない。

かつては承認プロセスがあったが、今は無いし公式ドキュメントにも記述は無い。

スマホアプリでは展開されない

タイムライン上では以下のように表示され、

タップするとポスター画像が表示され、

ポスター画像をタップするとtwitter:playerで指定したURLをブラウザで開く。

Android/iOSで共通の動作。ほとんどのユーザーがスマホから利用している現状、このカードを使う意義はあまり無いように思う。

X-Frame-Originの設定が必要

Blink系(Chrome/Opera)以外のメジャーブラウザはX-Frame-Origin HTTPヘッダーを解釈するため、twitter:playerで指定したURLでこれの設定が必要。

仕様的には複数オリジンをスペース区切りで指定できるが、それに対応していないブラウザがあるため、基本的に本番とvalidatorで切り替えなければならない。validatorでは以下:

X-Frame-Options: allow-from https://cards-dev.twitter.com

本番では以下:

X-Frame-Options: allow-from https://twitter.com

動画形式はなるべくクロスブラウザなものを用意

iframe内のHTMLは自由なので、videoを使って複数の形式をフォールダウンする事もできる。

<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
 Sorry, you can't show this movie.
</video>

参考

プロパティ

twitter:card  必須  player
player固定。
twitter:description  [文字列]
だいたいmeta name=descriptionと同じ。
twitter:image  必須  [URL]
ポスター画像の絶対URL。JPG、PNG、WEBP、GIFが可能でGIFアニメーションは最初の1フレームだけになる、と細かく書かれている。縦x横が68,600ピクセル以上である必要がある。サイズは5MB未満。
twitter:image:alt  [文字列]
画像のalt属性みたいなの。全角で最大420文字。超えた分はカットされる。
twitter:player  必須  [URL]
iframe内に表示するプレイヤーのHTMLドキュメントの絶対URL。httpsでなければならない。動画ファイルを直接指定しても無視される。iframe内で読み込むコンテンツもすべてhttpsでなければならない。
twitter:player:height  必須  [正の整数]
iframeの高さ。最大504。最小は0でも解釈してくれる。
twitter:player:width  必須  [正の整数]
iframeの幅。一件指定できるようだが、506未満だと微妙に狭まった表示になり、それより上だと無視されるので、506以外の値を指定する意味はない。
twitter:site  必須  @[Twitterスクリーンネーム]
そのカードに紐づくTwitterのスクリーンネーム(@hogehoge形式)。他カードと異なり必須。
twitter:title  必須  [文字列]
だいたいtitleと同じ。