<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • html頁面背景顏色代碼(學生個人網頁制作html)


    你想實現動態視頻作為背景的首頁嗎?來,一起來學習,本文將帶你一起實現H5動態視頻背景;

    首先網上找一段清晰的視頻下載下來,最好是MP4格式的;下載好了之后我們新建一個html文件來寫代碼:

    html代碼:

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

    一個video標簽包裹著,source代表來源文件,autoplay屬性是自動播放,loop代表循環播放,muted代表無聲播放;

    如果不加入autoplay屬性是無法自動播放的,頁面將會黑屏展示;

    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; 
    }
    web前端開發學習Q-q-u-n: 767中273后102 ,分享學習的方法和需要注意的小細節
    

    css代碼主要是進行定位和放大達到全屏播放的效果,主要是對video進行寬高之類的設置,還有別忘了要給z-index給個值,讓放置在底部,只要小于0都可以,沒有影響;

    就這樣我們的動態視頻背景就完成了,如果想設置播放速度,我們可以添加js代碼(video標簽加上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>
    

    是的,在video標簽外部添加,然后我們的效果圖就是這樣的(由于博客對圖片大小有限制,所以截屏時間沒有很長)

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费