web-dev-qa-db-ja.com

視差効果のある背景ビデオ

視差効果のあるdivコンテナーに背景ビデオを配置する方法はありますか？私が探しているのは、このテンプレートに似たものです：

例を表示するにはここをクリック

私はインターネットで見つけたいくつかの人気のあるプラグインを試しました：

BigVideo.js

YTPlayer

jquery.videoBG

しかし、それらのどれも私が探していることを実行していないか、おそらく実行していますが、それを理解できませんでした:(

皆さん、ありがとうございました！！

videojquery-pluginsbackgroundparallax
7
Nesta

ここに必要なものを正確に実行するプラグインがあります： https://github.com/linnett/backgroundVideo

18
30secondstosam

最初にHTML5ビデオを使用してdiv要素を作成し、次に視差スクロールを作成します。 HTML5ビデオを追加して全幅にするのは、次のように簡単です。

<video id="myVideo" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Your browser does not support the video element.
</video>
<script>
   document.getElementById("myVideo").width=document.body.offsetWidth;
</script>

視差については、個別に実装する必要があります。 HTML5ビデオのdiv要素は、他のレイヤーやコンテンツセクションと同様に、ページのコンポーネントになります。

視差Webサイトの作成に関するチュートリアルが必要な場合は、私の会社が利用可能な視差Webサイトのリストを作成しました（jQuery、stellar.js、skrollr.jsのテクノロジで分類されています）。 http://potentpages.com/parallax-tutorials/

HTML5ビデオのMozillaリファレンス： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

9
David Selden-Treiman

YTPlayerを使用した解決策を探している場合に備えて。をセットする containment:'self'またはcontainment:'#elementID' HTMLコンストラクタで#elementIDは、動画をバックグラウンドで再生するdiv、sectionまたは視差セクションのIDです。

YTPlayerWikiページ ここ を参照してください。

<div id="P1" class="player" 
     data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}">
</div>
1
Zakky Akhtar