【HTML5】——音视频处理

朴灿烈づ我的快乐病毒、 2022-06-07 03:29 297阅读 0赞

1.视频处理  
1.1 video元素  
1.2 video元素的属性  
1.3 video的高级用法（方法）  
1.4 video的高级用法（事件）  
1.5 video的高级用法（属性）  
2.音频处理  
2.1.audio的高级用法  
3.video.js类库

h5支持的视频格式：

*  mp4：目前比价主流的视频格式
 *  ogg：视频扩展名是.ogv，手机端的视频格式
 *  WebM：目前唯一一个支持超高清的视频格式，该视频格式出自Google

<table> 
 <tbody> 
  <tr> 
   <td>video元素</td> 
  </tr> 
 </tbody> 
</table>

引入视频元素  
属性：  
     1. src：视频地址  
     2. autoplay：自动播放  
     3. width：设置视频宽度  
     4.height：设置视频高度  
注意：  
     1. 视频的宽高比不会改变  
     2.在video元素内定义不支持的提示内容  
source元素可以引入多个格式的视频文件  
     作用：实现各个浏览器的兼容性  
     注意：视频的宽高比不会改变； 在video元素内定义不支持的提示内容

<table> 
 <tbody> 
  <tr> 
   <td>video元素的属性</td> 
  </tr> 
 </tbody> 
</table>

1.  autoplay属性：自动播放
2.  controls属性：提供控制面板
3.  loop属性 ： 循环播放
4.  poster属性 ： 播放之前显示一张图片
5.  preload属性 ： 预加载(视频)  
     none - 不加载  
     auto - (默认值)自动(尽快加载完毕)  
     metadata - 只加载除视频之外的信息(宽和高)

<video src="video/oceans-clip.mp4" poster="video/oceans-clip.png" controls>
        视频无法播放！
    </video>

![SouthEast][]

<table> 
 <tbody> 
  <tr> 
   <td>video的高级用法（方法）</td> 
  </tr> 
 </tbody> 
</table>

1.  play()：播放视频
2.  pause()：暂停播放
3.  load()：加载媒体文件
4.  canPlayType(type)：查看浏览器是否支持该格式

<table> 
 <tbody> 
  <tr> 
   <td>video的高级用法（事件）</td> 
  </tr> 
 </tbody> 
</table>

1.  progress：下载进度
2.  canplaythrough：整体播放顺利时触发
3.  canplay：可播放时触发（不考虑整体）
4.  ended：结束视频时触发
5.  pause：暂停视频时触发
6.  play：播放视频时触发
7.  error：播放错误时触发

实例：页面中插入广告：  
![SouthEast 1][]

<!doctype html>
    <html lang="lang">
    <head>
        <meta charset="UTF-8">
        <title>video元素</title>
        <style> #ad { position: relative; top: -225px; left: 170px; display: none; } </style>
    </head>
    <body>
    <video src="video/oceans-clip.mp4" id="media" controls>
        视频无法播放！
    </video>
    <div id="ad"><img src="video/3602.png" style="width: 280px"></div>
    <script type="text/javascript"> var media = document.getElementById("media"); media.addEventListener("play", myPlay); media.addEventListener("pause", myPause); var oDiv = document.getElementById("ad"); function myPlay() { console.log("视频已播放"); oDiv.style.display = "none"; } function myPause() { console.log("视频已暂停"); oDiv.style.display = "block"; } // 全屏播放时，图片无法显示 // 全屏播放时，会自动设置为页面中最顶端的元素 </script>
    </body>
    </html>

<table> 
 <tbody> 
  <tr> 
   <td>video的高级用法（属性）</td> 
  </tr> 
 </tbody> 
</table>

1.  paused：判断视频当前是否暂停，暂停返回true
2.  ended：判断视频当前是否结束播放，结束返回true
3.  duration：当前视频的总时长
4.  currentTime：表示当前视频播放的位置，还可以设置

自制播放暂停按钮：  
![这里写图片描述][SouthEast 2]

<!doctype html>
    <html lang="lang">
    <head>
        <meta charset="UTF-8">
        <title>video元素</title>
    </head>
    <body>
    <video src="video/oceans-clip.mp4" id="media">
        视频无法播放！
    </video>
    <br/>
    <input type="button" value="播放" id="btn"/>
    <script type="text/javascript"> var btn = document.getElementById("btn"); btn.addEventListener("click", myclick); var media = document.getElementById("media"); function myclick() { if (media.paused) { //播放视频 play() media.play(); btn.value = "暂停"; } else { media.pause(); btn.value = "播放"; } } </script>
    </body>
    </html>

目前HTML页面实现音频处理：  
    1.将Window Media Player播放器，内置在页面中  
    2.使用flash技术实现  
    3.HTML5实现

支持的音频格式：  
    1. mp3  
    2. ogg  
    3. wav

如何使用音频：  
    1. audio元素：引入一种音频格式  
    2. audio元素+source元素：引入多种音频格式

音频的属性：  
    1. autoplay：自动播放  
    2. controls：提供控制面板  
    3. loop：循环播放  
    4. preload：缓存设置，预加载

<table> 
 <tbody> 
  <tr> 
   <td>audio的高级用法</td> 
  </tr> 
 </tbody> 
</table>

事件：  
    1. play：播放音频时触发  
    2. pause：暂停音频时触发

方法：  
    1. play()：播放音频  
    2. pause()：暂停音频

属性：  
    pause：true表示暂停

注意：无论音频还是视频，IE8及以下都不支持。  
    视频或者音频不同浏览器支持格式可能不相同。

<table> 
 <tbody> 
  <tr> 
   <td><b>3.video.js类库</b></td> 
  </tr> 
 </tbody> 
</table>

[http://www.videojs.com][http_www.videojs.com]

[SouthEast]: /images/20220607/aa5322228bc54be584eb91944960ce2f.png
[SouthEast 1]: /images/20220607/cb67e5c158c8483cbb50b5870deb4f36.png
[SouthEast 2]: /images/20220607/3aaaa28410ef4479b0a8d238777b9b94.png
[http_www.videojs.com]: http://www.videojs.com