整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
閩南網(wǎng)]
快影作為快手專屬的視頻編輯軟件，可以為視頻添加簡(jiǎn)單的倒放、變速、轉(zhuǎn)場(chǎng)效果，操作又十分便捷的，非常適合視頻分享達(dá)人，而字幕作為必不可少的元素之一，自然是需要多加考量的。
字幕制作：
其實(shí)為視頻添加字幕的方法并不復(fù)雜，用戶在打開快影的軟件之后，首先需要選擇底端的“+”按鈕導(dǎo)入手機(jī)本地的視頻素材文件。
在進(jìn)入視頻編輯界面之后，我們接著點(diǎn)擊底部的“T”按鈕，這樣就能夠添加字幕進(jìn)行編輯了。
添加字幕的方式分為兩種：一種是語(yǔ)音識(shí)別自動(dòng)添加，另一種則需要手動(dòng)編輯，下面就來(lái)看看具體操作吧。
自動(dòng)添加：
可以將含有旁白聲音的素材導(dǎo)入快影，選擇字幕，可以看到有一個(gè)自動(dòng)識(shí)別的菜單。盡量使用普通話，辨識(shí)度較高。
可以看到上方提示我們正在識(shí)別語(yǔ)音，而且可以看到識(shí)別進(jìn)度。
識(shí)別完成之后，我們點(diǎn)擊右上角的完成按鈕。
手動(dòng)添加：
如果您對(duì)于語(yǔ)音識(shí)別效果不滿意的，可以手動(dòng)進(jìn)行編輯
滑動(dòng)視頻進(jìn)度條，輸入相應(yīng)的字幕之后，我們還可以隨意調(diào)整字幕的字體格式、大小、顏色狀態(tài)，讓字幕和視頻內(nèi)容更好的貼合在一起!不過(guò)目前字體尺寸只有小號(hào)中號(hào)大號(hào)三種。
最后找到保存完成的視頻，點(diǎn)擊播放，在視頻的下方可以看到我們添加的文字。這些文字可以是根據(jù)我們視頻中的語(yǔ)音轉(zhuǎn)換而成的文字，也可以是自己加工過(guò)的。
以上就是小編為大家?guī)?lái)的快影視頻添加字幕教程，有需要的小伙伴可以了解下。
節(jié)概覽：
這一章主要分享兩個(gè)東西，分別是進(jìn)度條和音軌。進(jìn)度條相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，于是先講。
這是上一次繪制好的音樂(lè)播放器，本節(jié)也在它的基礎(chǔ)上進(jìn)行完善。
對(duì)于進(jìn)度條，它可以實(shí)時(shí)地展示音樂(lè)的進(jìn)度，相信大家都不陌生。
1.繪制進(jìn)度條
我們?cè)诎粹o區(qū)的上面，也就是屏幕底部的區(qū)域繪制進(jìn)度條。
上代碼：
<body> <div id='music' class='music'> <div class='screen'> <i id='music-icon' class="iconfont icon-yinle"></i> <div class='progress'> <div class='time'></div> <div class='bar'></div> </div> </div> <div class='buttons'> <i id='prev' class="iconfont icon-icon"></i> <i id='play' class="iconfont icon-bofanganniu"></i> <i id='pause' class="iconfont icon-zanting" style="display:none"></i> <i id='next' class="iconfont icon-icon1"></i> </div> <span id='info' class='info'></span> </div> </body>
代碼中progress的部分就是我們需要添加的進(jìn)度條區(qū)域。
給它寬度、高度和背景色：
.music .screen .progress {
width:100%;
height:40px;
background:#ccc;
}
我們希望讓它緊挨著播放器屏幕的底部，只需要給它一個(gè)定位就行了。關(guān)于元素的定位，在之前的章節(jié)中我已經(jīng)詳細(xì)地講過(guò)，所以在這里就不再贅述了。
position: absolute; bottom:0;
下來(lái)了。
我們將該區(qū)域分為上下兩塊
.music .screen .progress .time {
border-bottom:1px solid #fff; /*演示用，為了看清楚上下元素塊的界限*/
height:20px; /*高度為父盒子的一半*/
line-height:20px; /*為了讓文字垂直居中*/
text-align: right; /*文字右對(duì)齊*/
}
加上一個(gè)測(cè)試的時(shí)間數(shù)據(jù)：
<div class='time'>1:30</div>
確認(rèn)沒(méi)問(wèn)題后，把背景色和邊框都去掉。同時(shí)調(diào)色和優(yōu)化一下：
.music .screen .progress {
width:100%;
height:40px;
position: absolute;
bottom:0;
}
.music .screen .progress .time {
color: #fff;
height:20px;
line-height:20px; /*為了讓時(shí)間垂直居中*/
text-align: right; /*文字右對(duì)齊*/
padding-right: 10px;
}
這樣就好看多了吧。
2.動(dòng)態(tài)獲取變化的時(shí)間
一步一步來(lái)，接下來(lái)我們先拿到正在播放的時(shí)間：
/**
* 當(dāng)音頻時(shí)間正常更新的時(shí)候
*/
musicBox.musicDom.ontimeupdate = function(){
var currentTime = Math.floor(this.currentTime); //獲取當(dāng)前時(shí)間
var m = parseInt(currentTime / 60);//分鐘
var s = parseInt(currentTime % 60);//秒鐘
var time = (m<10?("0"+m):m)+":"+(s<10?("0"+s):s); //格式化
console.log(time); //打印出來(lái)看看
}
ontimeupdate你可以理解為一個(gè)監(jiān)聽事件，每次時(shí)間更新的時(shí)候，就會(huì)自動(dòng)進(jìn)入里面的邏輯。
在圖中可以很清晰地看到，我們已經(jīng)能拿到正在播放的時(shí)間了。
接下來(lái)，我們將這個(gè)動(dòng)態(tài)變化的時(shí)間在屏幕上顯示出來(lái)。
document.getElementsByClassName('time')[0].innerHTML = time;
嗯，這樣就行了。
2.計(jì)算百分比
// 百分比 = 當(dāng)前時(shí)長(zhǎng) ÷ 總時(shí)長(zhǎng) × 100%
var total = this.duration;//總時(shí)長(zhǎng)
console.log(currentTime + '=======' + total);
document.getElementsByClassName('time')[0].innerHTML = Math.floor(currentTime / total * 100) + "%";
有了百分比，進(jìn)度條其實(shí)也就有了。我們現(xiàn)在將bar的樣式加上，寬度默認(rèn)0%
.music .screen .progress .bar {
height:20px;
background: #eee;
width:0%;
opacity: 0.6;
}
然后動(dòng)態(tài)改變寬度：
var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";
成功了，進(jìn)度條就這么產(chǎn)生了。其中最關(guān)鍵的一點(diǎn)就是audio標(biāo)簽元素自帶的ontimeupdate 事件，我們可以在里面獲取總時(shí)長(zhǎng)和當(dāng)前時(shí)長(zhǎng)，然后就可以計(jì)算出百分比，通過(guò)給div動(dòng)態(tài)設(shè)置寬度來(lái)實(shí)現(xiàn)進(jìn)度條的效果。
考慮到篇幅，我本章就不單獨(dú)封裝插件了，將進(jìn)度條集成到我們的musicBox里面，還需要用到回調(diào)函數(shù)等一系列的知識(shí)點(diǎn)。
1. 繪制音軌盒子
<div id='music' class='music'> <div id='trackBox' class="trackBox"></div> <div class='screen'> <i id='music-icon' class="iconfont icon-yinle"></i> <div class='progress'> <div class='time'></div> <div class='bar'></div> </div> </div> <div class='buttons'> <i id='prev' class="iconfont icon-icon"></i> <i id='play' class="iconfont icon-bofanganniu"></i> <i id='pause' class="iconfont icon-zanting" style="display:none"></i> <i id='next' class="iconfont icon-icon1"></i> </div> <span id='info' class='info'></span> </div>
為了方便定位，我們將 trackBox 畫在music盒子里面。
.trackBox {
position:absolute;
width:400px;
height:220px;
border: 1px solid #ccc;
z-index: 3;
background: #333;
left:210px;
top : -2px;
border-radius: 6px;
}
2. 畫第一條音軌
<div id='trackBox' class="trackBox">
<i class='items'></i>
</div>
.trackBox .items {
position: absolute;
width:10px;
height:100px;
background:#eee;
}
我們希望音軌靠著下方，并且它們之間能有一個(gè)區(qū)分，于是添加這兩個(gè)屬性：
bottom:0px; border: 1px solid #ccc;
OK，下來(lái)了。
2. 畫所有的音軌
一個(gè)音軌肯定不夠，我們需要根據(jù)音軌盒子的寬度和每一條音軌的寬度，來(lái)計(jì)算出一共需要多少條音軌：
/*獲取音軌盒子*/
var trackBox = utils.dom('#trackBox');
/*音軌盒子的寬度*/
var maxWidth = trackBox.clientWidth;
/*音軌的單個(gè)寬度*/
var singleWidth = 10;
/*計(jì)算音軌的最大數(shù)量*/
var len = Math.floor(maxWidth / singleWidth) ;
alert('音軌盒子最多盛放' + len + '條音軌');
//拼接音軌
var tracks = "";
for(var i = 0;i < len; i++){
/*計(jì)算位置*/
var left = 10 * i + 'px';
tracks += "<i class='items' style='left:"+left+"'></i>";
}
trackBox.innerHTML = tracks;
拼接后的效果：
2. 通過(guò)隨機(jī)數(shù)讓音軌動(dòng)起來(lái)
之前的章節(jié) js常用方法和一些封裝（2） -- 隨機(jī)數(shù)生成 中，正好有一個(gè)隨機(jī)數(shù)的方法，所謂養(yǎng)兵千日，用兵一時(shí)啊。
我們把那個(gè)隨機(jī)數(shù)的方法添加到工具包：
util.js
randomNum : function (num){
return Math.floor(Math.random()*(num+1));
}
測(cè)試：
//模擬音軌動(dòng)畫
setInterval(function(){
for(var i = 0;i < len; i++){
console.info(i);
document.getElementsByClassName('items')[i].style.height = utils.randomNum(110) + 'px';
}
},200);
效果：
原理就是用了一個(gè)js定時(shí)器，每隔200毫秒就改變所有音軌的高度，當(dāng)然，高度是一個(gè)隨機(jī)數(shù)值。
至于音軌和播放器的對(duì)接，雖然我已經(jīng)寫好，并且已經(jīng)集成到musicBox里面，但是里面牽扯到比較多的知識(shí)點(diǎn)，寫起來(lái)需要很多時(shí)間，所以暫且先放一放吧。
音樂(lè)播放器至此算是完成了一個(gè)1.0版本，以后看情況我會(huì)繼續(xù)將這個(gè)案例更新下去，甚至還可能對(duì)接后臺(tái)，連數(shù)據(jù)庫(kù)等等。
在工作的日子里，我曾經(jīng)迷茫過(guò)，尤其是剛開始做編程的工作時(shí)，非常迷茫。
每天都是增刪改查，增刪改查，就覺(jué)得很沒(méi)意思。
一段時(shí)間下來(lái)，我開始迷茫了，不知道自己該學(xué)一些什么東西。
感覺(jué)技術(shù)太多，什么都想學(xué)，卻又怕沒(méi)時(shí)間。
在這個(gè)信息爆炸、日新月異的時(shí)代，技術(shù)更新得非常快，很多人都在各種新技術(shù)的浪潮下變得不知所措。我就有這樣的體會(huì)，于是看各種書，各種視頻，生怕自己跟不上時(shí)代的節(jié)奏。
可是，我一直以來(lái)都忽略了一個(gè)重點(diǎn)，那就是——我是否真的對(duì)這個(gè)行業(yè)感興趣？
如果在幾年前，我會(huì)說(shuō)是的，正因?yàn)閷?duì)計(jì)算機(jī)的興趣，我才會(huì)放棄之前所學(xué)的專業(yè)，踏入 Java 、JavaScript 的坑中。
再后來(lái)，我發(fā)現(xiàn)一個(gè)道理，不論你現(xiàn)在的工作是什么，都請(qǐng)盡可能地去愛(ài)上他。不要為了生計(jì)而去做一份工作，如果實(shí)在辦不到的話，就給自己撒一個(gè)美麗的謊言吧。
不然的話，軟件開發(fā)到了后期你會(huì)很迷茫的。
給自己一個(gè)溫馨的微笑，學(xué)著熱愛(ài)這個(gè)行業(yè)，這個(gè)工作，就是對(duì)自己最大的獎(jiǎng)賞。
享受編程的樂(lè)趣，懷著感恩的心去體會(huì)每一天生活中的細(xì)節(jié)。
享一個(gè)很酷炫的視頻，通過(guò)滑動(dòng)桿控制儀表進(jìn)度顯示，同時(shí)伴有燈光效果，看起來(lái)非常震撼。html非常簡(jiǎn)單，只有幾個(gè)元素，使用了一個(gè)進(jìn)度條滑動(dòng)桿的控件。接下來(lái)我們重點(diǎn)來(lái)看一下CSS，從這里可以看到，頁(yè)面長(zhǎng)什么樣子。
好的，現(xiàn)在來(lái)說(shuō)一下滑動(dòng)桿的樣式，這是一個(gè)滑軌的樣式，其他屬性沒(méi)有什么特別的，我們主要看一下這幾個(gè)。
首先要自定義進(jìn)度條的樣式，box-shadow：因?yàn)檫@個(gè)控件瀏覽器默認(rèn)會(huì)有一套自己的樣式，只有把 shadow設(shè)為難才可以自定義模式，如果把這個(gè)樣式去掉，那整個(gè)滑桿其它的樣式全部都不起效了。
非常重要的是這兩句的設(shè)置，這兩句有什么用呢？當(dāng)移動(dòng)滑塊時(shí)，大家注意滑軌，在滑塊的左邊它就會(huì)變成藍(lán)色，滑塊的右邊還是黑色，無(wú)論移到什么地方都一樣，主要用來(lái)控制這一個(gè)的。
接下來(lái)分析一下這兩句，為什么背景這里用了兩個(gè)顏色？第一個(gè)是漸變色，第二個(gè)是黑色。最主要的是漸變色里面的這兩個(gè)顏色還是同一個(gè)，lwhite都是這一個(gè)變量，說(shuō)白了它壓根沒(méi)有漸變的效果。
·box-shadow：為什么不直接用這個(gè)顏色而要把它搞成漸變？box-shadow：首先用兩個(gè)顏色，是因?yàn)榛壦托枰獌蓚€(gè)顏色，滑塊的左邊是藍(lán)色，滑塊的右邊是黑色，這兩個(gè)顏色。之所以會(huì)對(duì)同一個(gè)顏色做漸變，是因?yàn)樾枰浜蟗oxsha一起來(lái)使用。
通常background-size是用來(lái)設(shè)置背景圖顯示的，對(duì)單一顏色是不起作用的。這里用線性漸變就相當(dāng)于取巧。white用了一個(gè)小技巧，因?yàn)檫@里漸變的就是同一個(gè)顏色，和單一顏色沒(méi)有區(qū)別，初始值設(shè)置為0100%，也就是這一個(gè)顏色。漸變的顏色開始是沒(méi)有顯示的，也就是現(xiàn)在這樣子。
如果我們把它改一下，改成50%。第一個(gè)顏色就會(huì)顯示到中間位置了，再改成90%，試一下。第一個(gè)顏色就會(huì)顯示到后面了。
→當(dāng)滑塊移動(dòng)的時(shí)候通過(guò)JS修改這一個(gè)值，是不是就可以動(dòng)態(tài)同步滑軌的顏色狀態(tài)了？這里先改回0，再看一下這個(gè)樣式。s inputltype='range：webkit-lips thumb。這是一個(gè)滑塊的樣式，沒(méi)有什么特別要說(shuō)的，用的屬性都很簡(jiǎn)單。
主要就來(lái)看一下這個(gè)偽元素，用這個(gè)偽元素就說(shuō)明要修改的是滑塊的樣式。僅此而已。
→還有就是滑塊的發(fā)光效果用的就是陰影，也就是這一個(gè)的樣式。以下是清除中間顯示百分比數(shù)字的樣式，沒(méi)有什么特別的，主要是中間發(fā)光的效果。后面兩個(gè)是中間儀表盤的樣式，但現(xiàn)在還沒(méi)有span，需要通過(guò)JavaScript創(chuàng)建出來(lái)。樣式很簡(jiǎn)單，沒(méi)有特別的，我們來(lái)看看JS。現(xiàn)在已經(jīng)獲取了幾個(gè)對(duì)象來(lái)做一個(gè)for循環(huán)，畫出100個(gè)指針。我們需要通過(guò)JavaScript來(lái)創(chuàng)建這些span，因?yàn)檫@些span需要在圖形的表盤上分布。這些span需要旋轉(zhuǎn)一定的角度，然后再放入main中。現(xiàn)在表盤應(yīng)該出來(lái)了，沒(méi)有問(wèn)題，但是似乎有些擁擠。我們需要修改CSS，將寬度設(shè)置為40個(gè)TB。將滑動(dòng)桿向下移動(dòng)25個(gè)TB。現(xiàn)在來(lái)看一下效果。現(xiàn)在來(lái)處理一下，當(dāng)移動(dòng)滑塊時(shí)，顏色和中間的百分比會(huì)隨之變化。實(shí)際上，這并不難，只需要監(jiān)聽滑桿的輸入事件。我們需要修改滑軌的背景大小，只需將其水平方向的where復(fù)給百分號(hào)即可，而垂直方向則保持100%的寬度。
中間顯示的百分比很簡(jiǎn)單，只需要將值給它就可以了。我們來(lái)看一下效果，移動(dòng)滑塊沒(méi)有問(wèn)題，滑軌的顏色和上面的百分比都跟著發(fā)生變化了。
接下來(lái)，我們需要寫一個(gè)函數(shù)，當(dāng)移動(dòng)滑塊時(shí)，改變儀表指針的顏色。我們需要循環(huán)所有的指針。當(dāng)i小于傳入的值時(shí)，我們需要設(shè)置前面一部分指針的顏色和屬性。
首先，我們需要設(shè)置自定義的顏色bg。我們使用了CSS的色相飽和度函數(shù)，后面兩個(gè)值代表飽和度和亮度，通常設(shè)置為100%和50%。這并不重要，我們需要設(shè)置色相。我們需要根據(jù)不同位置的指針設(shè)置不同的色相，這樣顏色看起來(lái)會(huì)更加豐富。另外，我們還需要設(shè)置sg的顏色屬性。
其他指針使用CSS中設(shè)置的黑色背景和透明sg。現(xiàn)在來(lái)看一下指針的顏色狀態(tài)是否發(fā)生了變化，移動(dòng)滑塊，沒(méi)有問(wèn)題，可以跟著發(fā)生變化了。
這個(gè)視頻到此結(jié)束，感謝大家的收看。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
