玄幻小说排行榜完本,古风,我欲封天耳根小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

三款HTML 5的視頻和音頻播放器

今天將為大家介紹三款HTML 5的視頻和音頻播放器，這里就不多廢話了，首先先看第一款。

創(chuàng)新互聯(lián)專注于興安盟烏蘭浩特企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),購物商城網(wǎng)站建設(shè)。興安盟烏蘭浩特網(wǎng)站建設(shè)公司,為興安盟烏蘭浩特等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

HTML5視頻和音頻播放器jPlayer

由于官方下載回來的文件只有幾個(gè)核心JS，具體的例子還需要根據(jù)上面的教程自己搭建。下面就一起來看看每個(gè)demo的簡要實(shí)現(xiàn)代碼和在線示例：

1、jPlayer作為視頻播放器

初始化的js代碼：

 
 
 
   
  
  
  $(document).ready(function(){       
  
  
      $("#jquery_jplayer_1").jPlayer({     
  
  
          ready: function () {     
  
  
              $(this).jPlayer("setMedia", {m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",                 ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",                 webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",                 poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"   
  
  
              });     
  
  
          },     
  
  
          swfPath: "../js",     
  
  
          supplied: "webmv, ogv, m4v",     
  
  
          size: {     
  
  
              width: "640px",     
  
  
              height: "360px",     
  
  
              cssClass: "jp-video-360p"   
  
  
          }     
  
  
      });     
  
  
  });

在線示例

2、jPlayer作為音頻播放器

初始化的js代碼：

 
 
 
   
  
  
  $(document).ready(function(){       
  
  
      $("#jquery_jplayer_1").jPlayer({     
  
  
          ready: function (event) {     
  
  
              $(this).jPlayer("setMedia", {m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",                 oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"   
  
  
              });     
  
  
          },     
  
  
          swfPath: "../js",     
  
  
          supplied: "m4a, oga",     
  
  
          wmode: "window"   
  
  
      });       
  
  
  });

在線示例

3、jPlayer作為個(gè)性化的環(huán)形音頻播放器

初始化的js代碼：

 
 
 
   
  
  
  $(document).ready(function(){       
  
  
      var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",     
  
  
      {     
  
  
          m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",     
  
  
          oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"   
  
  
      }, {     
  
  
          cssSelectorAncestor: "#cp_container_1",     
  
  
          swfPath: "../js",     
  
  
          wmode: "window"   
  
  
      });       
  
  
  });

在線示例

4、jPlayer作為帶播放列表的視頻播放器

初始化的js代碼：

 
 
 
   
  
  
  $(document).ready(function(){       
  
  
      new jPlayerPlaylist({     
  
  
          jPlayer: "#jquery_jplayer_1",     
  
  
          cssSelectorAncestor: "#jp_container_1"   
  
  
      }, [     
  
  
          {     
  
  
              title:"Big Buck Bunny Trailer",     
  
  
              artist:"Blender Foundation",     
  
  
              free:true,  
  
  
   m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",               
  
  
   ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",               
  
  
   webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",               
  
  
   poster:"http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"   
  
  
          },     
  
  
          {     
  
  
              title:"Finding Nemo Teaser",     
  
  
              artist:"Pixar",               
  
  
   m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",   
  
  
   ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",    
  
  
   webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",    
  
  
   poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"   
  
  
          },     
  
  
          {     
  
  
              title:"Incredibles Teaser",     
  
  
              artist:"Pixar",   
  
  
   m4v: http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v,  
  
  
   ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",           
  
  
   webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",   
  
  
    poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"   
  
  
          }     
  
  
      ], {     
  
  
          swfPath: "../js",     
  
  
          supplied: "webmv, ogv, m4v"   
  
  
      });       
  
  
  });

在線示例

主要就是這幾個(gè)例子，官網(wǎng)上本來還可以切換皮膚的，我就不做上去了。最后將所有例子打包供大家下載學(xué)習(xí)。

示例源碼下載

#p#

第二款：VideoJS介紹

簡單介紹一下VideoJS的特點(diǎn)。

開源，我們可以利用VideoJS的源碼將它應(yīng)用到自己的程序中，并且可以修改其源碼，但要遵循開源協(xié)議。

輕量級，沒有使用圖片。

完全可以用CSS定制播放器的外觀。

不依賴其他腳本庫。

使用非常簡單。

不僅使用簡單，擴(kuò)展也非常簡單。

在各個(gè)瀏覽器之間有統(tǒng)一的外觀。

支持全屏播放。

可以控制音量。

遇到不支持HTML5的瀏覽器可以轉(zhuǎn)換成FLASH來播放。

上面這段話是翻譯過來的，有什么錯(cuò)誤請大家指出，呵呵。如何，聽上去很強(qiáng)大吧，我也是這么覺得。由于國情原因，訪問國外的網(wǎng)站經(jīng)常要被重置，于是我就將VideoJS的源代碼下了回來放在青藤園網(wǎng)站上，方便大家欣賞和學(xué)習(xí)。

在線示例

源碼下載

#p#

第三款：ZEN Audio Player使用介紹

上面向大家介紹了兩個(gè)HTML5音頻和視頻播放器VideoJS和jPlayer。今天再來介紹一個(gè)音頻播放器ZEN Audio Player。說白了ZEN Audio Player是基于jPlayer的，如果你仔細(xì)看過jPlayer這篇文章的話，應(yīng)該還記得里面有一個(gè)個(gè)性化的環(huán)形音頻播放器示例，說白了，ZEN Audio Player就是基于jPlayer給這個(gè)環(huán)形播放器重新寫了一個(gè)皮膚，下圖是它在Chrome瀏覽器下的展示效果，在firefox下效果稍微差點(diǎn)，可能界面兼容性還有點(diǎn)問題。

我不知道為什么，當(dāng)我想從github上下載這個(gè)播放器的示例源碼時(shí)，要么打不開，要么就非常慢，可能是github自身的問題，也有可能是萬惡的GFW的問題，所以最終我是根據(jù)其示例頁面將頁面元素和用到的js、css一點(diǎn)點(diǎn)湊起來的，最終把這個(gè)demo和源碼發(fā)上來，方便大家下載和學(xué)習(xí)，身在中國，訪問國外的網(wǎng)站實(shí)在是太累太累了。

在線示例

源碼下載

ZEN Audio Player的官方網(wǎng)站是http://lab.simurai.com/ui/zen-player/

新聞標(biāo)題：三款HTML 5的視頻和音頻播放器
URL鏈接：http://fisionsoft.com.cn/article/ccshecj.html

新聞中心

其他資訊