Fullscreen Video Slideshow with BigVideo.jsThe videos in this demo are from Beachfront B-Roll, a great place to download unique HD stock video footage and animated backgrounds for any production purpose (for free!). A demo for BigVideo.js by @johnpolacek
YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」
jQuery.mb.YTPlayer メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。 本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。 参考：NEXT A-Class │ メルセデス・ベンツ日本公式サイト このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。2016/10） 今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。 サンプルページを作ってみました → YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル 過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で
Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER
あまり見かけないタイプのライブラリだった のでメモ。Youtubeの動画を透過させる事 が出来るjQueryプラグインです。インター フェースもクールにされて全画面に配置した りオート再生させたりも可能でIE6や7でも 一応は動作してくれます。 僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ 透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前はYoutube動画を背景にするjQueryプラグインをご紹介しましたが、今回は透過が出来るプラグイン。いろいろ出来るんですね・・ CPUの問題は否めないとして、これはちょっと素敵なので覚えておきたいです。透過のみに関してはIE6や7にも対応していますが、Operaは透過出来ませんでした。バージョンにもよるんですか
BigVideo.js
デモページ デモは左のメニューから、動画を変更して再生できます。 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
jQueryで背景に動画をフルスクリーンで表示する方法｜BLACKFLAG
海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介してみます。 動画を流す手法はHTML5の＜video＞タグとかも考えましたが 今回は動画再生はFlashで流すパターンにしています。 まずは動作のサンプルから。 下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます） jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示 ※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。 ブラウザ枠をリサイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
