HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS
なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・（今さらですけどｗ なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。 上部にHTMLでキャプションが入っています。再生すると、動画が進み、場面に応じてテキストが分かります。 時間がたつと別のメッセージが表示されます。 キャプションの埋め方$(document).ready(function(){ //Slides object with a time (integer) and a html string var slides = { 0: "This is the first subtitle. Y
勉強会やセミナーに。動画と別コンテンツを連携させるHTML5動画フレームワーク·Popcorn.js MOONGIFT
Popcorn.jsは動画と別なコンテンツを連携させるHTML5ビデオフレームワーク。 Popcorn.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Webサービスの説明動画や、勉強会の内容など動画をWebサイトに掲載するケースが増えている。そんな時には動画以外の資料も一緒に掲載したいと思うはずだ。 デモ ニコニコ動画は動画とコメントと一緒に閲覧できるが、同じように動画と別なコンテンツを一緒に掲載したり連携させたいと思う事はないだろうか。それを実現するライブラリとしてPopcorn.jsを紹介しよう。 Popcorn.jsはHTML5動画フレームワークで、動画と任意のコンテンツを連携させるライブラリだ。例えば動画の横にスライドを載せ、指定時間になったら切り替えると言った具合だ。手で時間を進めたりした場合もコンテンツが切り替わってくれる。 外部の様々な情報を表示して
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」:phpspot開発日誌
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは？というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ
HTML5な動画プレイヤー色々2011:phpspot開発日誌
10 Best HTML5 Video Player | denbagus blog HTML5な動画プレイヤー色々2011。 様々なHTML5動画プレイヤーがリリースされていますが、現時点での検討・比較に便利なエントリが公開されています。 HTML5非対応ブラウザにもFlashでフォールバックしてくれる物や、jQueryプラグインをベースにした物、UIがかっこいい物などニーズに分けて使い分けられそうです。 アクセス解析を見ていると、iPhoneやiPadがどんどん増えてきている中、HTML5プレイヤー+Flashフォールバックというのが今後重要になってくる気がします。 (Flash単体だとiPhoneやiPadで見れないわけなので動画を見せたい場合は致命的） 関連エントリ 見ておくべきHTML5サイト集 HTML5のcanvasタグで描くグラフ描画ライブラリ「AwesomeChartJS
字幕.inみたいなサイトが簡単に作れそうなスマフォ対応のHTML5動画プレイヤー「LeanBack Player」:phpspot開発日誌
LeanBack Player | HTML5 Video Player 字幕.inみたいなサイトが簡単に作れそうなスマフォ対応のHTML5動画プレイヤー「LeanBack Player」。 次のように字幕を付けることができます。埋め込みコードの出力や、Youtubeっぽいインタフェースもいい感じです。 HTML5なのでモバイルデバイスなんかでも使えちゃいますね。 HTML5非対応ブラウザで見ても動画は再生できるようになっています。 独立したライブラリで動作し、CSSによるスキン変更にも対応。 キーボードショートカットにも対応するなど芸が細かい。 PCでは主要ブラウザでの動作が確認されている他、モバイルデバイスでは、iPhone iOS 3+、iPad iOS 3.2+、Android2.2でもテストされています。 関連エントリ HTML5で動画や音声再生を可能にするライブラリ集 CSSで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト