[B! JavaScript][Javascript][動画] mohnoのブックマーク

mohno id:mohno

JavaScriptとJavascriptと動画に関するmohnoのブックマーク (3)

ブラウザ上でお手軽動画圧縮 | gihyo.jp
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。今回は、Misskey v2025.10.0に含まれる予定の「動画圧縮機能」で採用した、ブラウザ上で動画処理を行えるライブラリ「Mediabunny」を紹介します。モチベーション Webサービスにおいては、アップロードされた動画をサーバーにそのまま保存するのではなく、ストレージ節約のため非可逆的に圧縮したり、互換性向上のため再エンコードを行う、というシチュエーションは一般的です。 Misskeyでも動画の投稿が可能なので、サーバーサイドでffmpegを利用してサムネイルの生成を行うなどの処理を行っています。しかし、サーバーサイドで動画処理を行うのは画像と比べてもはるかに負荷がかかりますし、最終的に圧縮されるとしてもユーザーはオリジナル動画をいちどアップロードする
mohno 2025/10/06
MPEG-2が前世紀、MP4からでも20年以上経つのか。そりゃJavaScriptで動画圧縮くらいできるか。コーデックは何だろうな。H.264は、もう特許切れてるのか。

技評

しゅいろ

Misskey

Mediabunny

動画

圧縮

ブラウザ

JavaScript

MP4

H.264
リンク
ffmpeg.wasm | ffmpeg.wasm
ffmpeg.wasm ffmpeg.wasm is a pure WebAssembly / JavaScript port of FFmpeg enabling video & audio record, convert and stream right inside browsers! Data Security ffmpeg.wasm runs only inside your browser, data security is guaranteed as no data is sent to remote server. Powered by WebAssembly ffmpeg.wasm transpiles ffmpeg source code to WebAssembly code using Emscripten to achieve optimal performance.
mohno 2021/08/22
かつてSilverlightで作ったビデオ編集機能(TopBanana)は、たんに開始点と終了点を決めて連続的に再生するだけだったけど、これでまともな“編集”ができるようになる(?)

FFMPEG

WebAssembly

JavaScript

ブラウザ

技術

動画

エンコード
リンク
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
mohno 2021/04/30
「PiPが動画にしか対応していない部分は変わりません。なのでHTMLを動画にしてやれば任意の要素をPiPできる」←おっ、おぅ……。そこまでしてやりたいものなのか、PiP。「ユーザのインタラクション等は再現できません」

古都こと

JavaScript

HTML

ブラウザ

開発

技術

動画
リンク
1