TML5復(fù)制基本方案————Clipboard.js

官網(wǎng)地址：https://clipboardjs.com/

兼容性

安裝

使用npm安裝

npm install clipboard --save

或者，下載文件，https://github.com/zenorocha/clipboard.js/archive/master.zip

開(kāi)始

首先，引入dist目錄下的腳本文件，或者第三方CDN

<script src="dist/clipboard.min.js"></script>

使用

基本參數(shù)：
ClipboardJS.isSupported()：判斷是否支持該插件，返回"true"或"false"
data-clipboard-action：復(fù)制的類型，"copy"或"cut"
data-clipboard-target: 需要復(fù)制的文本（DOM選擇器）class或id
new ClipboardJS('') : 復(fù)制內(nèi)容的點(diǎn)擊按鈕（DOM選擇器）class或id
onclick="" : 兼容ios

方案一

<div class="footer" id="copyBtn" data-clipboard-action="copy" data-clipboard-target="#copyText" onclick="">

點(diǎn)擊復(fù)制

<span id="copyText">ddfdfdf</span>

</div>

var clipboard=new ClipboardJS('#copyBtn');

clipboard.on('success', function (e) {

console.log(e);

//復(fù)制成功函數(shù)

});

clipboard.on('error', function (e) {

console.log(e);

//復(fù)制失敗函數(shù)

});

// copyText設(shè)置定位，opacity

方案二

<div class="footer" id="copyBtn" >

立即報(bào)名

<span id="copyText">ddfdfdf</span>

</div>

var clipboard=new ClipboardJS('#copyBtn', {

// 通過(guò)target指定要復(fù)印的節(jié)點(diǎn)

target: function () {

return document.querySelector('#copyText');

}

});

clipboard.on('success', function (e) {

console.log(e);

//復(fù)制成功函數(shù)

});

clipboard.on('error', function (e) {

console.log(e);

//復(fù)制失敗函數(shù)

});

方案三

<div class="footer" id="copyBtn" ></div>
 
var clipboard=new ClipboardJS('#copyBtn', {
 // 點(diǎn)擊copy按鈕，直接通過(guò)text直接返回復(fù)印的內(nèi)容
 text: function () {
 return '需要復(fù)制的文字';
 },
 action: function () {
 return "copy"
 }
});
clipboard.on('success', function (e) {
 console.log(e);
 //復(fù)制成功函數(shù)
});
clipboard.on('error', function (e) {
 console.log(e);
 //復(fù)制失敗函數(shù)
}); 

方案四

<div class="footer" id="copyBtn" data-clipboard-text="復(fù)制文本">
 點(diǎn)擊復(fù)制 
</div>
var clipboard=new ClipboardJS('#copyBtn', {});
clipboard.on('success', function (e) {
 // console.log(e)
 alert("復(fù)制成功");
});

終極方案（推薦）

只需要在需要復(fù)制文本設(shè)置class為copyText

需要點(diǎn)擊復(fù)制的按鈕設(shè)置class為coptBtn

操作HTML少，可以批量設(shè)置

//需要引入jq
var copyText=document.getElementsByClassName("copyText")[0].innerHTML;
 //獲取需要復(fù)制的文本
$(".copyBtn").attr("data-clipboard-text", copyText);
var clipboard=new ClipboardJS(".copyBtn");
clipboard.on('success', function (e) {
 //復(fù)制成功函數(shù)
});
clipboard.on('error', function (e) {
 //復(fù)制失敗函數(shù)
});

原生復(fù)制

TML5，被傳為Flash 的殺手，是一種用于web 應(yīng)用程序開(kāi)發(fā)、具有變革意義的網(wǎng)絡(luò)技術(shù)。HTML 5提供了一些新的元素和屬性，其中有些是技術(shù)上類似<div>和<span>標(biāo)簽，但有一定含義，例如<nav>和<footer>。這種標(biāo)簽將有利于搜索引擎的索引整理、小屏幕設(shè)備和視障人士使用。同時(shí)為其他瀏覽要素提供了新的功能，通過(guò)一個(gè)標(biāo)準(zhǔn)接口，如<audio>和<video>標(biāo)記。

