[B! html5] hiroaki256のブックマーク

ffmpeg.wasmを使ってブラウザ上で画面録画機能を実装した話

はじめに少し前までLinuxユーザだったので、Blogに使用するgifアニメを作るときにはffmpegを使っていました。最近Windowsに移行しまして、はてgifアニメを作るにはどうしたらいいのかな？と調べていたのですが、普通にffmpegで作れそうなことがわかりました(参考)。まぁ、結論としてはそうだったのですが、Windowsにいろんなアプリケーションをいれると動作不安定になるし嫌だな(久々にWindowsに戻ってきた人間の偏見です。)と思いまして、少し前にバズってたffmpeg.wasmを使ってブラウザ上でスクリーンを録画する機能でも作ってみるかということになりました。これで変なアプリケーションを入れずに済みそうだ。今回作ったものは、こんな感じのものです。左側でキャプチャ対象のエリアを指定して録画します。右側で録画の結果を表示して、ダウンロードします。余談ですが、Window

hiroaki256 2021/01/08

リンク

HTML5 Video: Synchronizing Playback of Two Videos - client side, design, performance, web applications - Bocoup

Upon first thought, you might think that synchronized playback of two video elements would be simple – however – because the timeupdate event of the video element is indeterminate beyond its specification description of “Every 15 to 250ms, or whenever the MediaController’s media controller position changes”, this is actually non-trivial. Today, on the Web Made Movies mailing list, a poster asked w

hiroaki256 2018/11/09

リンク

ここまでできる！HTML５で追加されたvideoタグが便利すぎる件 | CodeCampus

ここまでできる！HTML５で追加されたvideoタグが便利すぎる件更新日: 2018年11月15日公開日: 2015年10月19日 2015年の Webデザイン・トレンドでもある「動画」。多くの場合、バックグランドに動画を設置することで、Webデザインに活かされていますが、それ以外にも動画の使い方はいろいろとあります。 HTML 5 が 2014年 10月に正式にリリースされて 1年が経つ今、HTML 5から新たに追加された <video> タグの可能性についてふれてみたいと思います。<video> タグがはじめての方もいらっしゃると思いますので、直感的に <video> ってスゴイと思えるようなサンプルをいくつかピックアップしてみましたので、ご参照ください。ここまでデキル！HTML 5 を使った動画演出改めて HTML 5 の動画について 2008年に HTML5 の草案がリリースさ

hiroaki256 2018/11/08

リンク

2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がないウェブコンテンツのキーワードを指定するmeta keyw

hiroaki256 2016/12/20

リンク

Quasar Framework - SPA/ハイブリッドアプリを想定したHTML5デザインフレームワーク MOONGIFT

Cordovaに代表されるHTML5/JavaScriptを使ったスマートフォンアプリ、いわゆるハイブリッドアプリは海外では普及しています。HTML5やJavaScriptの実行速度が速くなったので、多くの目的において十分なパフォーマンスを出すようになっています。そんなハイブリッドアプリから通常のWebサイトまで幅広くこなせるデザインフレームワークがQuasar Frameworkです。 Quasar Frameworkの使い方デモです。スクリーンショット多めに紹介します。まずはヘッダー、フッター構成。ツールバー。タブ。 Android/iOSそれぞれにフィットしたデザインが用意されています。ボタン。画像付きカード。テーブル。リスト。チェックボックス。検索。アコーディオン。コンテクストメニュー。ギャラリー。スライダー。ステッパー。ツールチップ。ツリー。ビ

hiroaki256 2016/09/17

リンク

NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ MOONGIFT

ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。 NEditorJSの使い方 NEditorJSのメイン画面です。ノードはマウスで接続できます。実際に操作しているところです。 NEditorJSでは、まずアウトプット側の黒丸をクリックして、その後インプット側の黒丸をクリックします。自動的に線が伸びていくので分かりやすいでしょう。ノードはマウスでドラッグ&ドロップできます。ユーザ向けにビジュアルプログラミング環境やデータ処理環境を提供する際に使えそうです。NEditorJSはHTML5/JavaScript製のオープンソース・ソフト