admin 发表于 2018-7-7 15:47:25

H5制作无声背景视频

DIV:
video标签,source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放
<video id="v1" autoplay muted loop style="width: 100%">
    <sourcesrc="uploadfiles/video/video.mp4">
</video>

CSS:
video{
    position: fixed;
    right:0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -9999;
    /*灰色调*/
    /*-webkit-filter:grayscale(100%)*/
}

JS:视频播放速度可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的javascript
<script>
    var video= document.getElementById('v1');
    video.playbackRate = 0.5;
</script>
页: [1]
查看完整版本: H5制作无声背景视频