HTML5音频-视频处理demo

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5音频-视频处理demo相关的知识,希望对你有一定的参考价值。

html5视频-音频处理(最后有demo)
 * 基本内容
  * 使用Flash技术处理HTML页面中的视频内容
  * 包含音频、动画、网页游戏等
  * 特点
  * 浏览器原生不支持(IE浏览器要求安装ActiveX组件)
  * 性能不好(不能过多地使用)
  * 智能移动端并不支持Flash技术
  * 命运
    * Flash的母公司Adobe公开宣布放弃
    * 目前用于替代Flash技术最好的选择 - HTML5
    * 几乎所有浏览器原生支持<video>元素
    * 性能更高
  * 智能移动端支持非常好
 * 如何实现视频处理
  * <video>元素
  * 如果当前浏览器不支持<video>元素
  * 在<video>元素内编写提示内容
  * 属性
    * src - 引入视频文件的路径
    * autoplay - 自动播放视频
    * 使用<source>元素
      <video>
        <source src="一种视频格式" />
        <source src="一种视频格式" />
        <source src="一种视频格式" />
      </video>
    * <video>支持的视频格式
    * MP4格式 - 目前比较主流
    * OGG格式 - 多用于移动端
    * WebM格式 - 目前唯一支持超高清格式
  * 在HTML页面中支持超高清格式(HTML5)
    * 由Google公司推出的
    * <video>元素的属性
      * src - 引入视频文件的路径
      * autoplay - 自动播放视频
      * controls - 提供控制面板
      * loop - 表示循环播放
      * poster - 设置播放之前显示的图片
      * width和height - 设置显示视频的宽度和高度
      * preload - 预加载
      * auto - (默认值)自动加载
      * none - 不加载
      * metadata - 只加载视频的基本信息(不含视频)
  * 高级内容
    * 方法
      * play() - 播放视频
      * pause() - 暂停视频
      * load() - 加载视频
      * canPlayType() - 判断当前浏览器是否支持指定视频格式
    * 事件
      * play - 当视频播放时被触发
      * pause - 当视频暂停时被触发
      * ended - 当视频结束时被触发
      * error - 当视频错误时被触发
      * canplay - 不考虑整体情况下,只要能播放,就播放
      * canplaythrough - 考虑整体情况下,只要能播放,就播放
      * progress - 表示视频加载的进度
      * 属性 - 用于判断
      * paused - 表示判断当前视频是否暂停
      * 返回Boolean值,true表示暂停,false表示播放
      * ended - 表示判断当前视频是否播放完毕
      * 返回Boolean值,true表示完毕
      * duration - 表示当前视频的时长
      * currentTime - 表示当前视频播放的位置
 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>视频引入</title>
 6     </head>
 7     <body>
 8         <!--    
 9         <video>元素 - 处理视频
10         *使用 - 类似于<img src="">元素
11         *属性
12           * src - 引入视频的路径            
13        -->
14         <video src="video/video/1.mp4" autoplay="autoplay"  >
15             不好意思您们的浏览器不支持
16         </video>
17     </body>
18 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>多个视频引入</title>
 6     </head>
 7     <body>
 8         <video src="">
 9             不好意思,您的浏览器不支持此视频
10             <!--
11                 
12             使用<source>元素引入视频路径
13             *在<video>元素中允许包含多个<source>元素    
14             -->
15             <source src="video/1.mp4" />
16             <source src="video/1.mp4" />
17             <source src="video/1.mp4" />
18         </video>
19     </body>
20 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>03-video元素的属性</title>
 6     </head>
 7     <body>
 8         <!--
 9             controls属性 - 提供视频播放的控制面板 
