HTML 5 多媒體
在HTML4.01時候想插入音頻,視頻,必須借助flash,
1. 視頻音頻了解
1.1. 主流的視頻文件格式
- MPEG-4: 通常以.mp4為擴展名
- Flash視頻: 通常以.flv為擴展名
- Ogg: 通常以.ogv為擴展名
- WebM: 通常以.webm為擴展名
- 音頻視頻交錯: 通常以.avi為擴展名
1.2 音頻格式：
- Ogg .ogg
- MP3 .mp3
- ACC .acc
1.3 編碼器
音頻和視頻編碼/解碼是一種算法, 用來對于一段特定的視頻或音頻進行解碼和編碼,以便音頻和視頻能夠播放,原始的媒體文件體積非常巨大,如果不對其進行編碼,那么數據量是非常驚人的,在互聯(lián)網上傳播則要耗費的時間是無法忍受的, 如果不對其進行解碼,就無法將編碼后的數據重組為原始的媒體資源
1. 視頻編解碼器
- H.264
- VP8 (google開源)
- Ogg Theora
2. 音頻編解碼器
- AAC
- MPEG-3
- Ogg Vorbis
H.264: 別名MPEG-4, 由MPEG研發(fā)并于2003年標準化,
當然也有一些編解碼器是受專利了保護的, 有一些這是免費的, 例如Ogg的Vorbis音頻編解碼器,Ogg的Theora視頻編碼器也是可以免費試用的, 而想使用H.264的話就需要支付相關費用了
2. 視頻音頻基本使用
2.1 基本使用標簽
HTML <video> 元素 用于在HTML或者XHTML文檔中嵌入媒體播放器，用于支持文檔內的視頻播放闪唆。
HTML <audio> 元素用于在文檔中嵌入音頻內容蝶防。
// 視頻
<video src="視頻地址" controls></video>
// 音頻
<audio src="視頻地址" controls></video>
<!-- 視頻有默認的寬高300*150茁裙，沒有控件controls視頻還無法播放，只能看到畫面 -->
<video src="./video/這一路.mp4" controls></video>
<!-- 音頻加上控件controls才能播放 -->
<audio src="./video/zyl大歡.mp3" controls></audio>
2.2. 兼容處理
標簽的兼容
<video src="./video/這一路.mp4" controls>當前瀏覽器不支持video冷守，請更新瀏覽器或使用chrome打開</video>
由于瀏覽器視頻格式的編輯碼器不一樣,導致有兼容問題,這個時候W3C為了解決這個問題,
兼容處理使用source標簽
視頻格式的兼容
<video>
<!-- 羅列視頻格式-->
<source src="./dy.mp4" type="video/mp4">
<source src="./dy.ogg" type="video/ogg">
你的瀏覽器不支持video標簽,<a href="./dy.map4">點擊下載視頻</a>
</video>
<!-- 視頻格式的兼容 -->
<video width="600" height="300" controls>
<source src="./video/這一路.ogv" type="video/ogg">
<source src="./video/這一路.mp4" type="video/mp4">
</video>
音頻兼容
<audio>
<source src="./dy.mp3" type="audio/mp4">
<source src="./dy.ogg" type="audio/ogg">
你的瀏覽器不支持audio標簽,<a href="./dy.map3">點擊下載音頻</a>
</audio>
3. Video 視頻標簽
3.1 Video 標簽屬性
- src 視頻url地址
- . width 設置播放器寬度
- . height 設置播放器高度
- .controls 向用戶顯示播放控件惫周。controls是布爾值，有值就是true炬转，即使controls="false",字符串"false"轉成布爾值也是true。沒有controls這個屬性才是false
- autoplay 視頻就緒自動播放算灸。
- muted 視頻靜音
- loop 播放完是否繼續(xù)播放該視頻扼劈，循環(huán)播放
- poster 加載等待的畫面圖片
- preload 是否需要預加載
- autobuffer 設置為瀏覽器緩沖方式，不設置autoplay才有效
<video
width="1000"
height="300"
src="./dy.mp4"
controls
Preload
Poster='../1.jpg'
> 你的瀏覽器不支持 H5 Video 標簽,請升級瀏覽器</video>
<!-- 只有無聲靜音的情況下菲驴，autoplay才可以起作用荐吵，之前有聲音也自動播放，會被嚇一跳 -->
<video width="600" height="300" src="./video/這一路.mp4" controls autoplay muted loop></video>
<!-- poster加載等待的畫面圖片赊瞬，相當于視頻的封面先煎，也可以用gif動態(tài)圖。preload視頻沒播放就已經加載-->
<video width="600" height="300" src="./video/這一路.mp4" controls poster="./images/222.jpg" preload></video>
3.2. Video API方法(JS操控DOM元素的方法)
play() 開始播放視頻
pause() 停止播放視頻
load() 重新加載媒體(比如用sourch換資源了)
-
全屏:
webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen(); //官方的 退出全屏：
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();
<body>
<!-- 用js操控屬性巧涧，js操控要有一個id或者獲取元素-->
<video id="video" width="600" height="300" src="./video/這一路.mp4" controls></video>
<div> <button id="play">播放</button>
<button id="pause">暫停</button>
<button id="reload">重新加載</button>
<button id="all">全屏</button>
<button id="close">退出全屏</button>
</div>
<script>
play.onclick = function () {
video.play() //沒有使用video的原生控件薯蝎，自己寫的按鈕調用Video的API方法 播放
}
pause.onclick = function () {
video.pause() //沒有使用video的原生控件，自己寫的按鈕調用Video的API方法 暫停
}
reload.onclick = function () {
video.src = "./video/第三套古詩韻律操.mp4"
video.load() //沒有使用video的原生控件谤绳，自己寫的按鈕調用Video的API方法 重新加載
}
all.onclick = function () {
video.requestFullscreen() //全屏
}
close.onclick = function () {
video.exitFullscreen() //退出全屏
}
</script>
</body>
3.3. Video API屬性（JS操控DOM元素的屬性）
- currentTime : 開始到播放現(xiàn)在所用的時間(單位是秒) 可讀可寫
- duration : 媒體總時間(只讀)
- volume : 0.0-1.0的音量相對值 可讀可寫
- muted : 是否靜音 false /true
- paused : 媒體是否暫停(只讀)
- ended : 媒體是否播放完畢(只讀)
- error : 媒體發(fā)生錯誤的時候占锯，返回錯誤代碼 (只讀)
- currentSrc : 以字符串的形式返回媒體地址(只讀)
- poster: 視頻播放前的預覽圖片(可讀寫)
- videoWidth, videoHeight: 視頻實際的尺寸(只讀)
btn.onclick = function () {
box.innerHTML = `
當前播放時間:${video.currentTime}<br/>
總時間:${video.duration}<br/>
音量:${video.volume}<br/>
是否靜音:${video.muted}<br/>
是否暫停:${video.paused}<br/>
是否播放完畢:${video.ended}<br/>
是否發(fā)生錯誤:${video.error}<br/>
地址:${video.currentSrc}`;
}
<body>
<!-- 用js操控屬性，js操控要有一個id或者獲取元素-->
<video id="video" width="600" height="300" src="./video/這一路.mp4" controls poster="./video/hs.jpg"></video>
<div> <button id="play">播放</button>
</div>
<div id="info"></div>
<script>
// 默認控制器可能存在兼容問題缩筛，多瀏覽器可能不兼容消略、每個瀏覽器控件的長相也不一樣，不統(tǒng)一瞎抛，所以有時要自定義控制器艺演，不使用默認的控件。
play.onclick = function () {
video.currentTime = 60 //video.currentTime屬性的值是可讀可寫的
video.volume = .2 //video.volume屬性的值是可讀可寫的
info.innerHTML = `視頻播放時間：${video.currentTime}<br/>
視頻總時長：${video.duration}<br/>
視頻聲音：${video.volume}<br/>
是否靜音:${video.muted}<br/>
是否暫停:${video.paused}<br/>
是否播放完畢:${video.ended}<br/>
是否發(fā)生錯誤:${video.error}<br/>
地址:${video.currentSrc}<br/>
預覽圖:${video.poster}<br/>
視頻寬:${video.videoWidth}<br/>
視頻高:${video.videoHeight}`
}
</script>
</body>
3.4 . video視頻基本事件
- onplay 視頻播放時觸發(fā)的事件
- onpause 視頻暫停時觸發(fā)的事件
- ontimeupdate 視頻在播放時持續(xù)觸發(fā)是事件
- onended 視頻播放結束時觸發(fā)的事件
<body>
<!-- 用js操控屬性，js操控要有一個id或者獲取元素-->
<video id="video" width="600" height="300" src="./video/這一路.mp4" controls></video>
<script>
video.onplay = function () {
console.log('我播放了')
}
video.onpause = function () {
console.log('我暫停了')
}
video.ontimeupdate = function () {
console.log('我一直在播放')
}
video.onended = function () {
console.log('我播放完了,你過來啦')
}
</script>
</body>
4. audio 音頻標簽
4.1 audio 標簽屬性
- src 要播放的音頻的 URL胎撤。
- . autoplay 自動播放
- controls 向用戶顯示播放控件
- loop 循環(huán)
- preload 是否等加載完再播放
- muted 靜音
4.2. audio API屬性
- duration 音樂的總時間(只讀)
- currentTime 音樂當前時間(可讀寫)
- volume: 0-1 的音量絕對值(可讀寫)
- ended 音樂播是否播放完畢(只讀)
- play: 音樂播放(只讀)
- pause:音樂暫停(只讀)
- error: 媒體發(fā)生錯誤的時候,返回錯誤代碼(只讀)
- currentSrc: 以字符串的形式返回媒體地址(只讀)_
自定義視頻播放器
<body>
<div id="wrap">
<video id="video" width="500" height="300" poster="./resource/333.jpg">
<source src="./video/這一路.mp4" type="video/mp4" />
<source src="./video/這一路.ogv" type="video/ogg" />
您的瀏覽器不支持video標簽晓殊，請您升級或更換瀏覽器！哩照！
</video>
<div style="height:10px;background:-webkit-linear-gradient(top,#333,#555)"></div>
<div id="progress">
<input id="currTime" type="text" value="00:00:00">
<div class="pro">
<div class="pro-bg"></div>
<div class="pro-bar"></div>
</div>
<input id="allTime" type="text" value="00:00:00">
</div>
<div id="control">
<a id="pre" href="javascript:;"></a>
<a id="play" href="javascript:;"></a>
<a id="next" href="javascript:;"></a>
<a id="volume" href="javascript:;">
<p class="vol">
<span class="vol-bg"></span>
<span class="vol-bar"></span>
</p>
</a>
<a id="full" href="javascript:;"></a>
</div>
</div>
<script>
//獲取操作的元素
//JS中沒有連字符-，要么改成下劃線_懒浮，要么改成駝峰
let oVide = getById('video'),
play = getById('play'),
pre = getById('pre'),
next = getById('next'),
volume = getById('volume'),
full = getById('full'),
currTime = getById('currTime'),
allTime = getById('allTime'),
pro = getByClass('pro'),
pro_bg = getByClass('pro-bg'),
pro_bar = getByClass('pro-bar'),
vol_bg = getByClass('vol-bg'),
vol_bar = getByClass('vol-bar');
//視頻播放/暫停按鈕
// 借助信號量控制播放暫停
let mark = true;
play.onclick = function () {
if (mark) {
console.log('播放');
oVide.play();
this.style.backgroundPosition = "-40px 0";
} else {
console.log('暫停')
oVide.pause()
this.style.backgroundPosition = "0 0"
}
mark = !mark;
// 獲取視頻總時長
// console.log(oVide.duration)
allTime.value = formaTime(oVide.duration)
}
//當前視頻播放時間
oVide.addEventListener('timeupdate', function () {//監(jiān)聽timeupdate事件飘弧，觸發(fā)事件處理函數
getCurrentTime()
// console.log(this.currentTime)
}, false)
//處理當前時間與進度
function getCurrentTime() {
currTime.value = formaTime(oVide.currentTime)
// 進度條
// 計算當前視頻播放的比例
let decimal = oVide.currentTime / oVide.duration//播放小數比等于播放的時長除以總時長
pro_bar.style.left = decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'//小球定位定位等于播放小數比乘以容器的寬度減去小球的寬度
//進度條背景的移動
pro_bg.style.width = 20 + decimal * (pro.offsetWidth - pro_bar.offsetWidth) + 'px'
}
function formaTime(time) {//定義格式化時間函數formaTime() forma表示格式化。轉成 時：分：秒
time = time && +time;//有可能是null或字符串砚著，不存在就是null 字符串就轉成數字類型次伶，所以使用邏輯與
let hh = formatZero(Math.floor(time / 3600))//獲得小時
let mm = formatZero(Math.floor(time % 3600 / 60))//獲得分鐘
let ss = formatZero(Math.floor(time % 60))//獲得秒
// console.log('time',hh,mm,ss)//把這個時間渲染到頁面上
return `${hh}:${mm}:${ss}`
}
//兩位數字函數(時間變成兩位)
function formatZero(num) {
return (num > 10 ? "" : "0") + num //得到空或者0后拼接num
}
//進度條的拖拽
pro_bar.onmousedown = function (ev) {
ev = ev || window.event;
let disX = ev.clientX - this.offsetLeft;//差值
//鼠標移動
document.onmousemove = function (ev) {
ev = ev || window.event;
let _left = ev.clientX - disX;
//邊界檢測
if (_left <= 0) {//最小值
_left = 0;
}
if (_left >= pro.offsetWidth - pro_bar.offsetWidth) { //最大值
_left = pro.offsetWidth - pro_bar.offsetWidth
}
//設置進度條移動
pro_bar.style.left = _left + 'px'
//設置進度條移動
pro_bg.style.width = 20 + _left + 'px';
//計算拖拽百分比小數
let processDecimal = _left / (pro.offsetWidth - pro_bar.offsetWidth) //距離除以總長
// 計算當前時間
oVide.currentTime = processDecimal * oVide.duration// 小數乘以總時長
}
getCurrentTime()//再執(zhí)行處理當前時間與進度函數
//鼠標抬起
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null;
}
}
// 全屏
full.onclick = function () {
oVide.webkitRequestFullScreen()
}
//通過id獲取DOM元素方法
function getById(id) {
return document.getElementById(id)
}
function getByClass(className) {
return document.getElementsByClassName(className)[0]//只要一個元素
}
</script>
</body>
