やりたいこと 認証がかかったストレージのAPIからJavaScriptで動画データを取得してvideoタグで再生したかった. FetchAPIやXHRでMP4ファイルにアクセスはできるので,これをブラウザ上で再生したいだけだけなのだけど... 普通にvideoタグのsrcにAPIのURLを突っ込む → リクエストヘッダ等をセットできなくて認証できない FetchAPIでデータを読んでblobを再生する → ファイル全体を読まないと再生開始できない(動画は数百MBある) (参考記事) MPEG-DASH等のFragmented MP4を読み込んでMSEで再生する → 事前にサーバ側に置くデータを変換しないと再生できない (参考記事) 意外とめんどう. JavaScriptでFragmented MP4を作る +------------+ +-----------+ +------------
WebAssemblyを使うことで、これまでのWebでは難しかったスピードでアプリケーションを実行できるようになります。DOMやネットワークが使えないといった制限はありますが、計算処理を高速に行えるのは大きなメリットです。 そんなWebAssemblyでは既存のソフトウェアをEmscriptenを通してWebAssmbly化する試みが多数行われています。今回は動画処理で有名なFFMPEGをWeb上で動くようにしたffmpeg.jsを紹介します。 ffmpeg.jsの使い方 左側はWebカメラの映像で、まずこれを録画します。 録画を停止すると処理が開始します。少し時間がかかります。 右側に動画が表示されます。 デモではWebカメラの映像を取り込んで、ffmpeg.jsを使ってH.264(MP4)に変換しています。同様の処理をJavaScriptだけで行うのは処理時間を考えるに、相当困難でしょ
本記事で作成するサンプル。HTML5 Videoを使ってビデオを再生している。Safariではフルスクリーンモードにも対応 これまでブラウザーでビデオを再生するには、Flash Playerなどのプラグインの力を借りなければなりませんでした。ところが、現在策定が進められている次世代のWeb標準規格「HTML5」では、ブラウザー標準の機能だけで手軽にビデオを再生できます。 「HTML5 Videoって使われているの?」と疑問に思う方もいるかもしれません。実は、動画共有サイトの「YouTube」が、HTML5を使ったビデオプレーヤーを試験的に公開しています。以下のページにアクセスすると、HTML5版のビデオプレーヤーでYouTubeのビデオを閲覧できます。
今日行なわれたインターン4日目の講義「JavaScript で学ぶ イベントドリブン」by id:cho45の資料と録画を公開します。今回は、JavaScriptの概要からDOM、イベントドリブンまでを2時間で網羅した密度の高い講義となっています。今回の放送は安定していましたので、音質・画質とも良好にできました。 明日もAM10:30より、JavaScript界の貴公子id:nanto_viによる「ユーザーインターフェース, HTML5」を放送しますので、是非ご覧ください。 自己紹介 id:cho45 - vimmer うごメモチームのエンジニア (7月後半〜) 少し前までブックマークチーム Perl, JS (Scala, Ruby, etc...) サーバサイド・クライアントサイドUI・スマートフォンなど Java や AS も場合によっては書いています 特技 1行コードを書くごとにハ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く