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