HTML5ダイナミックビデオの背景のホームを実現：リアルへのWebフロントエンドエントリー

あなたはそれのホーム・モーション・ビデオの背景として達成したいですか？この記事では、一緒にH5ダイナミックビデオの背景を達成するために行くことができます学ぶために一緒に来ます。

、最高のMP4形式をいくつかの明確なビデオのダウンロードを見つけるためにまず、インターネット、我々は、書き込みコードに新しいHTMLファイルを作成した後、ダウンロードまあ：

htmlコード：

<video id="v1" autoplay loop muted>
    <source src="./video2.mp4" type="video/mp4"  />
</video>

ラップビデオラベル、ソースはソースファイル、自動再生属性自動再生を表し、ループは、プレイヤーの代わりに沈黙をミュート、ループを表し;

プロパティが自動的に再生されない自動再生追加されていない場合は、ページが黒い画面が表示されます。

CSSコード：

*{  
    margin: 0px;  
    padding: 0px;  
}  
video{  
    position: fixed;  
    right: 0px;  
    bottom: 0px;  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
    /*加滤镜*/
    /*filter: blur(15px); //背景模糊设置 */
    /*-webkit-filter: grayscale(100%);*/  
    /*filter:grayscale(100%); //背景灰度设置*/  
    z-index:-11
}  
source{  
    min-width: 100%;  
    min-height: 100%;  
    height: auto;  
    width: auto;  
}

CSS位置決めコードはそう下部に限り、0未満であることができ、z屈折率の値を与えることを忘れないで、主にビデオセットの幅と高さなどのために、フルスクリーン再生及び増幅効果を達成するために主に効果はありません。

当社のモーションビデオの背景が完了しているので、あなたが再生速度を設定したい場合は、我々は、JSコード（ビデオプラスラベルID =「V1」属性）を追加することができます。

var video= document.getElementById(‘v1‘);
video.playbackRate = 1.5;

我々はページそれにコンテンツを追加したいのであればどのように？

<video id="v1" autoplay loop muted>
       <source src="./video2.mp4" type="video/mp4"  />
</video>    
<h1 style="color:white">123465</h1>
学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

（時間が非常に長いのスクリーンショットではありませんので、ブログは画像の大きさに制限があるため）はい、外部のvideoタグを追加し、我々はレンダリングようになっています