快影怎么在視頻里添加字幕制作方法自動/手動添加使用說明

閩南網]

快影作為快手專屬的視頻編輯軟件，可以為視頻添加簡單的倒放、變速、轉場效果，操作又十分便捷的，非常適合視頻分享達人，而字幕作為必不可少的元素之一，自然是需要多加考量的。

字幕制作：

其實為視頻添加字幕的方法并不復雜，用戶在打開快影的軟件之后，首先需要選擇底端的“+”按鈕導入手機本地的視頻素材文件。

在進入視頻編輯界面之后，我們接著點擊底部的“T”按鈕，這樣就能夠添加字幕進行編輯了。

添加字幕的方式分為兩種：一種是語音識別自動添加，另一種則需要手動編輯，下面就來看看具體操作吧。

自動添加：

可以將含有旁白聲音的素材導入快影，選擇字幕，可以看到有一個自動識別的菜單。盡量使用普通話，辨識度較高。

可以看到上方提示我們正在識別語音，而且可以看到識別進度。

識別完成之后，我們點擊右上角的完成按鈕。

手動添加：

如果您對于語音識別效果不滿意的，可以手動進行編輯

滑動視頻進度條，輸入相應的字幕之后，我們還可以隨意調整字幕的字體格式、大小、顏色狀態，讓字幕和視頻內容更好的貼合在一起!不過目前字體尺寸只有小號中號大號三種。

最后找到保存完成的視頻，點擊播放，在視頻的下方可以看到我們添加的文字。這些文字可以是根據我們視頻中的語音轉換而成的文字，也可以是自己加工過的。

以上就是小編為大家帶來的快影視頻添加字幕教程，有需要的小伙伴可以了解下。

節概覽：

進度條
音軌原理

這一章主要分享兩個東西，分別是進度條和音軌。進度條相對來說比較簡單，于是先講。

這是上一次繪制好的音樂播放器，本節也在它的基礎上進行完善。

進度條

對于進度條，它可以實時地展示音樂的進度，相信大家都不陌生。

1.繪制進度條

我們在按鈕區的上面，也就是屏幕底部的區域繪制進度條。

上代碼：

<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的部分就是我們需要添加的進度條區域。

給它寬度、高度和背景色：

.music .screen .progress {
 width:100%;
 height:40px;
 background:#ccc;
}

我們希望讓它緊挨著播放器屏幕的底部，只需要給它一個定位就行了。關于元素的定位，在之前的章節中我已經詳細地講過，所以在這里就不再贅述了。

position: absolute;
bottom:0;

下來了。

我們將該區域分為上下兩塊

.music .screen .progress .time {
 border-bottom:1px solid #fff; /*演示用，為了看清楚上下元素塊的界限*/
 height:20px; /*高度為父盒子的一半*/
 line-height:20px; /*為了讓文字垂直居中*/
 text-align: right; /*文字右對齊*/
}

加上一個測試的時間數據：

<div class='time'>1:30</div>

確認沒問題后，把背景色和邊框都去掉。同時調色和優化一下：

.music .screen .progress {
 width:100%;
 height:40px;
 position: absolute;
 bottom:0;
}
.music .screen .progress .time {
 color: #fff;
 height:20px;
 line-height:20px; /*為了讓時間垂直居中*/
 text-align: right; /*文字右對齊*/
 padding-right: 10px;
}

這樣就好看多了吧。

2.動態獲取變化的時間

一步一步來，接下來我們先拿到正在播放的時間：

/**
 * 當音頻時間正常更新的時候
 */
musicBox.musicDom.ontimeupdate = function(){
 var currentTime = Math.floor(this.currentTime); //獲取當前時間
 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); //打印出來看看
}

ontimeupdate你可以理解為一個監聽事件，每次時間更新的時候，就會自動進入里面的邏輯。

在圖中可以很清晰地看到，我們已經能拿到正在播放的時間了。

接下來，我們將這個動態變化的時間在屏幕上顯示出來。

document.getElementsByClassName('time')[0].innerHTML = time;

嗯，這樣就行了。

2.計算百分比

// 百分比 = 當前時長 ÷ 總時長 × 100%
var total = this.duration;//總時長
console.log(currentTime + '=======' + total);
document.getElementsByClassName('time')[0].innerHTML = Math.floor(currentTime / total * 100) + "%";

有了百分比，進度條其實也就有了。我們現在將bar的樣式加上，寬度默認0%

