音声コーデックOpusで録画した動画ファイルはブラウザで再生するのが一番手軽かもしれない

音声コーデックOpusで録画した動画ファイルはブラウザで再生するのが一番手軽かもしれない
Ultramaxって特徴的な色だよね。コントラストも高くてどぎまぎ。

互換性を意識しながら設定

たまぁに画面録画をすることがあり、先日もコーデックは何にしようかと答えのない選択肢にうーんと頭を抱えていた。

いろいろな問題を解決しているおニューなコーデックを使いたいのだけれど、変なコーデックを使うと再生できないんだよねー。

とりあえず理屈ではこうやっておこうかなと一応考えが固まった。

  • 動画コンテナとしてはHybrid MP4(つまり内部的にはFragmented MP4を使って、外から見れば普通のMP4として使えるので互換性もよき)
  • 音声コーデックはOpus。ビットレートは160 Kbpsに設定するので劣化どうこうというよりかはファイルサイズの削減が狙い。

WindowsだとOpusだめっぽい?

ここで問題!動画コンテナはMP4なので当然Windows11標準のMedia Playerで開けるのだが、音声が再生されない。エラーポップアップも出てきて、再生無理といわれる。

たしかにWindowsのMedia Playerがサポートするコーデックのリストに、Opusの名はない。

Media Player のコーデック - Microsoft サポート
コーデックを使用すると、さまざまな形式のオーディオファイルとビデオファイルを再生できます。 Media Player では、さまざまなコーデックがサポートされています。 ほとんどは箱の外に含まれています。いくつかの追加のコーデックは、Microsoft Store からインストールできます。

これは困ったと思い、古き良きAACにコーデックを切り替えようと一時は思った。

いやいやOpusを使おうぜ!ブラウザで再生すればいいじゃん

が、しかし!

現代のWindowsユーザーが実際に動画を再生する環境は、この公式リストよりもはるかに多様で複雑。

友達に動画ファイルを渡したときに、友達はWindows Media Playerで開くだろうか。多くの場合、ブラウザで開いたり、既にインストールされている他のメディアプレイヤーを使用したりするはず。

現代的な観点から見ると、むしろブラウザでの対応状況の方が重要かもしれないってことです。

ウェブ動画コーデックガイド - ウェブメディア技術 | MDN
このガイドでは、ウェブ上で使用する可能性の高い、または使用を検討している動画コーデックを紹介し、その機能の概要と互換性や有用性に関する懸念、そして自分のプロジェクトの動画に適したコーデックを選ぶためのアドバイスを提供します。

意外に知られていない事実ですが、ブラウザは現代において最も普遍的なメディアプレイヤーとして機能しています。WebベースのアプリケーションやサービスがOpusを標準採用している背景には、この状況があります。

パソコンでは動画ファイルをChromeやEdgeといったブラウザーにドラッグアンドドロップするだけで開けちゃいます。というか、視聴できちゃいます。

言われてみれば、YouTubeだってTwitchだって動画をストリーミングしているというだけで、動画を扱っているのはブラウザーです。画像や音声をブラウザーで開けるのと同様、当たり前すぎて気づきませんよね。

ということで、Chrome、Firefox、Edgeといった主要ブラウザは、すべてOpusを標準サポートしています。

Opus音声フォーマット | Can I use... HTML5、CSS3などのサポートテーブル

つまり、友達はファイルをブラウザにドラッグ&ドロップするだけで、追加ソフトウェアなしに再生できるということです。

実際YouTubeも互換性のためにAACはあるものの、配信の標準としてOpusを使っています。

ということで、録画時は音声コーデックとして安心してOpusを使用し、ファイルサイズと効率性の恩恵を受けようかなと思います。他人との共有が必要になった場合には、あんまり気にずそのまま渡して、標準ソフトで開けなさそうならブラウザで開くことをおすすめしてみて、それでもだめなら、FFmpegでAACに変換しようかなあと思います。

Read more

TailscaleのSubnet Routesを消す

SynologyのNASにTailscaleを導入し、便利に使っている。 TailscaleにはSubnet routersという機能がある。 これは、Tailscaleネットワークに接続されたデバイスが、そのデバイスが接続されているローカルネットワーク(サブネット)全体へのアクセスを他のTailscaleデバイスに提供できる機能だ。つまり、Subnet routerとして設定されたデバイスを経由することで、Tailscaleネットワーク上の他のデバイスから、そのローカルネットワーク内の機器にアクセスできるようになる。 Subnet routers · Tailscale DocsUse subnet routers to give devices outside your local network access to services within specific subnets. Extend your private network with Tailscale.Tailscale 便利そうだなと思って設定をしてみたものの、結局使うことがなかった。 公式ドキュメント

By Sakashita Yasunobu

Boids

群れに指揮者はいない 鳥の群れは、誰かが指示を出しているわけではない。魚の群れも同じ。それぞれが周囲を見て、少しだけ動く。その繰り返しが、全体として秩序ある動きを生む。 これを1986年にCraig Reynoldsがコードで再現した。名前は Boids(bird + oid)。個体に与えるルールは3つだけ。 1. Separation ── 近すぎたら離れる 2. Alignment ── 周囲と同じ方向を向く 3. Cohesion ── 群れの中心に寄る これだけで、群れは群れらしく動く。 なぜ作ったか 群れの動きは、見ていて飽きない。 * 単純なルールから複雑な動きが生まれる ── 創発(emergence)の典型例。設計していないのに、設計したかのように見える。 * 自分のブログに置きたかった ── 静的なページに、動くものがあると空気が変わる。 * Web Components で作りたかった ── どこにでも持っていける部品として。 設計の話 見えないときは止める 画面外でアニメーションを回し続けるのは無駄。Inte

By Sakashita Yasunobu

Days Elapsed

一年を「面」で見る 一年は365日。数字で見ると多いけど、並べてみると案外少ない。 12ヶ月を並べて、過去を塗りつぶして、今日を光らせる。それだけのカレンダーを作った。進捗バーが「一次元」なら、これは「二次元」の進捗表示。 Year Progress一年は50週ちょっとしかない 2026年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、

By Sakashita Yasunobu