React で作るゆっくり解説 feat. Remotion
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js
動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。 実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。 Moovie.js デフォルトでも快適、フルカスタマイズも可能 動画の字幕は多言語をサポート 再生速度は0.1x-8xまで変更可能 .vtt, .srtの字幕ファイルをサポート トラックや字幕を動的に追加可能 字幕のカスタマイズ イベント・ショートカットのAPI 依存関係はなし、VanillaJSで構築 すべてのモダンブラウザをサポート レスポンシブに完全対応 MITライセンスで、商用プロジェクトでも無料で利用できます Moovie.jsのデモ デモでは映画コンテンツを再生しながら、Moovie.jsのいろいろな機能を楽しめ
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
JavaScript初心者を一気に上級者へ導く海外の無料動画ベスト6を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScript」をどのような方法で学習されているでしょうか？ お手軽な方法としては…、 ・書籍やブログ記事を読む ・勉強会・セミナーへ参加する ・友人や先輩に直接聞く ・学習向けのWebサービスを利用する ・etc... などが一般的でしょうか。 今回は、上記のリストに加えて、もう１つ有効な方法である「海外の無料動画」についてご紹介しようと思います！ 「どうせ、英語だから…」と、つい敬遠しがちですが、海外ユーザーが作るプログラミング学習動画は、国内に比べて圧倒的に「質」が高いのが特徴です。 なかでも、特に解説が丁寧で理解しやすい動画だけを厳選しましたので、ぜひチェックしてみてください！ ■「JavaScript」の基本を徹底的に学ぶ！ まずは、JavaScriptを「どのように書いたら良いのか？」を丁寧に教えてくれる動画のご
動画とルビ翻訳された字幕をみながらMarkdownメモできるアプリを書いた
video-transcript-note というElectronアプリを書きました。 一言で説明するならば、PDFを見ながらMarkdownでメモを取れるアプリを書いたの動画版です。 インストール latest binaryから最新のバイナリを落として起動すればいけるはずです。 Linuxも多分動くんだと思いますが、何か妙にバイナリが大きいかったのでビルドからは外してます。(適当に修正PRでも下さい) 機能 機能としては、HTML5 Video + <track>による字幕 + CodeMirrorでのMarkdownメモと言った感じのアプリです。 HTML5 Video player keyboard shortcut ルビ翻訳された字幕 English to 日本語 Markdown Note Quote from Video and Transcript. Cmd+T/Ctrl+T
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
動画からgifアニメを作るWebアプリ Giraf を作りました - はるさめスープ
追記(2015/12/7) Giraf バージョン2を公開しました！ 新しくなったGirafもぜひご利用ください！ 以前rokugaというサイトを知り、ありがたく使っていました。 しかし、細かな編集ができないなどの不満点が出てきたので、2月24日から26日までのOUCCコーディング合宿の間に、新しいgifアニメ作成サイト Giraf を作りました。 使い方 動画を選択すると、こんな感じで動画とその前後2フレームが表示されます。 始点と終点を選択して、動画から作成するgifの範囲をタイムラインに追加していきます。 作成を押すと、おもむろにレンダリングが始まり、gifが作成されると下に表示されます。右クリックで保存してください。 機能 設定ボタンを押すといろいろできます。 画像を切り抜いたり、 効果を加えたりできます。 javascriptが書ける人は自分で効果も作成できます。これでtumbl
[JS]動画をブラウザいっぱいやエレメントの背景として配置できるスクリプト（スマホにも配慮） -Vide
.mp4, .webm など、動画をブラウザいっぱいやdivなどのエレメントの背景として配置できるjQueryのプラグインを紹介します。 デスクトップでは動画が再生され、スマホでは仕様のため代替の静止画像が表示されます。 デモページ iOSでは動画はネイティブのプレイヤーのみ再生可能なので、静止画像が表示されます。Androidでは一部の機種で動画が再生されてしまいますが、基本的には静止画像が表示されます。 Videの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部スクリプトとして記述します。 <body> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.vide.min.js"></scr
HTML5 videoでニコニコ動画風プレーヤーを作ろう (1/7)
HTML5テロッパーのサンプル。テキストエリアの文字がテロップとして動画の上に表示される画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能） 動画投稿サイト「ニコニコ動画」が人気です。ニコニコ動画はユーザーのコメントを再生中の動画にテロップのように表示する機能が特徴で、多くのユーザーがコメントを書き込んで楽しんでいます。 ニコニコ動画のようにブラウザー上で動画を再生しながらテロップを表示するには、従来、Flashが必要でした。Flash（Action Script）に習熟している開発者でなければ、ニコニコ動画のようなWebサービスは作れなかったのです。ところが現在、モダンブラウザーへの実装が進んでいるHTML5 videoなら、JavaScriptを使って簡単に文字や画像を動画に重ねられます。 今回はHTML5 videoとJavaS
Webブラウザで動画編集！ - Yanagi Entertainment
html5で videoの任意のフレームをcanvasに描画するメモ - 超自己満足プログラミング http://d.hatena.ne.jp/favril/20100225/1267099197 昨日この記事を見て、これはすごい！ すごいすごい！ ってなって、これができるんならWebブラウザだけで動画編集できるんじゃね？ と思ったりしたので、ざっくり作ってみました。 http://yanagiatool.appspot.com/jsvideo/player.html （MacのSafari4で動作確認。QuickTime + ChromeならWindowsでもいけるかも？） あそびかた 「動画を読み込む」ボタンを押すと、テキストボックスに入ってるurlの動画を読み込みます。「state」って書いてあるところが「stand by」になったら「再生 / 停止」ボタンを押してください。 あとは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
