TwitterとFacebookで様子が違ってハマったのでメモ
状況
brightcoveでは
https://players.brightcove.net/<account-id>/default_default/index.html?videoId=<video-id>
として動画が得られる他
https://players.brightcove.net/<account-id>/default_default/index.html?videoId=ref:<video-reference-id>
とすることで、Brightcove側で振られる動画IDのほかに、自分で指定できる「参照ID」で動画を得ることができる。
FacebookとTwitterでOGPを指定して動画を流そうとしたところ、TwitterではうまくいったもののFacebookでは失敗した
（TwitterはOGPじゃなくtwitter:playerの指定になるがまあ）
原因と検証
Open Graphオブジェクトデバッガー (https://developers.facebook.com/tools/debug/og/object/) で確認したところ、セミコロンが%3Aにエンコードされている。
brightcove側でデコードは行わないため、動画が見つからなく失敗している
なんとなく何がエンコードされたか検証してみる
| 文字 | エンコード結果 |
|---|---|
| ! | %21 |
| " | %22 |
| # | # |
| $ | パースエラー |
| % | %25 |
| & | & |
| ' | %27 |
| ( | %28 |
| ) | %29 |
| * | %2A |
| + | + |
| , | %2C |
| - | - |
| . | . |
| / | %2F |
| : | %3A |
| ; | %3B |
| < | %3C |
| = | = |
| > | %3E |
| ? | %3F |
| @ | %40 |
| [ | %5B |
| \ | %5C |
| ] | %5D |
| ^ | %5E |
| _ | _ |
| ` | %60 |
| { | %7B |
| ｜ | %7C |
| } | %7D |
| ~ | %7E |
わっかんねー
組み込みの関数でこんなエスケープ返すのってなんかあんのかな
自分で組んだのかな
他にもエスケープに関していろいろ調べてた人がいたので確認する
HTTPのクエリパラメータにコロン(:)を書くのは不正なのか。
わけわっっっっっかんねー
まとめ
エスケープはよくわかんない
（ogpとtwitter cardは同じじゃないけど）どちらにも同様に動画流そうとすると違いにハマるかもしれない
一応Brightcove側にデコードしてくれないか聞いてみるけど……
あとついでに、Qiitaのマークダウンで、表中に|(vertical line)をいれようとしてエスケープしてもうまくいかなかった
上のは全角になってる