06-HTML多媒体标签

video标签

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

<video src="image/20170530_IMG_0624.MOV" preload="metadata" controls="controls" loop="loop" width="600px" poster="image/QRCode.jpg"></video>

• 第二种格式
  • 存在的意义
    • 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别
      人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
      这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
    • video标签的第二种格式存在的意义就是为了解决浏览器适配问题
    • video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
  • 注意点:
    • 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
    • 在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

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

---

audio标签

• 作用: 播放音频
• 格式分为两种

第一种格式
<audio src="">
</audio>
第二种格式
<audio>
    <source src="" type="">
</audio>

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

<audio src="image/yinyue.mp3" loop="loop" autoplay="autoplay" controls="controls">
</audio>

<!--
audio标签另一种写法
-->
<audio controls="controls" loop="loop">
    <source src="image/yinyue.mp3" type="audio/mp3">
    <source src="image/yinyue.ogg" type="audio/ogg">
</audio>

---

embed

• 常用在视频分享

<embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=u0763trg0ro&auto=0" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">