.music .screen .progress .bar {
 height:20px;
 background: #eee;
 width:0%; 
 opacity: 0.6;
}

然后動態改變寬度：

var total = this.duration;
document.getElementsByClassName('bar')[0].style.width = Math.floor(currentTime / total * 100) + "%";

成功了，進度條就這么產生了。其中最關鍵的一點就是audio標簽元素自帶的ontimeupdate 事件，我們可以在里面獲取總時長和當前時長，然后就可以計算出百分比，通過給div動態設置寬度來實現進度條的效果。

考慮到篇幅，我本章就不單獨封裝插件了，將進度條集成到我們的musicBox里面，還需要用到回調函數等一系列的知識點。

音軌

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;
}

我們希望音軌靠著下方，并且它們之間能有一個區分，于是添加這兩個屬性：

bottom:0px;
border: 1px solid #ccc;

OK，下來了。

2. 畫所有的音軌

一個音軌肯定不夠，我們需要根據音軌盒子的寬度和每一條音軌的寬度，來計算出一共需要多少條音軌：

/*獲取音軌盒子*/
var trackBox = utils.dom('#trackBox');
/*音軌盒子的寬度*/
var maxWidth = trackBox.clientWidth;
/*音軌的單個寬度*/
var singleWidth = 10;
/*計算音軌的最大數量*/
var len = Math.floor(maxWidth / singleWidth) ;
alert('音軌盒子最多盛放' + len + '條音軌');

//拼接音軌
var tracks = "";
for(var i = 0;i < len; i++){
 /*計算位置*/
 var left = 10 * i + 'px';
 tracks += "<i class='items' style='left:"+left+"'></i>";
}
trackBox.innerHTML = tracks;

拼接后的效果：

2. 通過隨機數讓音軌動起來

之前的章節 js常用方法和一些封裝（2） -- 隨機數生成中，正好有一個隨機數的方法，所謂養兵千日，用兵一時啊。

我們把那個隨機數的方法添加到工具包：

util.js

randomNum : function (num){
 return Math.floor(Math.random()*(num+1));
}

測試：

//模擬音軌動畫
setInterval(function(){
 for(var i = 0;i < len; i++){
 console.info(i);
 document.getElementsByClassName('items')[i].style.height = utils.randomNum(110) + 'px';
 }
},200);

效果：

原理就是用了一個js定時器，每隔200毫秒就改變所有音軌的高度，當然，高度是一個隨機數值。

至于音軌和播放器的對接，雖然我已經寫好，并且已經集成到musicBox里面，但是里面牽扯到比較多的知識點，寫起來需要很多時間，所以暫且先放一放吧。

感悟

音樂播放器至此算是完成了一個1.0版本，以后看情況我會繼續將這個案例更新下去，甚至還可能對接后臺，連數據庫等等。

在工作的日子里，我曾經迷茫過，尤其是剛開始做編程的工作時，非常迷茫。

每天都是增刪改查，增刪改查，就覺得很沒意思。

一段時間下來，我開始迷茫了，不知道自己該學一些什么東西。

感覺技術太多，什么都想學，卻又怕沒時間。

在這個信息爆炸、日新月異的時代，技術更新得非常快，很多人都在各種新技術的浪潮下變得不知所措。我就有這樣的體會，于是看各種書，各種視頻，生怕自己跟不上時代的節奏。

可是，我一直以來都忽略了一個重點，那就是——我是否真的對這個行業感興趣？

如果在幾年前，我會說是的，正因為對計算機的興趣，我才會放棄之前所學的專業，踏入 Java 、JavaScript 的坑中。

再后來，我發現一個道理，不論你現在的工作是什么，都請盡可能地去愛上他。不要為了生計而去做一份工作，如果實在辦不到的話，就給自己撒一個美麗的謊言吧。

不然的話，軟件開發到了后期你會很迷茫的。

給自己一個溫馨的微笑，學著熱愛這個行業，這個工作，就是對自己最大的獎賞。

享受編程的樂趣，懷著感恩的心去體會每一天生活中的細節。

享一個很酷炫的視頻，通過滑動桿控制儀表進度顯示，同時伴有燈光效果，看起來非常震撼。html非常簡單，只有幾個元素，使用了一個進度條滑動桿的控件。接下來我們重點來看一下CSS，從這里可以看到，頁面長什么樣子。

好的，現在來說一下滑動桿的樣式，這是一個滑軌的樣式，其他屬性沒有什么特別的，我們主要看一下這幾個。

