其他分享
首页 > 其他分享> > HTML个性玩法

HTML个性玩法

作者：互联网

· 个性玩法

1.图片文字轮播滚动

<marquee scrolldelay="100">滚动文字</marquee>
<marquee direction="left"><img src="./img/1.jpg" width="500px"></marquee>
滚动文字或图像 scrolldelay：表示滚动延迟时间，默认值为90。 direction：表示滚动的方向，默认为从右向左。
属性名值
**direction:**滚动方向left：往左滚动 right：往右滚动 up：向上滚动down：向下滚动
**behavior:**移动方式**Scroll:**循环移动(默认)Slide:只移动一个回合Alternate:来回移动
**scrollamount:**移动速度值取正整数。数值越大，速度越快
**loop:**循环未指定则循环不止(infinite)，其值取数值
**bgcolor:**底色
**Scrolldelay:**延时数值,单位是毫秒。1秒=1000毫秒
width和height就是移动的宽度与高度了

2.背景音乐

3.视频

 <embed src="./mp3/皮卡丘.mp4" width="400px" height="600px" autoplay="autoplay" type="" >

src是视频的地址，可以是绝对地址，也可以是相对地址。
controls是用来向用户显示控件，比如像播放按钮，
width和height是播放器的宽度和高度，
autoplay属性是当视频就绪后就会自动播放
loop属性是当媒介文件完成播放后再次开始播放

4.动态视频背景

首先网上找一段清晰的视频下载下来，最好是MP4格式的；
下载好了之后我们新建一个html文件来写代码：
html代码：

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

一个video标签包裹着，source代表来源文件，autoplay属性是自动播放，loop代表循环播放，muted代表无声播放；
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;  
}

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>

标签：播放,滚动,100%,玩法,height,width,HTML,video,个性
来源： https://blog.csdn.net/qq_45947789/article/details/112972619