video标签和source标签

介绍

< video >元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。

< source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源

video标签常见属性

  1. autoplay 如果出现该属性,则视频在就绪后马上播放。
  2. controls 如果出现该属性,则向用户显示控件,比如播放按钮。
  3. loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
  4. muted 如果出现该属性,视频的音频输出为静音。
  5. src 要播放的视频的 URL。

source标签常见属性

  1. src 规定媒体文件的 URL。
  2. type 规定资源的媒体类型

解释

  1. source标签可以写多个,并指定type ,兼容不同浏览器解码支持。但src只能写一个
  2. source标签的type属性的属性值有video/ogg,video/mp4,video/webm

代码及效果

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video autoplay muted controls loop src="../web(VS)/烟把儿 - 纸短情长.mp4"></video>
    <video autoplay muted controls loop >
        <source src="../web(VS)/烟把儿 - 纸短情长.mp4" type="video/webm">
    </video>

</body>
</html>

效果:
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值