最近看網上有一些網站首頁背景是炫酷的視頻背景，就想模擬一個
1.video標簽簡介
video標簽定義視頻，就是可以在網頁上實現視頻的播放，詳情見http://www.w3school.com.cn/tags/tag_video.asp
<video src="視頻地址"> 您的瀏覽器不支持 video 標簽。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 標簽。 </video>
屬性如下圖：
2.簡要的視頻背景制作（代碼意思見代碼注釋）
代碼改一下視頻的src就可以直接使用了
<html lang="en">
<head> <meta charset="UTF-8"> <title>視頻背景網頁</title> <style type="text/css"> .video_back{ /*設置視頻最小寬度和高度*/ min-width: 100%; min-height: 100%; /**/ width:auto; height:auto; /*生成絕對定位的元素，相對於瀏覽器窗口進行定位。*/ position: fixed; /*這里我試了一下好像只要是矩形的四個角的的點都行,也就是說right:0;bottom:0;也可以*/ left: 0; top: 0; /*將視頻放在元素的堆疊順序最底層，以防覆蓋其他東西*/ z-index: -9999; } .wen{ font-size: 30px; color: #fff; } </style> </head> <body>
<video class="video_back" src="./back.mp4" type="video/mp4" muted autoplay="autoplay" loop="loop"> 您的瀏覽器不支持 </video> <div class="wen">這是一個簡單的視頻背景</div> </body> </html>
3.遇到問題
<video class="video_back" src="./back.mp4" type="video/mp4" muted autoplay="autoplay" loop="loop"> 您的瀏覽器不支持 </video>
上面代碼中有一些比較坑的地方
（1）
./back.mp4是我自己下載好的視頻，原來的格式是.blv格式，可是這個格式video不支持，出不來視頻，我就直接改了它的后綴，改成了.mp4，結果還是出不來，然后我網上找了解決問題的方法，發現沒有加
type="video/mp4"，我加了之后還是有問題，網頁還是一片空白。再查了一下發現視頻不能直接改后綴，一定要是原來的格式。所以一般還是不要直接改后綴，如果就想用這個視頻的話，可以切網上找那些像格式工廠類的軟件來轉換格式。
（2）改好格式后，頁面不是白的了，有視頻了，我加了autoplay="autoplay"屬性可是視頻不自動播放，然后當然又是查找解決問題的方法啊，之后就發現了
muted
這個簡單說加上之后視頻就會靜音，但是視頻可以自動播放了，瀏覽器一般不會再用戶不同意的情況下就播放出媒體聲音，這是不允許的，所以有聲音就不能自動播放，自動播放就沒有聲音
