當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

H5实现一个简易本地视频播放器

發(fā)布時(shí)間：2023/12/14 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5实现一个简易本地视频播放器小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

注：本例子沒(méi)有涉及到數(shù)據(jù)庫(kù)，是純前端實(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，視頻的總長(zhǎng)度
volume，視頻的音量

3，事件

play，視頻播放時(shí)觸發(fā)
pause，視頻暫停時(shí)觸發(fā)
timeupdate，視頻進(jìn)度發(fā)生改變時(shí)觸發(fā)

效果預(yù)覽

先來(lái)看一下實(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)思路

還是慣例來(lái)捋一下思路，因?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)度	原理和上面類似，只是要反過(guò)來(lái)，是要把進(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 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;}/* 開(kāi)關(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"><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"><i class="controls open_down iconfont icon-bofang "></i> <i class="controls fullscreen iconfont icon-quanping "></i><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(){// 判斷是否是開(kāi)啟按鈕，是就播放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)視頻切換，我把視頻地址通過(guò)自定義屬性存在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实现一个简易本地视频播放器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Cordys BOP 4平台开发入门实战
下一篇：超灵敏磁传感解决方案助力汽车产业发展