html5用视频制作背景图, handsome视频动态背景图

博主：丁町轩
发布时间：2020 年 04 月 05 日
344 次浏览
暂无评论
707字数
分类：代码片段

# html5用视频制作背景图, handsome视频动态背景图

今天突发奇想想用视频做背景 然后研究了一下就有了以下代码,
把下面代码填写到开发者设置->自定义输出head 头部的HTML代码里面就行了
```php
<style>
    video {
        position: fixed;
        right: 0px;
        bottom: 0px;
        max-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
        display: block;
        object-fit: fill;
    }
</style>
<video id="video" autoplay="autoplay" loop="loop">
    <source src="你的视频地址">
</video>

<div style="position: fixed;right: 0px;z-index: 9999;top: 39%;">
    <button class="btn m-b-xs btn-info  " onclick="disableMute()">开启声音</button>
    </br>
    <button class="btn m-b-xs btn-danger" onclick="enableMute()">关闭声音</button>
</div>
<script>
    function enableMute() {
        myVid = document.getElementById("video");
        myVid.muted = true;
    }

function disableMute() {
        myVid = document.getElementById("video");
        myVid.muted = false;
    }
</script>
```
如果想达到我这种效果还需要开启Handsome的透明模式

如果不是Handsome 直接把代码粘贴到你的页面上就行。

最后修改：2020 年 04 月 05 日