怎样在html里面加入视频?

html-css012

怎样在html里面加入视频?,第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”,这时视频加载完成后就会自动播放:

其实方法简单,大家可以看看下面的网页视频保存教程了解一下。

网页视频保存到本地的方法分享:也不知道是不是上传视频的作者为了保持原创,关闭了保存的途径,还是本身就是不能进行保存。不过也不是没办法,我们可以通过以下解决。

1、我们打开一个浏览器,搜视频关键字。

2、接着我们找到需要的视频,进行浏览(浏览时一定要让它缓存成功)。

3、之后我们找到浏览器的工具栏,选择“Internet选项(O)”,并点击浏览历史记录中的“设置”。

4、接着我们点击“查看文件”。

5、最后在里面就有我们之前看过视频的缓存文件,我们将它保存在桌面即可。

如果遇到浏览器不能保存的视频,即可通过以上的办法进行解决,将其保存在桌面上就可以。一般浏览的视频会排在最前方,后缀带rm、avi、mpeg等格式的,很好找。

工具/原料:

联想小新潮7000-13

Win 10

Visual Studio Code1.47.2

1、进入Visual Studio Code,新建html文件

打开Visual Studio Code软件,打开工作区空间,选择需要进行操作的文件夹,点击上方的新建文件选项。

2、给html文件命名为video.html

在弹出的文本框中给html文件命名,文件命名为video.html。

3、输入添加视频文件的代码

在新建的.html文件中输入添加视频文件的html代码:

<video src="../media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>。

4、使用工具查看代码效果

在代码的空白区域右击—>在弹出的选项卡中选择Open In Default Browser选项。

5、显示视频文件

点击运行之后,在浏览器网页中显示添加的视频文件,点击播放按钮,正常播放视频。