除了原先的DOM接口，HTML5增加了更多樣化的API：

實(shí)時(shí)二維繪圖

Canvas API：有關(guān)動(dòng)態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動(dòng)畫(huà)的API。

定時(shí)媒體播放

HTML5 音頻與視頻：HTML5里新增的元素，它們?yōu)殚_(kāi)發(fā)者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無(wú)需安裝任何插件。

離線存儲(chǔ)數(shù)據(jù)庫(kù)（離線網(wǎng)絡(luò)應(yīng)用程序）

編輯

拖放

跨文檔通信

通信／網(wǎng)絡(luò)

Communication APIs：構(gòu)建實(shí)時(shí)和跨源（cross-origin）通信的兩大基礎(chǔ)： 跨文檔通信（Cross Document Messaging）與 XMLHttpRequest Level 2。

瀏覽歷史管理

MIME和協(xié)議處理程序時(shí)表頭登記

微數(shù)據(jù)

以上技術(shù)說(shuō)明存在于WHATWG HTML說(shuō)明文檔中，但并沒(méi)有全部包含在W3C HTML5的說(shuō)明文檔里；W3C另對(duì)一些技術(shù)做了單獨(dú)說(shuō)明，此文不再一一贅述。

聽(tīng)起來(lái)略有些太過(guò)技術(shù)了，那么HTML5對(duì)設(shè)計(jì)將會(huì)有哪些影響呢？這是網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)人員不厭其煩討論了編程代碼后不得不考慮的問(wèn)題。

HTML5及web app 的優(yōu)勢(shì)

以移動(dòng)互聯(lián)網(wǎng)領(lǐng)域?yàn)槔鎸?duì)眾多的終端設(shè)備和平臺(tái)，設(shè)計(jì)師和開(kāi)發(fā)人員不得不在產(chǎn)品的展現(xiàn)和體驗(yàn)的一致性方面做出妥協(xié)舉措，并在疲于填鋪平臺(tái)的過(guò)程中浪費(fèi)了我們?nèi)绱硕嗟木Α．a(chǎn)品本來(lái)可以達(dá)到更高的水準(zhǔn)，但移動(dòng)終端碎片化（包括硬件和軟件）的現(xiàn)實(shí)將美好的愿望阻攔在外。

當(dāng)前主流的手機(jī)開(kāi)發(fā)平臺(tái)有：iOS、Symbian、Linux、Palm、BlackBerry、Windows Mobile、Android等。其中，iOS平臺(tái)需要針對(duì)480*320、960*640及1024*768的分辨率分別設(shè)計(jì)；Android平臺(tái)中QVGA分辨率為240*320，WQVGA分辨率為240*400，HVGA分辨率為320*480，WVGA分辨率為480*800，F(xiàn)WVGA分辨率為480*854等等；Symbian系統(tǒng)可謂歷史悠久，現(xiàn)在開(kāi)發(fā)主要針對(duì)S60 V3和V5兩個(gè)版本，分辨率仍有176*208、208*208、240*320/320*240、352*416/416*352及800*352等眾多種類。即使同一個(gè)平臺(tái)，分辨率不同設(shè)計(jì)也就會(huì)有相應(yīng)的差異。加之客戶端產(chǎn)品需要不斷的更新迭代，從1.0版本、2.0版本一直到N.0版本；每開(kāi)發(fā)一次native app 就需要鋪一次平臺(tái)。并且現(xiàn)實(shí)狀況是并非所有用戶都會(huì)積極更新新版本，所以設(shè)計(jì)師和開(kāi)發(fā)人員在研發(fā)新功能的時(shí)候還要顧忌之前的舊版本會(huì)不會(huì)支持等問(wèn)題。不同的平臺(tái)乘以不同的版本，人力物力被投入到了鋪設(shè)平臺(tái)的工作中，提高產(chǎn)品用戶體驗(yàn)的精力比較有限。