10             * 只定义属性名,没有属性值
11         -->
12         <!--<video src="video/video/1.mp4" controls></video>-->
13         <!--
14             loop属性 - 表示视频的循环播放
15         -->
16         <!--<video src="video/video/1.mp4" autoplay loop ></video>-->
17         
18         <!--
19             poster属性 - 在播放视频之前显示一张图片
20         -->
21         <!--<video src="video/video/1.mp4" controls poster="images/spjt.png"></video>-->
22         
23         <!--
24             修改显示视频的宽度和高度
25             * width - 设置宽度
26             * height - 设置高度
27         -->            
28         <video src="video/video/1.mp4" controls poster="images/spjt.png" 
29             width="600" height="400" style="background: black;" preload="auto"></video>
30     </body> 
31 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>04-video元素的方法</title>
 6         <style>
 7             #adv {
 8                 display: none;
 9                 position: absolute;
10                 top: 100px;
11                 left: 200px;
12             }
13         </style>
14     </head>
15     <body>
16         <video id="video" src="video/video/1.mp4" controls></video>
17         <div id="adv">
18             <img src="images/spjt.png" width="700"/>
19         </div>
20         <script>
21             //1. 获取HTML页面video元素
22             var video = document.getElementById("video");
23             //2获取广告图片
24             var adv = document.getElementById("adv");
25             //3. video元素的事件绑定 - play | pause
26             video.addEventListener("play",myplay);
27             video.addEventListener("pause",mypause);
28             //3. 定义事件对应的处理函数
29             function myplay() {
30                 //视频播放
31                 adv.style.display = "none";
32             }
33             function mypause() {
34                 //视频暂停
35                 adv.style.display = "block";
36             }
37             
38         </script>
39     </body>
40 </html>
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>05 - video自定义控制面板</title>
 6     </head>
 7     <body>
 8         <video id="mmedia" src="video/video/1.mp4"></video>
 9         <br />
10         <input type="button" value="paly" id="play" />
11     <script type="text/javascript">
12         //1. 获取button按钮
13         var btn = document.getElementById("play");
14         var mmedia = document.getElementById("mmedia");
15         //2. 为button按钮绑定click事件
16         btn.addEventListener("click",myplay);
17         //3. 定义处理函数
18         function myplay(){
19             // 判断当前视频是否暂停
20             if(mmedia.paused){
21             mmedia.play();
22             btn.value = "pause";
23             }else{
24                 mmedia.pause();
25                 btn.value = "play";
26             }
27         }
28     </script>
29     
30     </body>
31 </html>


*音频处理
  * 第一种 - 只支持一种音频格式
    <audio src="一种音频格式"></audio>
  * 第二种 - 同时引入多个音频格式
    <audio>
      <source src="一种音频格式"/>
      <source src="一种音频格式"/>
      <source src="一种音频格式"/>
    </audio>
  * <audio>元素支持的视频格式
    * MP3 - 目前最主流
    * OGG
    * WVA

  * 属性和方法基本和音频处理一至

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>06-audio音频元素</title>
 6     </head>
 7     <body>
 8         <audio src="video/video/yy.mp3" controls autoplay loop></audio>
 9     </body>
10 </html>

* 扩展内容
    * Web前端 - 移动端
      * 移动智能终端
      * iPhone - ios系统 - Object-c|Swfit
      * android系统 - Java
      * Windows Mobile系统 - .net平台
      * BlackBerry系统 - 企业级应用 QNX
      * WebOS系统 - 全键盘+触摸屏
    * 塞班 - 诺基亚
      * MeeGo - Inter和诺基亚
      * 移动跨平台 - HTML|CSS|JAVASCRIPT
      * 一次编写,到处运行(phoneGap)


























































































以上是关于HTML5音频-视频处理demo的主要内容,如果未能解决你的问题,请参考以下文章

HTML5视频Video 音频Audio

HTML5音频播放,歌词同步,及视频播放功能(JPlayerJWPlayerVideoJS)

如何为 HTML5 视频设置音频延迟(不同步)

从 html5 视频中获取音频

一文搞懂HTML5标签新特性视频音频语义

HTML5——拖放 地理定位 视频 音频 新的input类型