首先要自定義進度條的樣式，box-shadow：因為這個控件瀏覽器默認會有一套自己的樣式，只有把 shadow設為難才可以自定義模式，如果把這個樣式去掉，那整個滑桿其它的樣式全部都不起效了。

非常重要的是這兩句的設置，這兩句有什么用呢？當移動滑塊時，大家注意滑軌，在滑塊的左邊它就會變成藍色，滑塊的右邊還是黑色，無論移到什么地方都一樣，主要用來控制這一個的。

接下來分析一下這兩句，為什么背景這里用了兩個顏色？第一個是漸變色，第二個是黑色。最主要的是漸變色里面的這兩個顏色還是同一個，lwhite都是這一個變量，說白了它壓根沒有漸變的效果。

·box-shadow：為什么不直接用這個顏色而要把它搞成漸變？box-shadow：首先用兩個顏色，是因為滑軌它就需要兩個顏色，滑塊的左邊是藍色，滑塊的右邊是黑色，這兩個顏色。之所以會對同一個顏色做漸變，是因為需要配合boxsha一起來使用。

通常background-size是用來設置背景圖顯示的，對單一顏色是不起作用的。這里用線性漸變就相當于取巧。white用了一個小技巧，因為這里漸變的就是同一個顏色，和單一顏色沒有區別，初始值設置為0100%，也就是這一個顏色。漸變的顏色開始是沒有顯示的，也就是現在這樣子。

如果我們把它改一下，改成50%。第一個顏色就會顯示到中間位置了，再改成90%，試一下。第一個顏色就會顯示到后面了。

→當滑塊移動的時候通過JS修改這一個值，是不是就可以動態同步滑軌的顏色狀態了？這里先改回0，再看一下這個樣式。s inputltype='range：webkit-lips thumb。這是一個滑塊的樣式，沒有什么特別要說的，用的屬性都很簡單。

主要就來看一下這個偽元素，用這個偽元素就說明要修改的是滑塊的樣式。僅此而已。

→還有就是滑塊的發光效果用的就是陰影，也就是這一個的樣式。以下是清除中間顯示百分比數字的樣式，沒有什么特別的，主要是中間發光的效果。后面兩個是中間儀表盤的樣式，但現在還沒有span，需要通過JavaScript創建出來。樣式很簡單，沒有特別的，我們來看看JS。現在已經獲取了幾個對象來做一個for循環，畫出100個指針。我們需要通過JavaScript來創建這些span，因為這些span需要在圖形的表盤上分布。這些span需要旋轉一定的角度，然后再放入main中。現在表盤應該出來了，沒有問題，但是似乎有些擁擠。我們需要修改CSS，將寬度設置為40個TB。將滑動桿向下移動25個TB。現在來看一下效果。現在來處理一下，當移動滑塊時，顏色和中間的百分比會隨之變化。實際上，這并不難，只需要監聽滑桿的輸入事件。我們需要修改滑軌的背景大小，只需將其水平方向的where復給百分號即可，而垂直方向則保持100%的寬度。

中間顯示的百分比很簡單，只需要將值給它就可以了。我們來看一下效果，移動滑塊沒有問題，滑軌的顏色和上面的百分比都跟著發生變化了。

接下來，我們需要寫一個函數，當移動滑塊時，改變儀表指針的顏色。我們需要循環所有的指針。當i小于傳入的值時，我們需要設置前面一部分指針的顏色和屬性。

首先，我們需要設置自定義的顏色bg。我們使用了CSS的色相飽和度函數，后面兩個值代表飽和度和亮度，通常設置為100%和50%。這并不重要，我們需要設置色相。我們需要根據不同位置的指針設置不同的色相，這樣顏色看起來會更加豐富。另外，我們還需要設置sg的顏色屬性。

其他指針使用CSS中設置的黑色背景和透明sg。現在來看一下指針的顏色狀態是否發生了變化，移動滑塊，沒有問題，可以跟著發生變化了。

這個視頻到此結束，感謝大家的收看。

在線咨詢

上一篇：深入淺出瀏覽器渲染原理
下一篇：KLineChart 可高度自定義的輕量級k線圖支持移動端

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

快影怎么在視頻里添加字幕制作方法 自動/手動添加使用說明

進度條

音軌

感悟

您的項目需求

快影怎么在視頻里添加字幕制作方法自動/手動添加使用說明