于是人們受夠了終端設(shè)備碎片化的折磨，開(kāi)始期盼著一種有別于native app的事物出現(xiàn)。由HTML5技術(shù)開(kāi)發(fā)的web app的出現(xiàn)給予了設(shè)計(jì)師和開(kāi)發(fā)人員美好愿景。HTML5技術(shù)的渲染過(guò)程主要是由瀏覽器、內(nèi)嵌HTML5解析器的應(yīng)用程序、支持書(shū)簽打開(kāi)方式的應(yīng)用程序抑或是移動(dòng)手機(jī)產(chǎn)品進(jìn)行的。如此，產(chǎn)品的上線和版本更新不再需要花費(fèi)那么長(zhǎng)時(shí)間來(lái)鋪平臺(tái)， Appcelerator的內(nèi)部邏輯會(huì)將產(chǎn)品的UI轉(zhuǎn)換為iOS或Android等平臺(tái)的原生界面。同時(shí)，web app形式的產(chǎn)品不需要用戶下載更新，通過(guò)網(wǎng)絡(luò)即可以訪問(wèn)最新版本；也便于設(shè)計(jì)師和開(kāi)發(fā)人員調(diào)試和修正錯(cuò)誤，不再存在同時(shí)兼顧新舊版本的問(wèn)題。

篇文章主要介紹了HTML5實(shí)現(xiàn)音頻和視頻嵌入的方法的相關(guān)資料，原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Γ【幱X(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

簡(jiǎn)介

HTML5未出來(lái)之前，在線的音頻和視頻都是借助Flash或者第三方工具實(shí)現(xiàn)的，現(xiàn)在HTML5也支持了這方面的功能。在一個(gè)支持HTML5的瀏覽器中，不需要安裝任何插件就能播放音頻和視頻。原生的支持音頻和視頻，為HTML5注入了巨大的發(fā)展?jié)摿Α?/p>

html實(shí)現(xiàn)音頻嵌入(傳統(tǒng)方式)：這種方式雖然可以實(shí)現(xiàn)，但是要瀏覽器支持Flash而且并不能實(shí)現(xiàn)控制，所以要實(shí)現(xiàn)起來(lái)很麻煩。

<object height="200" width="200" data="2_1.swf" >

</object>

<embed src="2_1.mp4" type="">

那么也就是說(shuō)HTML5存在一個(gè)很大的問(wèn)題就是兼容性。音頻

HTML5支持的音頻格式：

視頻

視頻格式：

由上可知，HTML5貌似支持的格式有點(diǎn)少哈，所以當(dāng)你發(fā)現(xiàn)用HTML5放置音頻和視頻不顯示時(shí)，應(yīng)該就是格式不支持的問(wèn)題。注： MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)， 只有h264才是公認(rèn)的MP4標(biāo)準(zhǔn)編碼(在這也是被坑了，其他格式的只有聲音沒(méi)有圖像。)遇到這種問(wèn)題，就用視頻格式轉(zhuǎn)換器，轉(zhuǎn)換一下格式就OK啦。

音頻實(shí)現(xiàn)起來(lái)很簡(jiǎn)單：這里工具條使用了瀏覽器默認(rèn)的工具條。

?

1

2

3

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的瀏覽器不支持video元素

</audio>

視頻雖然也可以使用瀏覽器默認(rèn)的，但無(wú)法實(shí)現(xiàn)私人訂制，所以從學(xué)技術(shù)的角度講，還是要學(xué)習(xí)一下自己做工具實(shí)現(xiàn)功能（audio也可參照此方法）。

audioVideo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>網(wǎng)頁(yè)放置視頻</title>

<style type="text/css">

</style>

<script type="text/javascript" src="js/ControlBar.js"></script>

</head>

<body>

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的瀏覽器不支持video元素

</audio>

<video id="myPlayer" width="600" height="400" src="htmls/2_1.mp4" controls="controls" loop="loop" poster="3.jpg">

你的瀏覽器不支持audio元素

<!-- MP4有3種編碼，mpg4(xdiv),,mpg4(xvid)，avc(h264)，

