ＨＰの背景に動画

質問

ＨＰの背景に動画を入れるにはどうすればいいでしょうか。
自作のＨＰでの方法と、ブログでの方法は違うでしょうか。
文字などのコンテンツの後ろで撮った映像が動いているトップページを作りたいと思っています。

回答No.2

eden3616 · ベストアンサー

jQueryを使えばできます。
http://www.webcreatorbox.com/tech/video-background/

参照先のサイトにも書かれていますが、
動画のサイズを限りなく小さくする配慮が必要であったり
文字の見栄えを邪魔しないような内容にしたり
動画加工の知識が必要であったり
いろいろ気を付けることはあります。

>自作のＨＰでの方法と、ブログでの方法は違うでしょうか。

ブログでCGIなどのプログラムは利用できないでしょうが、
jQueryはjavaScriptで書かれています。
javaScriptは閲覧しているパソコンのブラウザ上で動作するプログラムですので
設置するサーバー（自分のHPやブログ側）の環境にとらわれません。

ご自分のHPに設置される場合は、ダウンロードしたフォルダごとアップロードし、
マニュアルやサンプルに沿って設置が容易ですが、

ブログに設置する場合はトップページに設置した際に記述するリンクなどを
ブログのファイルアップローダでアップロードしたアドレスと噛み合うように適切に設置するなど
工夫する場面があるかとおもいます。

もっとシンプルに簡単に動く背景を利用したいのであればGIFアニメーションを使用する方法があります。
GIFアニメとはパラパラアニメのように複数の画像を連続して表示してアニメーションできる画像ファイルです。

GIFファイルの作成はオンラインで出来るもの
http://www.bannerkoubou.com/anime/

や、ツールを使って作成できます
http://www.forest.impress.co.jp/library/software/giam/

このようなGIFを背景画像として使用すれば動いている背景が手軽に作成できます
http://allabout.co.jp/gm/gc/23797/

お礼

ご回答ありがとうございます。
ご紹介のページのソースを自分のブログにそのまま貼ってみたのですが…そんな簡単にできたら苦労しませんよね。

回答No.4

b0a0a

×Canvasを後ろに持ってくるのが落とし所かなとも思いますが。
○Videoを後ろに配置するのが無難かなとも思いますが。

お礼

ご回答ありがとうございます。
せっかくの訂正も、理解できなくて申し訳ありません。

回答No.3

b0a0a

単純に作ればこんな感じで

function playBGVideo(url) {

var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')

var style = document.body.style
style.backgroundRepeat = 'no-repeat'
style.backgroundSize = 'cover'

var video = document.createElement('video')
video.oncanplaythrough = function () {
canvas.width = video.videoWidth
canvas.height = video.videoHeight
video.play()
paint()
}
video.src = url
video.load()

function paint() {
ctx.drawImage(video, 0, 0)
style.backgroundImage = 'url('+canvas.toDataURL()+')'
requestAnimationFrame(paint)
}

}

WebkitやFirefoxの提供するCanvasやElementを背景にできるAPIを使えばもっと軽くなるとは思います。
Canvasを後ろに持ってくるのが落とし所かなとも思いますが。

お礼

ご回答ありがとうございます。
ご紹介のソースをどこで使えばいいかもわからない素人なので、出過ぎた望みだったようです。

回答No.1

gaspan_asobi

GIFを作るか、全体をFLASHで構成するかです。
ただ糞重たいページになるので、見る側は敬遠しますね。

お礼

ご回答ありがとうございます。
背景を動画にして、軽く動いているページはたくさんあるので、きっと軽くする方法はあるのだと思います。
むずかしいようですが。