H5实现一个简易本地视频播放器
生活随笔
收集整理的這篇文章主要介紹了
H5实现一个简易本地视频播放器
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
注：本例子沒有涉及到數(shù)據(jù)庫，是純前端實(shí)現(xiàn)的
要點(diǎn)介紹
video標(biāo)簽是html5新增的一個(gè)標(biāo)簽，用于視頻播放，在W3C官方文檔可以查到它的相關(guān)方法，屬性和時(shí)間，此處我大致介紹一下我用到的一些：
1，方法：
- play()，視頻播放
- pause()，視頻暫停
- load(), 視頻加載
2，屬性
- currentTime,視頻的播放進(jìn)度
- duration，視頻的總長度
- volume，視頻的音量
3，事件
- play，視頻播放時(shí)觸發(fā)
- pause，視頻暫停時(shí)觸發(fā)
- timeupdate，視頻進(jìn)度發(fā)生改變時(shí)觸發(fā)
效果預(yù)覽
先來看一下實(shí)現(xiàn)的效果圖：
大致功能介紹
- 點(diǎn)擊播放按鈕，播放視頻
- 點(diǎn)擊暫停按鈕，暫停視頻
- 視頻進(jìn)度條時(shí)刻跟蹤視頻播放進(jìn)度，當(dāng)進(jìn)度條漫時(shí)，視頻自動(dòng)停播
- 拖動(dòng)進(jìn)度條，控制視頻的播放進(jìn)度
- 點(diǎn)擊全屏按鈕，視頻全屏播放
- 點(diǎn)擊聲音控件，控制聲音變小或變大
- 點(diǎn)擊播放列表中的某一項(xiàng)，視頻切換播放
實(shí)現(xiàn)思路
還是慣例來捋一下思路，因?yàn)檫@個(gè)布局也不復(fù)雜，我就只寫一下js部分的思路：
| 點(diǎn)擊播放/暫停 | 利用類切換，點(diǎn)擊事件中，首先判斷當(dāng)前是哪一個(gè)類名，是播放類就暫停，移出播放類，添加暫停類 |
| 全屏功能 | 利用API element.requestFullScreen()實(shí)現(xiàn)，在點(diǎn)擊事件里設(shè)置即可 |
| 進(jìn)度條綁定視頻播放進(jìn)度 | 獲取視頻已經(jīng)播放的事件以及總時(shí)間，將計(jì)算結(jié)果賦值給進(jìn)度條的value |
| 進(jìn)度條控制視頻播放進(jìn)度 | 原理和上面類似，只是要反過來，是要把進(jìn)度條的value值和總時(shí)間的計(jì)算結(jié)果賦值給當(dāng)前播放時(shí)間屬性 |
| 視頻切換功能 | 利用自定義屬性，將視頻地址綁定到每個(gè)li標(biāo)簽上，例如點(diǎn)擊第一個(gè)視頻，在點(diǎn)擊事件中就是將自定義屬性中存儲(chǔ)的地址賦給video標(biāo)簽的src屬性 |
| 聲音控制 | 和視頻進(jìn)度實(shí)現(xiàn)原理一樣，將計(jì)算結(jié)果賦值給volume屬性即可 |
代碼實(shí)現(xiàn)
貼一下代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="../fonts/font_x1hton6tlu9/iconfont.css"><style>html,body {background-color: #ccc;}*{margin: 0;padding: 0;}.container {position: relative;width: 700px;height: 500px;background-color: #ccc;margin: 0 auto;margin-top: 100px;display: flex;}.left {flex: 3;background-color: rgb(80, 71, 71 );}.left_top{font-size: 25px;height: 100px;text-align: center;line-height:100px;border-bottom: 1px solid rgba(0, 0, 0, 0.096) ;}.left_list{height: 80%;/* padding-top: 30px; */background-color: hsla(0, 5%, 41%, 0.959);}.left_list ul{list-style: none;}.left_list ul li{height: 30px;border-bottom: 1px solid rgba(219, 202, 202, 0.63);text-align: center;line-height: 30px;}.left_list ul li:nth-child(1){border-top:1px solid rgba(219, 202, 202, 0.63);}.right {flex:7;background-color:rgba(82, 83, 83, 0.952);}.right_top{height: 400px;background-color: rgba(19, 20, 20, 0.89);}.right_bottom {height: 100px;}.iconfont{font-size: 40px;}/* 開關(guān)按鈕 */.iconfont.open_down {}/* 全屏按鈕 */.iconfont.fullscreen {}/* 進(jìn)度條 */.iconfont.progress_bar {}video{width: 100%;height: 100%;}/* 浮動(dòng)，讓控制元素排成一排 */.right_controls {width: 100%;position: relative;height: 100%;line-height: 100px;margin-right: 20px;}.controls {margin-right: 10px;}/* 進(jìn)度條 */[type="range"]{/* vertical-align: middle; */width: 280px;}.voice_controls {position: absolute;width: 100px;transform-origin: left bottom;transform:rotateZ(-90deg);left: 430px; top: 10px;display: none;}/* 控制聲音控件地顯示與隱藏 */.show {display: inline;}/* 頭部的標(biāo)題 */.top_name {position:absolute;font-size: 30px;color: rgba(255, 248, 220, 0.452);top: 0;left: 50%;}</style> </head> <body><div class="container"><!-- 左邊播放列表部分 --><div class="left"><!-- 標(biāo)題 --><div class="left_top">播放列表</div><!-- 列表 --><div class="left_list"><ul><li url="../video/movie01.mp4">01集</li><li url="../video/movie02.mp4">02集</li><li url="../video/movie03.mp4">03集</li><li url="../video/movie04.mp4">04集</li></ul></div></div><!-- 右邊部分 --><div class="right"><!-- 視頻播放部分 --><div class="right_top"><video src="../video/movie01.mp4" ></video></div><!-- 視頻控制部分 --><div class="right_controls"><!-- 開關(guān)按鈕 --><i class="controls open_down iconfont icon-bofang "></i> <!-- 全屏控制按鈕 --><i class="controls fullscreen iconfont icon-quanping "></i><!-- 視頻進(jìn)度條 --><input class="controls bar" type="range" value="0"><i class="controls voice iconfont icon-shengyin "></i><input type="range" class="voice_controls"></div></div><div class="top_name">正在播放</div></div><script>// 獲取元素var open_down=document.querySelector(".open_down");var video=document.querySelector("video");var bar=document.querySelector(".bar");var fullscreen=document.querySelector(".fullscreen");var lis=document.querySelectorAll("li");var voice_controls=document.querySelector(".voice_controls");var voice=document.querySelector(".icon-shengyin");// 播放暫停open_down.addEventListener("click",function(){// 判斷是否是開啟按鈕，是就播放if(open_down.classList.contains("icon-bofang")){// 播放video.play();open_down.classList.remove("icon-bofang");open_down.classList.add("icon-iconfront-")}else{// 暫停video.pause();open_down.classList.remove("icon-iconfront-");open_down.classList.add("icon-bofang")}})// 以上，播放及暫停功能完成// 視頻進(jìn)度改變，進(jìn)度條記錄變化 video.addEventListener("timeupdate",function(){// 已播放var current=video.currentTime;// 視頻全程時(shí)間var all=video.duration;// 設(shè)置給進(jìn)度條bar.value=(current/all)*100;// 視頻播放完畢，自動(dòng)if(bar.value==100){open_down.classList.remove("icon-iconfront-");open_down.classList.add("icon-bofang")}}) // 以上，記錄進(jìn)度功能完成// 拉進(jìn)度，改變視頻進(jìn)度 bar.addEventListener("change",function(){video.currentTime=bar.value/100*video.duration;if(bar.value==100){open_down.classList.remove("icon-iconfront-");open_down.classList.add("icon-bofang")} }) // 以上，拉進(jìn)度功能完成// 全屏功能 fullscreen.addEventListener('click',function(){video.requestFullscreen(); }) // 以上，全屏功能完成// 切換視頻for(var i=0;i<lis.length;i++){lis[i].addEventListener("click",fn) } // 因?yàn)槭羌兦岸藢?shí)現(xiàn)視頻切換，我把視頻地址通過自定義屬性存在li標(biāo)簽上 function fn(){video.src=this.getAttribute("url");}// 控制聲音，和上面視頻進(jìn)度條的實(shí)現(xiàn)原理類似 voice.addEventListener("click",function(){if(!voice_controls.classList.contains("show")){// 判斷是聲音控件是顯示地狀態(tài)還是隱藏地狀態(tài)，顯示的時(shí)候就隱藏voice_controls.classList.add("show");voice_controls.addEventListener("change",function(){video.volume=voice_controls.value/100;})}else{voice_controls.classList.remove("show");} })</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的H5实现一个简易本地视频播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cordys BOP 4平台开发入门实战
- 下一篇： 超灵敏磁传感解决方案助力汽车产业发展