怎样在html网页中插入视频优质

2W次浏览推荐于2020.10.12

html技术发展得非常快，比如现在html5已经支持在网页中插入视频了。今天咪咪我就来教教大家怎样在html中插入视频。

操作方法

01
第一步，在Hbuilder中新建一个项目，然后把视频素材给保存到其中某个文件夹。注意，虽然html5支持插入视频，不过对视频格式有要求，视频编码格式必须是H.264或者是AVC的才可以在网页中播放哦。一般MP4格式的视频都可以，少量的不行哦。
02
然后新建一个HTML5文件，因为插入视频用到video标签，而video标签是HTML5新增的标签。
03
接着就是使用video标签了，如图，添加一对video标签。
04
然后在video标签里面使用source标签来链接到之前的视频文件。
05
之后，保存网页，预览会看到视频没有自动播放，接着继续来完善一下代码。
06
如图，给video标签添加autoplay属性，这样就可以设置视频自动播放了。
07
如图，再次保存网页，当页面加载完成之后，视频就会自动播放了。不过这时候只可以自动播放，像一些暂停，调节声音大小等功能都是没有的。
08
接着我们再给video标签添加controls属性，然后保存。
09
之后，预览网页就会发现当鼠标进入视频区域，在视频下方就会多出一个控制栏，在这里就可以快进，暂停，调节声音，全屏播放了。
10
当然，还可以设置video的宽度，比如我就设置为1000px大小。
11
这样视频区域就会变大，如图，这里就只能截取视频的部分区域。
End

本页搜狗指南内容仅代表作者本人意见，若因此产生任何纠纷由作者本人负责，概与搜狗公司无关。本页搜狗指南内容仅供参考，请您根据自身实际情况谨慎操作。尤其涉及您或第三方利益等事项，请咨询专业人士处理。