只有h264才是公認(rèn)的MP4標(biāo)準(zhǔn)編碼 -->

</video>

<div id="progress"></div>

<!-- 音量控制 -->

<input id="volume" type="range" min="0" max="1" step="0.1" onchange="Volume(this)">

<!-- 速率和時(shí)間進(jìn)度的信息 -->

<span id="rate">1</span>fps <span id="info"></span>

<button onclick="Play(this)" id="btn1">播放</button>

<button onclick="Fast()">快進(jìn)</button>

<button onclick="Slow()">慢進(jìn)</button>

<button onclick="Prev()">后退</button>

<button onclick="Next()">前進(jìn)</button>

<button onclick="Muted(this)">靜音</button>

</body>

</html>

顯示(html)與功能實(shí)現(xiàn)(js)分離，由外部導(dǎo)入

ControlBar.js

//使用腳本檢測(cè)瀏覽器的標(biāo)簽支持情況

var support=!!document.createElement("audio").canPlayType;

if (!support) {

alert("你的瀏覽器不支持本視頻播放");

}

// 定義全局的視頻對(duì)象

var e1=null;

window.addEventListener("load", function() {

e1=document.getElementById("myPlayer");

});

/*前進(jìn)：一分鐘 */

function Next() {

e1.currentTime+=10; //設(shè)置屬性currentTime,快進(jìn)10s

}

/*后退：一分鐘 */

function Prev() {

e1.currentTime-=10; //設(shè)置屬性currentTime,后退10s

}

/*播放/暫停*/

function Play(e) {

if(e1.paused){

e1.play();

document.getElementById("btn1").innerHTML="暫停"

}else{

e1.pause();

document.getElementById("btn1").innerHTML="播放"

}

}

/*慢進(jìn)：小于等于1時(shí)，每次都只減慢0.2的速率；大于1時(shí)，每次減1 */

function Slow(){

if(e1.playbackRate<=1){

e1.playbackRate-=0.2;

}else{

e1.playbackRate-=1;

}

document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);

}

/*慢進(jìn)：小于等于1時(shí)，每次都只減慢0.2的速率；大于1時(shí)，每次減1 */

function Fast(){

if(e1.playbackRate<1){

e1.playbackRate+=0.2;

}else{

e1.playbackRate+=1;

}

document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);

}

function fps2fps(fps){

if(fps<1){

return fps.toFixed(1);

}else{

return fps;

}

}

/*靜音*/

function Muted(e){

if(e1.muted){

e1.muted=false;

e.innerHRML="X";

document.getElementById("volume").value=e1.volume;

}else{

e1.muted=true;

e.innerHRML="x";

document.getElementById("volume").value=0;

}

}

/*調(diào)整音量*/

function Volume(e){

if(e1.muted==true){

e1.muted=false;

}

e1.volume=e.value;

}

/* 進(jìn)度信息：控制進(jìn)度條，并顯示進(jìn)度時(shí)間*/

function Progress(){

var p1=document.getElementById("progress");

p1.style.width=(e1.currentTime/e1.duration)*720+"px";

document.getElementById("info").innerHTML=s2time(e1.currentTime)+"/"+s2time(e1.duration);

}

function s2time(s){

var m=parseFloat(s/60).toFixed(0);

s=parseFloat(s%60).toFixed(0);

return (m<10? "0"+m:m)+":"+(s<10?"0"+s:s);

}

/* 網(wǎng)頁(yè)加載完畢后，把進(jìn)度處理函數(shù)添加至視頻對(duì)象的timeupdate事件中*/

window.addEventListener("load",function(){

e1.addEventListener("timeupdate",Progress);

});

/*給window.onload事件添加進(jìn)度處理函數(shù)*/

window.addEventListener("load",Progress);

實(shí)現(xiàn)的功能：播放，暫停，快進(jìn)，慢進(jìn)，前進(jìn)，后退，音量控制，進(jìn)度條和時(shí)間顯示。由此可見(jiàn)通過(guò)Audio或Video的屬性和方法可以實(shí)現(xiàn)更復(fù)雜的功能。