2. 程式人生 > >詳細教程使用jQuery jPlayer外掛給你的站點增加視訊和音訊功能

詳細教程使用jQuery jPlayer外掛給你的站點增加視訊和音訊功能

阿新 • • 發佈：2019-02-17

這篇文章將主要探計關於怎麼增加自定義視訊和語音播放功能在你的WEB網站裡面。這個是一個非常好的jQuery新外掛(jPlayer)， 包括很多功能 : 它允許你播放多媒體檔案, 暫停，音量調整，它擁有視訊和音訊播放功能會用到的所有功能控掉，同樣他允許你改變它的所有樣式(styles),因為他的全部外觀都是在一個css檔案 裡面。另外，它同樣支援HTML5 和支援所有主流的瀏覽器。它目前支援的格式有: mp3, ogg, m4a, m4v, ogv, wav等等。


簡短的介紹以後，我們開始詳細編碼過程:

1. HTML
首先開始HTML部件

  1. <linkrel
     
    ="stylesheet"href="css/jplayer.blue.monday.css"type="text/css"media="all"/>
  2. <linkrel="stylesheet"href="css/main.css"type="text/css"media="all"/>
  3. <scriptsrc="js/jquery.min.js"type="text/javascript"></script>
  4. <scriptsrc="js/jquery.jplayer.min.js"type="text/javascript"></script>
  5. <script
     
    src="js/main.js"type="text/javascript"></script>
  6. <divclass="example">
  7.     <div>
  8.         <divclass="players">
  9.             <h2>Audio player</h2>
  10.             <divclass="jp-audio">
  11.                 <divclass="jp-type-single">
  12.                     <divid="jquery_jplayer_1"
     
    class="jp-jplayer"></div>
  13.                     <divid="jp_interface_1"class="jp-interface">
  14.                         <ulclass="jp-controls">
  15.                             <li><ahref="#"class="jp-play"tabindex="1">play</a></li>
  16.                             <li><ahref="#"class="jp-pause"tabindex="1">pause</a></li>
  17.                             <li><ahref="#"class="jp-stop"tabindex="1">stop</a></li>
  18.                             <li><ahref="#"class="jp-mute"tabindex="1">mute</a></li>
  19.                             <li><ahref="#"class="jp-unmute"tabindex="1">unmute</a></li>
  20.                         </ul>
  21.                         <divclass="jp-progress">
  22.                             <divclass="jp-seek-bar">
  23.                                 <divclass="jp-play-bar"></div>
  24.                             </div>
  25.                         </div>
  26.                         <divclass="jp-volume-bar">
  27.                             <divclass="jp-volume-bar-value"></div>
  28.                         </div>
  29.                         <divclass="jp-current-time"></div>
  30.                         <divclass="jp-duration"></div>
  31.                     </div>
  32.                     <divid="jp_playlist_1"class="jp-playlist">
  33.                         <ul>
  34.                             <li>Audio track</li>
  35.                         </ul>
  36.                     </div>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.         <divclass="players">
  41.             <h2>Video player</h2>
  42.             <divclass="jp-video jp-video-270p">
  43.                 <divclass="jp-type-single">
  44.                     <divid="jquery_jplayer_2"
            
      
    
           
    
              
              
    
            
    
            
    相關推薦
    
			   
            
            
            
 

    

    
    
    
    詳細教程使用jQuery jPlayer外掛給你的站點增加視訊和音訊功能
    
     
     
                

這篇文章將主要探計關於怎麼增加自定義視訊和語音播放功能在你的WEB網站裡面。這個是一個非常好的jQuery新外掛(jPlayer)， 包括很多功能 : 它允許你播放多媒體檔案, 暫停，音量調整，它擁有視訊和音訊播放功能會用到的所有功能控掉，同樣他允許你改變它的所有樣式 
    

    
  
 

    

    
    
    
    Confluence 6 修改你站點的外觀和感覺
    
     
     Confluence你可以為你的 Confluence 整個站點修改表現以及外觀和感覺，也可以為單獨的空間進行修改。
