这是我参与「第四届青训营」笔记创作活动的第15天

多媒体元素和扩展API

video元素

使用video元素，使得在页面播放视频。

src属性：视频链接或地址。
muted：默认静音播放
autoplay：默认自动播放
controls：增加控件。
currentTime ：设置或返回视频中的当前播放位置，单位（秒）
volume：设置或返回视频的音量
buffered：表示视频已经缓冲部分的TimeRangers对象
playbackRate：设置视频播放速度
error：返回或表示视频错误状态的MediaErrorduix
readyState：返回当前视频的就绪状态
······
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体</title>
</head>
<body>
   <!-- video元素-->
    <video id="vs" src="./xxxx.mp4" muted autoplay controls width="600" height="300"></video>
</body>
</html>

audio元素

使用audio元素，可以在页面播放音频。

src属性：音频链接或地址
muted：默认静音
autoplay：默认自动播放
controls：控件
·····（与video类似）
代码示例：

   <!-- 方式一 -->
   <audio src="./xxxx.mp4" muted autoplay controls width="600 height=300"></audio> 
   <!-- 方式二 -->
  <audio muted autoplay xontrols width="600" height="300">
   <source src="./xxxx.mp4"></source>    
    </audio>

audio和video元素方法

从上面的笔记来看，他们的用法几乎是一摸一样的。而他们的方法也是。

play():开始播放音视频
pause():暂停当前播放的音视频
load():重新加载音视频元素
canPlayType():检测浏览器能否播放指定的音视频类型
addTextTrack():向音视频中添加新的文本轨道
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体</title>
</head>
<body>
       <!--onclick添加按钮方法-->
    <button onclick='getVloume()'>当前音量</button>
    <button onclick= 'playVid()' >播放</button>
    <button onclick='playStop()' >暂停</button>
    <button onclick='playReset()' >重载</button>
    <!--通过ID定位-->
    <video id="vs" src="./xxx.mp4" muted autoplay controls width="600" height="300"></video>
    <!-- <audio src="./xxxx.mp3" muted autoplay controls width="600 height=300"></audio> -->
  <audio muted autoplay xontrols width="600" height="300">
   <source src=./xxxx.mp3"></source>    
    </audio>

<script>
 const videoMy =document.getElementById("vs")
     
 function getVloume(){
    alert(videoMy.volume);
 }

 function playVid(){
    videoMy.play();
 }

 function playStop(){
    videoMy.pause();
 }

 function playReset(){
    videoMy.load();
 }
</script>
</body>
</html>

效果展示：

如果再使用css就完美了。

Web多媒体入门-多媒体元素和扩展API | 青训营笔记

多媒体元素和扩展API

video元素

audio元素

audio和video元素方法