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

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

无标题文档

在这里插入图片描述
图表 1效果图
当我只是放入视频的一个路径时 效果显示的只有一个黑屏,所以这时我们得给他添加一个控制的属性值 来让它可以进行一个播放和暂停的功能,当然这里就得用到controls 这个值了:

在这里插入图片描述
图表2效果图

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

在这里插入图片描述
图表3效果图:小的那张为设定宽高后的播放口 大的为默认播放口
○3为了让这个视频播放处的样子更好看一点,我们还可以为视频添加一个封面图片

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

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

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值