TIESのブログ

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をリリースするんだ……。

TIES新規ページの進捗-2の続きです。

これまでCHiLOとはのページを中心に書いてましたが、
英語版のページも大体出来てきました。

もう１つ作っている技術資料のページもほぼ出来てきたため、

全部仕上がったらあとは問題ないか内容の確認をおこない、
レイアウトの微調整さえすれば公開できるかと思います。

昨日の続きです。

細かなレイアウト調整も終わったのですが、スライドの所に変な黒ぽちが残っていました。

確認した所、全体のcss設定で li タグに対して表示するようにしていました。
流石に全体の所を変更するのは怖いので、スライド内の li に対しては表示しないよう追加することで対応しました。

追加プラグインに書かれたclassに対しての対応なので、アップデート時に変わった場合とか考えると少し怖いですが、
逆に何かあっても影響受けるのもスライドの所だけなので大丈夫ですね！きっと！

前々から進めているHPのページ製作です。

大体は出来てきましたが、上下のスペースの調整など、
細かなレイアウト調整が残っています。

併せて英語版のページも作成しているので、
完成までもう少しかかりますが近いうちに公開できるかと思います。
公開する際にはまたお知らせします。

少しずつ設定を進めていた自動ページめくり機能ですが、
これを反映したCHiLO Bookをサンプル用に作成しています。

今回この設定にて作成するのは、OER-Collectionの予定です。

現在動画を集めて、本への登録を進めています。
いつになるかは未定ですが、公開の目途が立ちましたらまたお知らせいたします。