Html 5 新标签之Media

趁着自己还有空闲的时间,仔细的重新回顾了一下html5

HTML5

HTML5,目前被广泛使用中,对比前一个4.01版本,新加入了很多功能,其中就有很多新的标签,给前端开发带来了极大的便利。

HTML5 新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

新标签之视频和音频

HTML5中加入了video和audio的标签,可以支持在html文件中加载音视频。

video元素支持的视频格式:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 (仅支持Firefox3.5+,Opera10.5+,Chrome5.0+)
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 (仅支持IE9.0+,Chrome5.0+,Safari3.0+)
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 (仅支持Firefox4.0+,Opera10.6+,Chrome6.0+)
更多视频格式内容

HTML5使用方法:

<video width="320" height="240" controls="controls" id="video1">
    <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
    <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

视频资源来自w3school,浏览器会找source列表中的视频,并使用第一个格式适配的资源,如果两种格式都不适配,则显示文字内容。
controls属性的设置为controls,可以显示播放、暂停和音量控件
autoplay属性设置值为autoplay,则视频在就绪后马上播放。
height属性设置为200pixels表示视频播放器的高度为200pixels;同理用width设置视频播放器的宽度。
loop属性设置为loop,则当媒介文件完成播放后再次开始播放。
preload属性设置为preload,则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src属性中设置的是视频资源的url。

使用DOM控制视频元素

不仅可以通过视频自带的控制按钮来控制视频,还可以通过DOM来操控视频

<button onclick="playPause()">播放/暂停</button>
<script type="text/javascript">
    var myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
</script>

当点击按钮的时候,视频如果是停止的,会继续播放,播放的会停止。

audio元素的音频格式及支持它的浏览器

audio 元素支持三种音频格式：
Ogg Vorbis(Firefox 3.5, Opera 10.5, Chrome 3.0)
MP3(IE 9, Chrome 3.0, Safari 3.0)
Wav (Firefox 3.5, Opera 10.5, Safari 3.0)

audio使用方式

<audio controls="controls">
    <source src="/i/song.ogg" type="audio/ogg">
    <source src="/i/song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

audio中的属性和值与video 类似

Github参考代码
W3C school的HTML5教程

2016-09-30