HTML5学习日记——音频(audio)&视频(vedio)

浏览器支持
IE 9、Firefox、Opera 12、Chrome、Safari 5

---

audio标签

• audio：定义音频，比如音乐或其他音频流。
• source：规定多媒体资源，可以是多个。因为浏览器支持的格式不同，将不同格式的音频文件放在source下，浏览器会去寻找自己可以播放的资源。

目前，audio 元素支持的3种文件格式：MP3、Wav、Ogg。
可以在audio标签之中添加提示文字，不支持audio标签的浏览器会显示这部分内容。

属性列表

<audio controls="controls" autoplay="autoplay" controls="controls" loop="loop" muted="muted" preload="auto|metadata|none">
  <source src="xxx.ogg" type="audio/ogg" />
  <source src="xxx.mp3" type="audio/mpeg" />
  浏览器不支持audio标签
</audio>

• src：规定音频文件的URL
• autoplay：音频就绪后会自动开始播放

• controls：显示控件，播放/暂停等功能
  在chrome浏览器中的样式如下
  

• loop：循环播放

• muted：音频静音
• preload：是否在页面加载后加载音频
  
  • auto：当页面加载后载入整个音频
  • meta - 当页面加载后只载入元数据
  • none - 当页面加载后不载入音频
    注意：如果设置了autoplay属性，则忽略preload属性。

JS控制

可以不使用预设的控件，自己完成控制功能。简单的播放/暂停功能如下：

<button onclick="clickA()">播放/暂停</button>
<script>
        var auPart = document.getElementById("audioID");
        function clickA() {
            if(auPart.paused){
                auPart.play();
            }else{
                auPart.pause();
            }
        }
</script>

可以搭配CSS，实现自己的风格设计。

video标签

• video：定义视频流。
• source：规定多媒体资源，可以是多个。（和audio标签原因相同）

video元素支持三种视频格式： MP4, WebM, 和 Ogg。
同样可以在video标签之中添加提示文字，不支持video标签的浏览器会显示这部分内容。

属性列表

<video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop" preload="auto|metadata|none">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

• src、controls、autoplay、loop、preload的基本定义都和audio标签中的相应属性类似
• width、height：视频播放器的宽度和高度

JS控制

• 播放/暂停
  和音频部分相同，使用pause()和play()这两个方法

• 放大/缩小
  设置video的宽度或高度属性即可，等比例缩放，不会变形。

<button onclick="zoomIn()">放大</button>
<button onclick="zoomOut()">缩小</button> 
<script>
    var v = document.getElementById("videoID");
    function zoomIn() {
        v.width += 100;
    }
    function zoomOut() {
        v.width -= 100;
    }
</script>

---

自己加油加油 笨鸟后飞也要飞呀飞