jakiestfu/Youtube-TV GitHub クールなプレイリスト付きのYoutubeプレイヤーを作成できるjQueryプラグイン「Youtube-TV」 次のように通常のプレイヤーに加えてサイドにプレイリストを表示できるプレイヤーが作れるようです レイアウトはCSSでより自分好みにカスタマイズ可能だそう。 動画が複数あって、それぞれ再生してもらいたいようなインタフェースを実装したい際に参考にできそうですね。 関連エントリ グラデーション生成ウィジェット実装jQueryプラグイン「GRADX」 LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」 アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 サイトの使い方をその場で表示できるjQuery
あー、なるほど。これは人気出そう。 と思わず思わされました。 結婚式のムービー作成ソフトなんかに似てるツールですが、全てWeb上で、かつWeb上の素材を使って、きちんとリンクも貼って組み合わせたスライドをシェアできるなんて、色々楽しみ方が出来そうで心躍ります。 SAMPLE ※音量注意 マサト’s Slidely 使い方 基本的にはスライドを、自分の写真、SNSの写真、あるいは検索して写真を選択して、YouTubeなどの音楽を、プリセットされたエフェクトを使って作成する形。 公開したスライドに対し、LIKEやコメント、シェアして楽しもうという感じ。 トップページに羅列されたユーザー作成スライド マイページ SNSの写真でサクッと作れる Facebook、Flickr、Picasa、Instagramなどが用意されており、それらのアカウントを登録することでアップしている写真リス
動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 2012年12月10日- Make an HTML5 video a background - body bg demo 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン。 Youtubeの動画を背景にするjQueryプラグインがあったりしますが、今回は自前の動画を背景に使ったサイトが簡単に作れます。 動画フォーマットも各種指定することで色々な端末に対応することができそう 実装コード。各種動画ファイルをフォーマットベースにオプション指定 若干重いですが、将来的にはこういったサイトも当たり前のように登場していることでしょう。 関連エントリ フリーのオープンソースなHTML5動画プレイヤーいろいろ
動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 2012年09月26日- Allofthelights.js, jQuery plugin to turn off the light and enjoy your videos 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 通常Youtubeの動画などはページ内に貼り付けてそのまま見ますが、ページデザインががやがやしていて見づらいという場合があります。 そんな場合にこのプラグインを入れておくと、動画以外を暗くして動画が見やすくなるというもの。 スイッチで電気を消す、的なイメージ。 動画再生と同時に暗くなるようなものだともっとカッコいいかもしれませんね。 関連エントリ 動画ギャラリー用WordPressプラグイン10個 画像や
BigScreen 画像や動画にフルスクリーンボタンを付けられる「BigScreen」。 画像や動画を単なるズームではなく、フルスクリーンで見れるようにしたいといったニーズがあるとして、このライブラリを使えば簡単にフルスクリーン機能が実現できます。 jQueryに依存していないため、若干クセのある使い方となりますが、自分で１からクロスブラウザで書くのは大変そうなので利用させてもらうと楽かも。 Chrome 15+ 、Firefox 10+ 、Safari 5.1+が対応。 フルスクリーンにするとやっぱり迫力が違いますね 関連エントリ フルスクリーン編集可能なWYSIWYGエディタ実装jQueryプラグイン「Redactor」 コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル
指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。 対応ブラウザ Chrome 15+ Firefox 10+ Safari 5.1+ 動画コンテンツの表示は下記もサポートします。 Safari 5.0 iOS 4.2+ BigScreenのデモ デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。 BigScreenのデモ：動画 動画は右下のボタンをクリ
Webサイトの背景をリピート再生するYoutube の動画にしてしまおう、というjQueryプラグイン ・jquery-tubularのご紹介です。なかなか斬新 では無いかなと思います。ユニークなサイトを 作る際に参考にしたいですね。導入も極めて 簡単なのでぜひチャレンジしてみてください。 jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。 [note]かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。[/note] このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。 サンプル作った 面白かったので暇を見て適当にデモサイトを作ってみました。
デモページ デモは左のメニューから、動画を変更して再生できます。 BigVideo.jsの使い方 外部ファイル BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。 <!-- BigVideo Dependencies --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/jquery-ui-1.8.22.custom.min.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="http://vjs.zencdn.net/c/vide
総合研究大学院大学 複合科学研究科 情報学専攻 卒 博士（情報学） 自然言語処理や機械学習、データ分析に関する研究内容とwebシステムの開発と運用について書いています。 シリコンバレーベンチャーみたいに深い技術の事業化をしたいと思っています。 ご興味ある方はご連絡ください。 どういう感じかは、こちらから確認できます 画像ではない手段で楽譜を作るには.... Audiofile.cc, ABC.js, VexFlow , など Audiofile.cc 読み込むjsファイルは <script src="jquery.js" type="text/javascript"></script> <script src="audiofile.js" type="text/javascript"></script> だけです。 そして、 $(document).ready(function() {
2012年 8月 8日 暑いですね。今回はパーツの解説を少し... 200x200pxの画像を用意します。 クリックすると小さくなりながら消え、またクリックすると大きくなりながら消えます。 後で気づきましたが、jQueryUIに用意されているのアニメーション「Puff」とほぼ同じですね... デモ コード html <div id="wrap"> <img id="play" src="play.png" alt="play" width="200" height="200"> </div> css #wrap{ width : 100%; height : 300px; position : relative; } #play{ position : absolute; display : block; } javascript jQuery(document).ready(functi
実用性の無いネタ的な内容です。 JavaScript等を使わず、CSSだけ でYoutubeのフレームを作ってみ ます。CSSだけで作ったからどう、 という訳ではないですけど・・ 実用的な内容じゃないので適当に流してくだされば幸いです。 デモ まずはデモから。Chrome以外では確認してないしフレームも適当ですのでその辺はスルーでお願いします。 再生できましたでしょうか。 方法は多分すぐに分かったと思いますけど、一応解説的なものを書いてみます。 Youtubeをz-indexに対応させる Youtubeは通常z-indexを指定しても一番上に来てしまいます。ナビゲーションなどをposition:fixed;しているサイトなどでスクロールするとYoutubeだけ一番上を通ってしまう光景を見たこともあるのではないでしょうか。 これを、ちゃんと下に通るようにする、z-indexに対応させるにはY
【10/7〜10/13の運勢】10月2週目の運勢はどうなる？SUGARさんが贈る12星座占いをチェック！
Creating a Volume Controller with jQuery UI Slider jQueryでクールなボリュームコントロールを作成するチュートリアル。 次のようなAppleっぽいデザインのボリュームコントロールを作るチュートリアルです。 デモページ ボリュームコントロールじゃなくてもこの作り方を覚えておけば、プログレスバーなり、１〜１００のパラメータ調整なり応用が効きそうです。 画像を使ったデザイン性の高い物を作っているので思ったデザインのコントロールは作れるようになりそうですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル ホイールも効いて超いい感じのカルーセル実装jQueryチュートリアル Googleマップ関連のjQueryプラグインとチュートリアル集
海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介してみます。 動画を流す手法はHTML5の＜video＞タグとかも考えましたが 今回は動画再生はFlashで流すパターンにしています。 まずは動作のサンプルから。 下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます） jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示 ※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。 ブラウザ枠をリサイ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く