video標籤實現簡單視頻背景+遇到問題(視頻沒法顯示，不能自動播放)

時間 2019-11-17

標籤 video 標籤實現簡單視頻背景遇到問題沒法顯示不能自動播放简体版

原文原文鏈接

最近看網上有一些網站首頁背景是炫酷的視頻背景，就想模擬一個css

1.video標籤簡介

video標籤訂義視頻，就是能夠在網頁上實現視頻的播放，詳情見http://www.w3school.com.cn/tags/tag_video.asphtml

<video src="視頻地址">
您的瀏覽器不支持 video 標籤。//Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 標籤。
</video>

屬性以下圖：瀏覽器

2.簡要的視頻背景製做（代碼意思見代碼註釋）

代碼改一下視頻的src就能夠直接使用了ide

<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>

上面代碼中有一些比較坑的地方oop

（1）網站

./back.mp4是我本身下載好的視頻，原來的格式是.blv格式，但是這個格式video不支持，出不來視頻，我就直接改了它的後綴，改爲了.mp4，結果仍是出不來，而後我網上找了解決問題的方法，發現沒有加

type="video/mp4"，我加了以後仍是有問題，網頁仍是一片空白。再查了一下發現視頻不能直接改後綴，必定要是原來的格式。因此通常仍是不要直接改後綴，若是就想用這個視頻的話，能夠切網上找那些像格式工廠類的軟件來轉換格式。spa

（2）改好格式後，頁面不是白的了，有視頻了，我加了autoplay="autoplay"屬性但是視頻不自動播放，而後固然又是查找解決問題的方法啊，以後就發現了code

muted
這個簡單說加上以後視頻就會靜音，可是視頻能夠自動播放了，瀏覽器通常不會再用戶不一樣意的狀況下就播放出媒體聲音，這是不容許的，因此有聲音就不能自動播放，自動播放就沒有聲音

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。