如何在h5中添加视频?

html-css026

如何在h5中添加视频?,第1张

通过html5中的video标签添加视频文件。

1、新建html文件,如图所示,在body标签中添加video标签,为video标签设置“src”属性,属性值是视频文件地址,这里以html同一目录下的“movie.mp4”视频为例:

2、此时的视频只会显示一个封面,并没有控制按钮,这时为video标签添加“controls”属性,如图所示,不需要添加属性值,可以看到视频中出现了常用的控制按钮:

3、直接插入的视频显示宽和高是视频本身默认的宽和高,这时可以给video添加我们想要的宽和高,这里以宽度400和高度300为例,添加属性“width”,属性值为“400”,添加属性“height”,属性值为“300”:

4、这时视频默认是加载完成后等待用户点击播放按钮再播放,如果需要加载完成后自动播放,可以给video添加属性“autoplay”,属性值为“autoplay”,这时视频加载完成后就会自动播放:

在html5中video元素的preload属性用于当视频加载时显示播。根据相关网站查询得知,preload属性,主要用于设置视频在页面加载的过程中,视频是否自动预加载。当设置了preload为“auto”时,视频在打开页面时就开始预加载。

HTML5是下一代的HTML,提供了展示视频的标准,规定了一种通过video元素来包含视频的标准方法。

Video有以下的属性。

autoplay  autoplay  如果出现该属性,则视频在就绪后马上播放。

controls  controls  如果出现该属性,则向用户显示控件,比如播放按钮。

height    pixels  设置视频播放器的高度。

loop     loop  如果出现该属性,则当媒介文件完成播放后再次开始播放。

preload   preload  如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用"autoplay",则忽略该属性。

src       url  要播放的视频的URL。

width     pixels  设置视频播放器的宽度。