對整個站點進行的修改將會對使用全局外觀和感覺（look and feel）的空間一並進行修改。如果某個用戶具有空間的管理員權限的話，這個用戶可以繼續對空間的外觀和布局進行進一步的修改和自定義。 
    

    
  
 

    

    
    
    
    不用外掛給wordpress自動新增關鍵字和描述
    
     
     
                
在wordpress後臺編輯header.php檔案，在<head>標籤裡面，一般放在<title>標籤的下面比較美觀，加入如下程式碼。

<pre name="code" class="html"><?php
$keywords  
    

    
  
 

    

    
    
    
    java：給你一個數組和兩個索引，交換下標為這兩個索引的數字
    
     
     brush   index   swap   pin   arrays   ()   一個   pub   oid   給你一個數組和兩個索引，交換下標為這兩個索引的數字
 

import java.util.Arrays;

public class Solution {
      publ 
    

    
  
 

    

    
    
    
    dojo的grid外掛以及對其增加的分頁功能
    
     
      
 
 dojo.provide("navigationGrid");
dojo.require("dojox.grid.DataGrid");
dojo.require('dijit.Toolbar');
dojo.require("dijit.form.Button");
dojo.require("d 
    

    
  
 

    

    
    
    
    #java    聊天室（二）——  給聊天室增加選單和私聊功能
    
     
     
                #java    聊天室（二）——  給聊天室增加選單和私聊功能





在上一篇部落格裡，我們實現了用java寫了一個telnet聊天伺服器，實現了群聊功能。今天我們就來給這個聊天室新增選單，並且實現私聊功能。 

1.實現目標 

 在使用者登入後顯示選單：



當用 
    

    
  
 

    

    
    
    
    Django中用Jquery實現不重新整理頁面進行身份驗證和計算器功能
    
     
     1.下載jquery 
http://www.jq22.com/jquery-info122 
下載解壓之後加入工程中的static資料夾中 
 
2.路由分發。 
 
 """Django_demo1 URL Configuration

The `urlpatterns` list routes URLs 
    

    
  
 

    

    
    
    
    用jQuery實現multiple select(列表框)左右新增和刪除功能
    
     
     
                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html& 
    

    
  
 

    

    
    
    
    手把手教你Pytest+Allure2.X定製報告詳細教程，給自己的專案量身打造一套測試報告-02（非常詳細，非常實用）
    
     
     簡介
俗話說“人靠衣服馬靠鞍”一個專案做的在好，沒有一分的漂亮的測試報告有時候也是很難在客戶那邊驗收的，今天巨集哥就帶你們解決這一難題。
前邊一篇文章是分享如何搭建pytest+Allure的環境，從而生成一份精美的、讓人耳目一新的測試報告，但是有的小夥伴或者童鞋們可能會問，我能不 
    

    
  
 

    

    
    
    
    Java自動化測試框架-05 - 來給你的測試報告化個妝整個形 - （上）（詳細教程）
    
     
     簡介
　　前邊通過巨集哥的講解和分享想必小夥伴們和童鞋們都已經見過testng框架生成的測試報告，是不是它的樣子和長相實在是不敢讓大傢伙恭維。那麼今天巨集哥就當一回美容師，由巨集哥來給它美美容；當一回外科醫生，做一名整形醫生。由巨集哥來主刀，給它整整形。讓她變得豐滿、美麗、可愛一些。
本來面貌
執行完測 
    

    
  
 

    

    
    
    
    Java自動化測試框架-06 - 來給你的測試報告化個妝整個形 - （下）（詳細教程）
    
     
     簡介
經過上一次的化妝和整形，有客戶提出需求能不能將那個普通會員的套餐再升級一下，再漂亮一點。所以這次咱們就來看看從哪裡下刀可以使它變得再漂亮一點點。
上一篇文章修改了一些基本的ReportNG資訊，連結：Java自動化測試框架-05 - 來給你的測試報告化個妝整個形 - （上），本文將繼續帶大家進行修改 
    

    
  
 

    

    
    
    
    手把手教你用npm發布一個包，詳細教程
    
     
     文件夾   模塊   .com   png   keyword   tor   速度慢   index   bsp   我們已經實現了路由的自動化構建，但是我們可以看到，一大串代碼懟在裏面。當然你也可以說，把它封裝在一個JS文件裏面，然後使用require(‘./autoRoute.js‘)給引入進來，那也行 
    

    
  
 

    

    
    
    
    手把手教你如何安裝Pycharm——靠譜的Pycharm安裝詳細教程
    
     
     專業版   編寫   ngs   創建   p s   bfd   自定義   手把手教你   安裝   
今天小編給大家分享如何在本機上下載和安裝Pycharm，具體的教程如下：
1、首先去Pycharm官網，或者直接輸入網址：http://www.jetbrains.com/pycharm/downloa 
    

    
  
 

    

    
    
    
    手把手超詳細教程教你Scrapy爬達蓋爾社區，有彩蛋哦！
    
     
     還需   創建   -c   item   編程   編寫代碼   想要   紅色   spider   





手把手超詳細教程教你Scrapy爬達蓋爾社區，有彩蛋哦！
 繁華落盡and曲終人散 2018-05-17 19:11





好了，廢話不多說，學習代碼就是要學以致用的。不能寫了一遍代碼就讓 
    

    
  
 

    

    
    
    
    最詳細爬蟲入門教程！花半小時你應該就能去爬一些小東西了！
    
     
     爬蟲入門   request   -a   load()   簡單   agent   urllib2   com   入門教程   
 

爬蟲對目標網頁爬取的過程可以參考下面黑色文字部分：

首先訪問初始url，獲取其相應內容對相應內容進行解析，提取感興趣的信息和新的鏈接將上一步提取到的數據存儲，將獲取到 
    

    
  
 

    

    
    
    
    漲薪必備｜給你一份超詳細Spring Boot知識清單
    
     
     
 在過去兩三年的 Spring 生態圈，最讓人興奮的莫過於 Spring Boot 框架。或許從命名上就能看出這個框架的設計初衷：快速的啟動 Spring 應用。因而 Spring Boot 應用本質上就是一個基於 Spring 框架的應用，它是 Spring 對“約定優先於配置”理念的最佳實踐產物，它能夠 
    

    
  
 

    

    
    
    
    手把手教你如何安裝Pycharm——靠譜的Pycharm安裝詳細教程(轉)
    
     
     
                

今天小編給大家分享如何在本機上下載和安裝Pycharm，具體的教程如下：





2、選擇Windows系統的專業版，將其下載到本地，如下圖所示：



3、雙擊下載的安裝包，進行安裝，然後會彈出介面：



4、選擇安裝目錄，Pycharm需要的記憶體較多，建議將其安 
    

    
  
 

    

    
    
    
    給你一份超詳細 Spring Boot 知識清單
    
     
     
                

在過去兩三年的Spring生態圈，最讓人興奮的莫過於Spring Boot框架。或許從命名上就能看出這個框架的設計初衷：快速的啟動Spring應用。因而Spring Boot應用本質上就是一個基於Spring框架的應用，它是Spring對“約定優先於配置”理念的最佳實踐產 
    

    
  
 

    

    
    
    
    Jrebel外掛的啟用與熱部署配置詳細教程（附最新可用Jrebel啟用碼地址）
    
     
     
                寫在前面的話

JRebel是一款JAVA虛擬機器外掛，它使得JAVA程式設計師能在不進行重部署的情況下，即時看到程式碼的改變對一個應用程式帶來的影響。

針對Eclipse，MyEclipse, STS等開發工具

1 Jreble的離線配置

1.1 Jreble配置項的 
    

    
  
 

    

    
    
    
    使用pagehelper分頁外掛詳細教程
    
     
     
                
pagehelper是一個簡單的實現分頁技巧的外掛我們要使用這個外掛無可避免的需要引用它的jar包，你可以從下面的地址中下載最新版本的 jar 包



當然你也可以在maven中新增依賴

	<dependency>
			<groupId>com