您好,登錄后才能下訂單哦!
本文將使用HTML5提供的VideoAPI做一個(gè)自定義的視頻播放器,需要用到HTML5提供的video標(biāo)簽、以及HTML5提供的對JavascriptAPI的擴(kuò)展。
<video src="./video/mv.mp4"></video>
注意:audio和video元素必須同時(shí)包含開始和結(jié)束標(biāo)簽,不能使用
controls:ontrol:如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。每個(gè)瀏覽器中的播放控件都不太一樣,但用途都一樣,都可以控制開始和結(jié)束,跳到新位置和調(diào)節(jié)音量
autoplay:autoplay:如果出現(xiàn)該屬性,則視頻在就緒后馬上播放。如果不設(shè)置autoplay屬性,必須是用戶單擊播放按鈕才會播放音頻文件。
loop:loop:(循環(huán)播放)告訴瀏覽器在音頻到達(dá)末尾時(shí),再從頭開始重新播放
preload:auto、mete、none:告訴瀏覽器如何下載音頻
如果沒有設(shè)置preload屬性,瀏覽器就自己決定是否預(yù)先下載了。對這一點(diǎn),不同瀏覽器的處理方式也不一樣。多數(shù)瀏覽器將auto作為默認(rèn)值,但Firefox的默認(rèn)值是metadata。不過,也請大家注意,這個(gè)preload屬性也不是必須嚴(yán)格執(zhí)行的規(guī)則,而只是你對瀏覽器的建議。根據(jù)具體情況,瀏覽器可以忽略你的設(shè)置。(有些舊版本瀏覽器根據(jù)不會在意preload屬性。)
事件名稱 : 解釋
oncanplay:當(dāng)文件就緒可以開始播放時(shí)運(yùn)行的腳本(緩沖已足夠開始時(shí))。
ontimeupdate: 當(dāng)播放位置改變時(shí)(比如當(dāng)用戶快進(jìn)到媒介中一個(gè)不同的位置時(shí))運(yùn)行的腳本。
onended:當(dāng)媒介已到達(dá)結(jié)尾時(shí)運(yùn)行的腳本(可發(fā)送類似“感謝觀看”之類的消息)。
方法名稱 :解釋
play():開始播放音頻/視頻
pause():暫停當(dāng)前播放的音頻/視頻
屬性名稱 : 解釋
duration:返回當(dāng)前音頻/視頻的長度(以秒計(jì))
paused:設(shè)置或返回音頻/視頻是否暫停
currentTime:設(shè)置或返回音頻/視頻中的當(dāng)前播放位置(以秒計(jì))
ended:返回音頻/視頻的播放是否已結(jié)束
我們使用JavaScript控制播放控件的行為(自定義播放控件),實(shí)現(xiàn)如下功能:
<figure>
<figcaption>視頻播放器</figcaption>
<div class="player">
<video src="./video/mv.mp4"></video>
<div class="controls">
<!-- 播放/暫停 -->
<a href="javascript:;" class="switch fa fa-play"></a>
<!-- 全屏 -->
<a href="javascript:;" class="expand fa fa-expand"></a>
<!-- 進(jìn)度條 -->
<div class="progress">
<div class="loaded"></div>
<div class="line"></div>
<div class="bar"></div>
</div>
<!-- 時(shí)間 -->
<div class="timer">
<span class="current">00:00:00</span> /
<span class="total">00:00:00</span>
</div>
<!-- 聲音 -->
</div>
</div>
</figure>
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 784783012 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法
(從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程,學(xué)習(xí)工具,職業(yè)規(guī)劃)
上面是全部HTML代碼,.controls類就是播放控件HTML,引用CSS代碼:
<link rel="stylesheet" href="./css/font-awesome.css">
<link rel="stylesheet" href="./css/player.css">
為了顯示播放按鈕等圖標(biāo)我使用了字體圖標(biāo)
一開始先隱藏視頻,用一個(gè)背景圖片替代,等到視頻加載完成可以播放時(shí)在顯示視頻
CSS:
.player {
width: 720px;
height: 360px;
margin: 0 auto;
background: #000 url(../images/loading.gif) center/300px no-repeat;
position: relative;
}
video {
display: none;
height: 100%;
margin: 0 auto;
}
3.播放功能
讓我們開始寫javascript代碼吧,首先我們先獲取要用到的DOM元素:
var video = document.querySelector("video");
var isPlay = document.querySelector(".switch");
var expand = document.querySelector(".expand");
var progress = document.querySelector(".progress");
var loaded = document.querySelector(".progress > .loaded");
var currPlayTime = document.querySelector(".timer > .current");
var totalTime = document.querySelector(".timer > .total");
當(dāng)視頻可以播放時(shí),顯示視頻
//當(dāng)視頻可播放的時(shí)候
video.oncanplay = function(){
//顯示視頻
this.style.display = "block";
//顯示視頻總時(shí)長
totalTime.innerHTML = getFormatTime(this.duration);
};
4.播放、暫停
點(diǎn)擊播放按鈕時(shí)顯示暫停圖標(biāo),在播放和暫停狀態(tài)之間切換圖標(biāo)
//播放按鈕控制
isPlay.onclick = function(){
if(video.paused) {
video.play();
} else {
video.pause();
}
this.classList.toggle("fa-pause");
};
5.總時(shí)長和當(dāng)前播放時(shí)長顯示
前面代碼中其實(shí)已經(jīng)設(shè)置了相關(guān)代碼,此時(shí)我們只需要把獲取到的毫秒數(shù)轉(zhuǎn)換成我們需要的時(shí)間格式即可,提供getFormatTime()函數(shù):
function getFormatTime(time) {
var time = time 0;
var h = parseInt(time/3600),
m = parseInt(time%3600/60),
s = parseInt(time%60);
h = h < 10 ? "0"+h : h;
m = m < 10 ? "0"+m : m;
s = s < 10 ? "0"+s : s;
return h+":"+m+":"+s;
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n: 784783012 ,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法
(從零基礎(chǔ)開始到前端項(xiàng)目實(shí)戰(zhàn)教程,學(xué)習(xí)工具,職業(yè)規(guī)劃)
6.播放進(jìn)度條
//播放進(jìn)度
video.ontimeupdate = function(){
var currTime = this.currentTime, //當(dāng)前播放時(shí)間
duration = this.duration; // 視頻總時(shí)長
//百分比
var pre = currTime / duration * 100 + "%";
//顯示進(jìn)度條
loaded.style.width = pre;
//顯示當(dāng)前播放進(jìn)度時(shí)間
currPlayTime.innerHTML = getFormatTime(currTime);
};
這樣就可以實(shí)時(shí)顯示進(jìn)度條了,此時(shí),我們還需要點(diǎn)擊進(jìn)度條進(jìn)行跳躍播放,即我們點(diǎn)擊任意時(shí)間點(diǎn)視頻跳轉(zhuǎn)到當(dāng)前時(shí)間點(diǎn)播放:
//跳躍播放
progress.onclick = function(e){
var event = e window.event;
video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};
7.全屏顯示
這個(gè)功能可以使用HTML5提供的全局API:webkitRequestFullScreen實(shí)現(xiàn),跟video無關(guān):
//全屏
expand.onclick = function(){
video.webkitRequestFullScreen();
};
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。