(キャッチーなタイトルをつけてみたかっただけです。そんな大げさなことではありません。すみません。)
大罪って？
abemaTVですが、今までの動画配信サイトにはない結構痛い不具合があります。
それが、映像の**「見切れ」**これがabemaTVが犯した大罪です。
ほとんどのチャンネルは、多少見切れていても楽しむのにそれほど影響を及ぼしませんが、ただ、海外の特に字幕付きコンテンツとなると話が違ってきます。この見切れにより、字幕部分が見切れてしまい読めなくなってしまっているのです。
なぜこんなことに
ブラウザーの幅に連動して映像コンテンツのリサイズが行われるのですが高さには連動していません。
ブラウザーのウィンドウを最大化した場合、16:10のモニターでしたら、ブラウザーやシステムの設定にもよりますがChromeの場合、タブやアドレスバー、ブックマークバー、そしてタスクバーの高さを差し引いてもクライアントサイズ(window.innerXxxxx)が16:9に近いものとなり(私の場合ほぼぴったり)、映像のほぼ全体が表示されますので字幕が見切れません。
ただ、16:9以上の横長なアスペクト比のモニターの場合は確実に見切れてしまいます。さらに映像コンテンツのY座標は>=0の範囲で上下し、マイナスとはならず、映像の上部は見切れないですが、下部がその分大幅に見切れてしまいます。
CSSでいうところのbackground-size:coverのようにはみ出し部分が左右もしくは上下が均等になるようなリサイズでしたらまだ救いがあったかもしれませんが・・・。
私は所有しておりませんのでわかりませんが、世の中には21:9という超ワイドなモニターもありますので、これでウィンドウを最大化してabemaTVを見たら3分の2くらいしか見れないのではないでしょうか。
前述のように、横長モニターにおいてはブラウザーの幅を縮めれば映像全体を見ることができますが、abemaTVを見るとき最大化解除するというのはちと面倒です。
前置きが長くなりましたが
ということで、16:9以上の横長なアスペクト比のモニターでも映像全体を表示する拡張機能(Chrome限定)を作成しました。
これで、字幕が読めるようになります。
_b_m_TVの見切れを修正する拡張機能
ver 0.0.8で、「新着コメントを表示」を自動クリックする機能を追加しました。また、コメントリストを表示しても映像全体が見れるようリサイズするようにしました。
あとがき拡張機能を作成するにあたり
ちょっと困ったことがあります。
各チャンネルのアドレスは"https://abema.tv/now-on-air/~"で始まるのですが、manifest.jsonのcontent_scriptsのmatchesに"https://abema.tv/now-on-air/*"と設定した場合、直接、"https://abema.tv/now-on-air/~"にアクセスすれば拡張機能が発動してくれるのですが、トップページ(https://abema.tv)から各チャンネルにアクセスすると拡張機能がなぜか発動してくれません(リロードすれば発動する)。
これは今のところ原因がつかめません。
コメントをいただき、pushStateで画面遷移しているのが原因のようです。
ですので、pushStateをオーバーライドすればいいのではと試してみたのですが、トップページから、各チャンネルページにアクセスできなくなってしまいました。もっと調べればもしかすると行けると思うのですがあきらめました。
スクリプトでURLを判定するコードを書いて実装ししました。
以上