Web Video Capture - Webブラウザでスクリーンキャプチャ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5のAPIはどんどん追加されており、多くの機能がWebブラウザ上で実現できるようになっています。例えばWebカメラを使ったチャットの最中に、自分のデスクトップやアプリケーションの画面を共有することもできます。 今回紹介するWeb Video Captureは画面をキャプチャし、動画として保存するデモです。 Web Video Captureの使い方 画面共有を開始します。画面全体、または特定のアプリケーションやWebブラウザのタブを指定できます。 キャプチャした内容をプレビューできます。 Web Video Captureで録画した内容はWebM形式でダウンロードできます（Google Chromeの場合）。以前はスクリーンキャプチャをしようと思うと専用のソフトウェアが必要
こんな無料素材があったとは！ページの背景いっぱいに表示するアニメーションの動画素材 -Vidlery
Vidleryのアニメーション素材 Vidleryの使い方 Step 1: アニメーションのダウンロード 各アニメーションをクリックすると、モーダルウインドウが表示されるので、「Download」をクリックしてダウンロードします。 「Download」をクリック Step 2: ファイルのアップロード ダウンロードしたファイルを解凍し、ファイルをすべて利用するサーバーにアップロードします。 .jpg .mp4 .webm Step 3: ページに実装 下記のコードをファイル・パス名を変更して、記述します。 <div class="homepage-banner"> <div class="animation-container"> <div class="mask"></div> <video autoplay loop class="fillScreen" poster="URL_PAT
Rec - Eletron製のスクリーンキャスト
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアを紹介する際にデスクトップの操作を記録することは多々あります。最近はアニメーションGIFをよく使うのですが、YouTubeにアップロードする場合は動画で録画する方が良いでしょう。 今回紹介するオープンソース・ソフトウェアはRec、Electron製のデスクトップレコーダーです。 Recの使い方 Recを実行したところです。ウィンドウごとに録画を行うようになっています。 録画した動画を保存します。形式はWebMです。 撮影した動画です。アニメーションGIF化しているのでぎこちないですが、実際にはスムーズです。 RecはCanvasタグを使ってウィンドウのスクリーンショットを撮り続け、それをWebMとして出力しています。JavaScriptで行っているようです。かなり強引に
webm.js - Webブラウザ上でWebMエンコード MOONGIFT
現在主流の動画フォーマットと言えばMPEG4ですが、オープンかつライセンス料無料で使える動画フォーマット、WebMも見逃せません。MPEG4よりもサイズが小さくなり、画質もほとんど変わらず利点の多いフォーマットです。 問題はエンコーダーの存在であったり、再生するデバイスの多さにあるでしょう。そこで使ってみたいのがwebm.jsです。Web上でWebM動画のエンコードができます。 webm.jsの使い方 webm.jsのデモです。Webページ上に動画をドラッグ&ドロップします。 そうすると元動画のプレビューが表示されます。設定も変更できます。 エンコード中…それなりに時間がかかります。 できあがりました。ダウンロードまたはWebMでのプレビューができます。 こちらがプレビュー。WebM版です。サイズは約半分になりました。 webm.jsはFirefoxに最適化されているようです。Chrome
HTML5の標準を狙うGoogleの動画フォーマット「WebM」のこれまでまとめ
高画質かつ高圧縮の「H.264」がビデオフォーマットの主役の座についていますが、次世代のウェブフォーマットであるHTML5においては、H.264とともに主役として期待されているのがGoogleの開発する「WebM」です。WebMのこれまでの流れと今後の動画標準規格を巡る争いについてまとめてみました。 Google builds WebM patent pool of its own to fight back against MPEG-LA | Ars Technica http://arstechnica.com/business/2011/04/google-builds-webm-patent-pool-of-its-own-to-fight-back-against-mpeg-la/ Google and MPEG LA Announce Agreement Covering VP
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
