HTML5 学习笔记2017-02-13 pm

video 标签

什么是 video 标签
作用:播放视频
格式:

<video src="">
</video>

video 标签的属性

  • src:用于告诉 video 标签需要播放的视频地址
  • autoplay: 用于告诉 video 标签是否需要自动播放视频
  • controls: 用于告诉 video 标签是否需要显示控制条
  • poster: 用于告诉 video 标签视频没有播放之前显示的占位图片
  • loop: 一般用于做广告视频,用于告诉 video 标签视频播放完毕之后是否需要循环播放
  • preload:预加载视频,但是需要注意 preload 和 autoplay 相冲,如果设置了 autoplay 属性,那么 preload 属性就会失效
  • muted:静音
  • width/height:和 img 标签中的一模一样
<video src="images/sb1.webm" controls="controls" autoplay="autoplay" loop="loop" muted="muted" width="800px"></video>

video 的第二种格式

格式

<video autoplay="autoplay" controls="controls">
        <source src="" type="">(</source> 
 source 是单标签没有后面这个)
</video>
  • 第二种格式存在的意义:由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人的视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候 W3C 为了解决这个问题,所以推出了第二个 video 标签的格式
  • video 标签的第二种格式存在的意义就是为了解决浏览器是陪问题,video 元素支持三种视频格式,我们可以把三种格式都通过 source 标签指定给 video 标签,那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

注意点

  • 当前通过 video 标签的第二种格式虽然能够指定所有浏览器都支持的视频格式,但是向让所有浏览器都通过 video 标签播放视频还有一个前提条件,就是浏览器必须支持 HTML5 标签,否则同样无法播放
  • 在过去的一些浏览器是不支持 HTML5 标签的,所以为了让过去的一些浏览器也能够通过 video 标签来播放视频,那么我们以后可以通过一个 JS 的框架 叫做 html5media 来实现
<video autoplay="autoplay" controls="controls">
        <source src="images/sb1.webm" type="video/webm">
        <source src="images/sb1.mp4" type="video/mp4">
        <source src="images/sb1.ogg" type="video/ogg">
</video>

audio 标签

作用:播放音频
格式:

<audio src="">
</audio>
<audio>
        <source src="" type="">
</audio>

注意点:
audio 标签的使用和 video 标签的使用基本一样,video 中能够使用的属性在 audio 标签中大部分都能够使用,并且功能一样,只不过有3个属性不能呢用,height/width/poster

<audio autoplay="autoplay" controls="controls">
        <source src="images/yinyue.mp3" type="audio/mp3">
</audio>

详情和概要标签

作用:利用 summary 标签来描述概要信息,利用 details 标签来描述详细信息
默认情况下是折叠展示,向看见详情必须点击
格式

<details>
        <summary>概要信息</summary>
        详细信息
</details>

marquee 标签

marquee 标签的作用是跑马灯
格式:

<marquee>内容</marquee>

属性
direction:设置滚动方向 left/right/up/down

<marquee>随便写点什么</marquee>
<marquee direction="right">随便写点什么</marquee>
<marquee direction="up">随便写点什么</marquee>
<marquee direction="down">随便写点什么</marquee>

scrollamount:设置滚动速度,值越大就越快

<marquee scrollamount="1">随便写点什么</marquee>
<marquee scrollamount="100">随便写点什么</marquee>

loop:设置滚动次数,默认是-1,也就是无限滚动

<marquee loop="1">随便写点什么</marquee>

behavior: 设置滚动类型,alide 滚动到边界就停止,alternate 滚动到边界就弹回

<marquee behavior="slide">随便写点什么</marquee>
<marquee behavior="alternate">随便写点什么</marquee>

图片滚动

<marquee>
       <i*mg src="images/nj.jpg">(加* 简书自动改格式)
</marquee>

注意点
marquee 标签不是 w3c 推荐的标签,在 w3c 官方文档中也无法查询这个标签,但是各大浏览器对这个标签的支持非常好

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容