HTML+CSS+JavaScript复习笔记持更（四）——多媒体篇

HTML5的多媒体

在html5中新增了两个多媒体标签

• audio音频标签
• video视频标签

语法格式

在语法格式上，音频与视频，大致相同
（无法正常播放）

	<video src=""></video>
    <audio src=""></audio>

往src里填写视频/音频路径即可，但是这时候会显示一个图片，不会进行播放，也没办法操控播放，这是因为我们还没有使用任何的控制组件。

正确可使用方式：

	<audio id="" src="1.mp3" controls></audio>
    <video id="" src="./1.mp4" controls="controls" width="300px"></video>

controls属性表示使用浏览器自带控制条，通常自带播放、暂停等按钮。
controls的完全写法应该是controls="controls"，也可以简写成 controls

谷歌浏览器实测：

IE浏览器实测：

突然觉得谷歌好圆润，符合我的审美，nice

多媒体的其他属性

• autoplay（自动播放，autoplay="autoplay"，可简写为 autoplay ）
• perload（预加载，提高播放速度，属性值none、metadata、auto）
• poster(video独有，如果播放失败时展示一幅图片代替，属性值即为图片地址)
• loop（循环播放，loop="loop"，可简写为loop）
• width、height（设置窗口的大小）
• currentsrc（只读属性，返回媒体的URL地址）
• played、paused、ended（已经播放的时间段、是否暂停、是否播放完毕）
• volume、muted（音量、静音）

在perload中，none表示不预先加载，metadata表示预先加载元数据（字节数、第一帧、时间等）

paused和ended返回的是布尔值，true表示已暂停/已结束，false表示未暂停/未结束

volume表示音量，属性值1-0，1表示100%，0表示0%
muted表示静音，属性值为布尔值，true表示静音，false表示未静音

多媒体的方法

无论是音频还是视频，都存在三种方法，播放、暂停、重新载入

• 播放 play()
• 暂停 pause()
• 重新载入 load()

<video id="xsx" src="./1.mp4" controls="controls" preload="auto" muted="true" autoplay="autoplay" preload="auto" width="300px" loop="loop"></video>
    <input type="button" value="播放" onclick=play()>
    <input type="button" value="暂停" onclick=pause()>
    <input type="button" value="重新加载" onclick=load()>
    <script>
        var x = document.getElementById('xsx')
        function play(){
            x.play()
            console.log("播放")
        }
        function pause(){
            x.pause()
            console.log("暂停")
        }
        function load(){
            x.load()
            console.log("重新加载")
        }
    </script>