2012-04-30 3 views
2

私はウェブサイトの紹介としてビデオをフルスクリーンで読み込ませる必要があります。 HTML5でこれを行うことはできますか、またはFlashを使用する必要がありますか?フルスクリーンビデオイントロHTML5?

誰かが説明するか、これを行う方法についての良いリソースを教えてもらえますか?

ロードするにはウェブサイトが必要で、プレイヤーコントロールなど何もない状態でプレイするには5秒のクリップが必要です。その後メインサイトにまっすぐ進みます。まさにこの例のように

http://www.firecrackerfilms.com/

感謝:)ここ

+0

フルスクリーンを望むわけではありません。あなたのサンプルサイトに基づいて、完全なクライアント領域を埋めるだけです。 – Brad

+0

そのビデオはフルスクリーンでもフル・ビューポートでもありません。 – msanford

答えて

0

は、フラッシュビデオと賛否両論対HTML5についての素晴らしいスレッドです: HTML 5 <video> tag vs Flash video. What are the pros and cons?

個人的に私はあなたのためにHTML5を好むだろうiphoneやipadのようなほぼすべてのデバイスタイプのビデオを見ることができます)。

しかし、html5はFlashビデオほど強力ではありません。

また、一部のユーザーがブラウザでJavaScriptまたはFlashの設定を無効にしていることを考慮する必要があります。

0

私は実際のフルスクリーンが要求するユーザーとは考えていません。少なくともフラッシュでは不可能です。

ビューポート全体を塗りつぶしたい場合は、cssを使用してビデオ要素のサイズを設定します。幅と高さをビデオのアスペクト比と一致させない場合、ビデオはボックスを埋めるために伸ばされません。代わりに、ビデオは正しいアスペクト比を保持し、ビデオ要素内にレターボックス化されています。ビデオは、アスペクト比を維持しながら、ビデオエレメント内でできるだけ大きくレンダリングされます。

3

あなたが背景ビデオが100%width/heightに設定し、ビデオにこの

使用position:fixedを試してみてください、そして、それはすべてのものの背後に表示されますので、それを否定z-indexを追加設定する必要がある場合。

VideoJSを見ると、コントロールはhtml要素に過ぎません。溶け込ん黒の背景にあなたの例では

HTML

<video id="background" src="video.mp4" autoplay> 

CSS

#video_background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1000; 
} 
+0

+1これまで数回やったことがありますが、問題は、強制的にビューポートに合わせてビデオのアスペクト比を失うことです。私が提案するソリューションは、アスペクトを維持しており、ビデオの一部が失われているという警告があります。私の経験では、どちらも許容可能なソリューションかもしれませんが、それは単にあなたのビデオコンテンツに依存します。 – msanford

+0

はい、動画のアスペクト比が緩んでいることに同意します。 – coder

+0

完全性のためにちょうど言及:) – msanford

1

ページをは、フルスクリーンではなく、またそれもフルビューポートあり、it's a small videoページの黒い背景。 それをやり遂げることができれば、それはうまくいくでしょう。

彼らは画面をタッチした指によってトリガされない限り、iOS版はautoloadautoplayを阻害するので、あなたは、iPad上、あなたは意志never be able to auto-play an HTML5 videoイントロを気にしている場合。しかし、もう一度、それはとにかくフラッシュを再生することはできません。

4:3モニタで表示される16:9ビデオの場合、HTML5ビデオをフルビューポートにするには、ビデオをフルハイトにしてビデオの両面を失います。逆の場合も同様です。これにより、ビデオのアスペクト比は、ビデオコンテンツの一部が失われて、隠れたオーバーフローになるという警告が維持されます。

アスペクト比を気にしない場合は、@とwidth: 100%と入力してください。

この理由から、あなたのサンプルサイトで行ったことと一緒になって、ビデオを背景に混ぜるほうが簡単でしょう。