HTML5:新增多媒体

308 阅读1分钟

<source> 标签

<source> 标签为媒体元素(比如 <video><audio>)定义媒体资源

属性描述
mediamedia_query规定媒体资源的类型,供浏览器决定是否下载
srcurl规定媒体文件的url
typeMIME_type规定媒体资源的 MIME 类型

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

音频标签 <audio>

<audio> 标签定义声音,比如音乐或其他音频流。<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。

属性描述
autoplayautoplay自动播放
controlscontrols播放控件
looploop循环播放
srcurl要播放的音频的url

语法

<audio src="文件地址" controls="controls"></audio> 

< audio controls="controls" > 
    <source src="happy.mp3" type="audio/mpeg" > 
    <source src="happy.ogg" type="audio/ogg" > 
    您的浏览器暂不支持 <audio> 标签。 
</ audio>

视频标签 <video>

<video> 标签定义视频,比如电影片段或其他视频流。<video> 元素支持三种视频格式:MP4、WebM、Ogg。

属性描述
autoplayautoplay自动播放
controlscontrols播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
looploop循环播放
preloadauto(预先加载) none(不加载)预先加载
srcurl视频 url 地址
posterimgurl加载等待的画面图片
mutedmuted静音播放

语法

<video src="文件地址" controls="controls"> </video> 

// 播放录像
<video controls="controls" width="300"> 
    <source src="move.ogg" type="video/ogg" > 
    <source src="move.mp4" type="video/mp4" > 
</ video >

<style>
    video {
        width: 100%;
    }
</style>
<body>
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg"></video>
</body>

<track> 标签

<track> 标签为媒体元素(比如 <audio><video>)规定外部文本轨道,也就是字幕,字幕格式有 WebVTT 格式(.vtt 格式文件)。

属性描述
defaultdefault规定该轨道是默认的
kindcaptions,chapters,descriptions,metadata,subtitles规定文本轨道的文本类型
labeltext规定文本轨道的标签和标题
srcurl必需的 规定轨道文件的 url
srclanglanguage_code规定轨道文本数据的语言。如果 kind 属性值是 "subtitles",则该属性是必需的

例:带有字幕轨道(friday.vtt)的视频

<video width="320" height="240" controls>
<video controls src="/video/php/friday.mp4">
    <track default kind="captions" srclang="en" src="/video/php/friday.vtt" />
    您的浏览器不支持嵌入视频!
</video>
</video>