大家好

這里是有新媒之聲給大家帶來的html5教程

話不多說直接看效果圖

首先我們先創建一個html

我們再建一個存放視頻背景的文件夾video

我們給建好的html寫入基本代碼

然后我們再把作為背景網站的視頻拷貝到video這個文件夾下

我們在給剛剛建好的html寫入視頻代碼

效果如下

并未網頁全屏，而且視頻重復播放

別急現在我們給視頻添加樣式，使它成為名副其實的視頻背景

我們給視頻代碼寫一個class="index-video"

我們在head頭寫上css樣式

我們現在再來看看效果

現在網頁視頻是以全屏播放并且你可以在上面寫上其它的效果，比如說導航欄之類的，因為現在視頻已經成為了我們網頁的背景。

現在我們在head加上跳轉代碼

現在就讓我們回顧一下需要用到那些代碼和注意的要去

body體里

css樣式

.index-video

跳轉代碼

//網站編碼utf-8為通用的國際代碼

//

炫酷跳轉演示站//為網頁標題

position 屬性規定元素的定位類型。

position語法：

position : static absolute relative

position參數：

static : 　無特殊定位，對象遵循HTML定位規則

absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框

relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置

position說明：

設置對象的定位方式，可以讓布局層容易位置絕對定位，控制盒子對象更加準確。

min-width: 最小寬度; min-height: 最小高度;

width: auto;//寬度為自動

height: auto;//高度為自動

z-index: -100;

//當你定義的CSS中有position屬性值為absolute、relative或fixed，

用z-index此取值方可生效。

此屬性參數值越大，則被層疊在最上面。

完整代碼

總結

以上是生活随笔為你收集整理的HTML5视频放完自动跳转,炫酷html5 网站视频自动跳转代码，零基础秒学的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。