|
一、基礎知識 ## 1.用法 <video src="./video/mv.mp4">video> 登入後複製 注意：audio和video元素必須同時包含開始和結束標籤，不能使用 2.重要HTML屬性 ## controls：ontrol：如果出現該屬性，則向使用者顯示控件，例如播放按鈕。每個瀏覽器中的播放控制都不太一樣，但用途都一樣，都可以控制開始和結束，跳到新位置和調整音量 autoplay：autoplay：如果出現該屬性，則影片在就緒後馬上播放。如果不設定autoplay屬性，必須是使用者點擊播放按鈕才會播放音訊檔案。 loop：loop：(循環播放)告訴瀏覽器在音訊到達結尾時，再從頭開始重新播放 preload ：auto、 mete、none：告訴瀏覽器如何下載音訊auto：讓瀏覽器下載整個文件，以便使用者點擊播放按鈕時就能播放。當然，下載過程是後台進行的，網頁訪客不必等待下載完成，而且仍然可以隨意查看網頁。 meta：告訴瀏覽器先取得音訊檔案開頭的資料區塊，足以確定一些基本資訊(例如音訊的總時長) none：**告訴瀏覽器不必預先下載。恰當地利用這些數值，可以節省頻寬。 如果沒有設定preload屬性，瀏覽器就自己決定是否預先下載了。對這一點，不同瀏覽器的處理方式也不一樣。多數瀏覽器將auto作為預設值，但Firefox的預設值是metadata。不過，也請大家注意，這個preload屬性也不是必須嚴格執行的規則，而只是你對瀏覽器的建議。根據具體情況，瀏覽器可以忽略你的設定。 (有些舊版瀏覽器根據不會在乎preload屬性。) 3.常用事件 duration：返回目前音訊/視訊的長度(以秒計) paused ：設定或返回音訊/視訊是否暫停currentTime：設定或返回音訊/視訊中的目前播放位置(以秒計) ended ：傳回音訊/視訊的播放是否已結束 更多屬性、事件、方法請看w3school二、打造自己的播放器# 我們使用JavaScript控製播放控制項的行為(自訂播放控制項)，實作下列功能：###################利用HTML+CSS製作自己的播放控制條，然後定位到影片最下方##################影片載入loading效果###################播放、暫停############### ###########總時長和目前播放時間顯示###################播放進度條##############################播放進度條########### #######全螢幕顯示##################### 1.###播放控制項######
登入後複製 <link rel="stylesheet" href="./css/font-awesome.css"><link rel="stylesheet" href="./css/player.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;登入後複製 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");登入後複製 //当视频可播放的时候video.oncanplay = function(){ //显示视频
this.style.display = "block"; //显示视频总时长
totalTime.innerHTML = getFormatTime(this.duration);
};登入後複製 4.播放、暂停 点击播放按钮时显示暂停图标，在播放和暂停状态之间切换图标 //播放按钮控制isPlay.onclick = function(){ if(video.paused) {
video.play();
} else {
video.pause();
} this.classList.toggle("fa-pause");
};登入後複製 5.总时长和当前播放时长显示 前面代码中其实已经设置了相关代码，此时我们只需要把获取到的毫秒数转换成我们需要的时间格式即可，提供getFormatTime()函数： 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;
}登入後複製 6.播放进度条 //播放进度video.ontimeupdate = function(){ var currTime = this.currentTime, //当前播放时间
duration = this.duration; // 视频总时长
//百分比
var pre = currTime / duration * 100 + "%"; //显示进度条
loaded.style.width = pre;
//显示当前播放进度时间
currPlayTime.innerHTML = getFormatTime(currTime);
};登入後複製 这样就可以实时显示进度条了，此时，我们还需要点击进度条进行跳跃播放，即我们点击任意时间点视频跳转到当前时间点播放： //跳跃播放progress.onclick = function(e){ var event = e window.event;
video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};登入後複製 7.全屏显示 这个功能可以使用HTML5提供的全局API：webkitRequestFullScreen实现，跟video无关： //全屏expand.onclick = function(){
video.webkitRequestFullScreen();
};登入後複製 经测试在firefox、IE下全屏功能不可用，这样正常了，全屏API是针对webkit内核的。 |
以上是HTML5 VideoAPI，打造自己的Web影片播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
