HTML<video>标签

<video> 标签定义视频，比如电影片段或其他视频流，是 HTML5 的新标签。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

提示和注释：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

可选属性

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放、暂停、音量等按钮。
height (pixels) 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 如果出现该属性，视频的音频输出为静音。
poster (URL) 规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload auto
metadata
none		 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src (URL) 要播放的视频的 URL。
width (pixels) 设置视频播放器的宽度。

参考菜鸟教程HTML<video>标签

实例练习

复刻 微博新版 登录页的顶部视频部分：

THcBsH.png

1
2
3
4
5
6
7
8
9
10
11
<div class="Box-top">
        <video class="top-video" 
        autoplay="autoplay" //立即播放
        loop="loop"         //循环播放
        muted="muted"       //静音播放
        poster="https://a.sinaimg.cn/mintra/pic/2112130400/18weibo_login.png"   //替换图片
        src="https://a.sinaimg.cn/mintra/pic/2112130543/weibo_login.mp4"    //视频地址 
        > 
        抱歉，您的浏览器不支持内嵌视频 
        </video>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* author: BarryFlynn */
/* update: 2022-01-02 */
body {
    margin: 0;
    background: #0c0c0c;
}
.Box-top {
    height: 300px;
    width: 100%;
    background: rgb(97, 97, 97);
    position: relative;
    border: 1px solid #0c0c0c; //防止内边距塌陷
}
.top-video {
        height: 300px;
        position: absolute;
        left: 50%; //距离页面左边是浏览器窗口大小的50%
        transform: translateX(-50%); //向左移动相对于自身50%的长度
    }