CHiLO Bookは通常、ビデオをvideoタグで埋め込んでいますが、Chromeで見た場合、右下にはダウンロードボタンが表示されます。
普通のウェブサイトならばあっても問題ないかもしれませんが、マイクロレクチャーの電子書籍という特性上、あまりダウンロードはさせたくありません。
じゃあどうしよう。そうだこのボタンを消してしまおう、ということになりました。
やり方は、今のところ2通りあります。
1. ControlsList APIを使う
この機能は最新版のChrome58で実装された機能で、videoタグのオプションを指定することで、VideoタグのUIの一部を消してしまえるものです。
例えば、ダウンロードボタンのみを消したい場合は、以下のようにします。
<video controls="controls" controlslist="nodownload">
サンプルはこちらにあります。自分の環境では、Chrome58でリンク先を見ると、UIの一部が消えているのを確認できました。一方、Vivaldi正式版のように、Chromiumエンジンを使っているけれども、バージョンが古い（Chrome57系）ものでは、再現できませんでした。2017-04-28: Vivaldiのアップデートでブラウザエンジンが更新され、再現するようになりました。
また、CHiLO Bookにおいては中身がXHTMLであるためか、同じオプションを挿入してもcontrolsListのように大文字を含む指定をすると、再現することができませんでした。2017-04-28: 一部誤りがあったので訂正しました。
2. CSSで消してしまう
こちらは所謂CSSハックで、UIを隠してしまいます。この問題について報告されているChromiumのissueではdirty workaround
であり、他のWebkitベースのブラウザで機能が損なわれる可能性があると指摘されています。
方法はCSSに以下を追記します。
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
古いバージョンのChromeで編み出された方法なので、現在も有効かどうか怪しくなっています。
また、videoタグのコントロールパネルのwidthをいじってやろうという中々に強引な方法なので、スマホのChromeやSafariでは、隣のボリュームバーが途切れたりします。
どちらの方法も問題がありますが、何とか影響の少ない範囲で着地点を見つけようと思います。
この作業が終わったら俺、新バージョンのCHiLO Producerをリリースするんだ……。
