Html中关于video标签的说明及用法

(作者:黄小龙 撰写时间:2019年1月17日)
学习中碰到了video标签的使用 所以就分享一样 希望大家多给一点建议
1.说明:
○1.标签定义视频,比如电影片段或其他小电影等,也就是说可以将视频的途径放入标签内,保存执行后便可在页面放你所放入的该途径所在的视频。
○2.目前该元素支持的视频格式有3种,分别是:MP4、WebM、Ogg。
2.用法:
○1当我们单单在这个标签里放入一个视频的途径时,是在执行页面上是放不了这个视频的比如:

无标题文档

Html中关于video标签的说明及用法_第1张图片
图表 1效果图
当我只是放入视频的一个路径时 效果显示的只有一个黑屏,所以这时我们得给他添加一个控制的属性值 来让它可以进行一个播放和暂停的功能,当然这里就得用到controls 这个值了:

Html中关于video标签的说明及用法_第2张图片
图表2效果图

这时候我们可以看到会有一个点击播放的按钮在上面,然后我们点击它就能播放视频了,当然我们也可以添加其他的属性来控制视频播放比如loop值-循环播放,autoplay值-自动播放。
○2开始的时候视频的宽高都是默认的值,我们也可以在里面添加宽高的属性值来改变视频播放口的大小。

Html中关于video标签的说明及用法_第3张图片
图表3效果图:小的那张为设定宽高后的播放口 大的为默认播放口
○3为了让这个视频播放处的样子更好看一点,我们还可以为视频添加一个封面图片

添加一个poster属性 然后在里面添加你喜欢的一个图片的路径就行了

Html中关于video标签的说明及用法_第4张图片
图表4效果图
○4有时候我们也可以在video标签里添加两个source标签,里面放置同一个文件。这个标签的作用是为了防止第一个视频在浏览器上不能播放那么它就会去播放第二个,文件都是同一个 但是是不同的格式。

你可能感兴趣的:(Html中关于video标签的说明及用法)