當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/14 编程问答 25 豆豆

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

注：本例子沒有涉及到數據庫，是純前端實現的

要點介紹

video標簽是html5新增的一個標簽，用于視頻播放，在W3C官方文檔可以查到它的相關方法，屬性和時間，此處我大致介紹一下我用到的一些：

1，方法：

play()，視頻播放
pause()，視頻暫停
load(), 視頻加載

2，屬性

currentTime,視頻的播放進度
duration，視頻的總長度
volume，視頻的音量

3，事件

play，視頻播放時觸發
pause，視頻暫停時觸發
timeupdate，視頻進度發生改變時觸發

效果預覽

先來看一下實現的效果圖：

大致功能介紹

點擊播放按鈕，播放視頻
點擊暫停按鈕，暫停視頻
視頻進度條時刻跟蹤視頻播放進度，當進度條漫時，視頻自動停播
拖動進度條，控制視頻的播放進度
點擊全屏按鈕，視頻全屏播放
點擊聲音控件，控制聲音變小或變大
點擊播放列表中的某一項，視頻切換播放

實現思路

還是慣例來捋一下思路，因為這個布局也不復雜，我就只寫一下js部分的思路：

效果思路

點擊播放/暫停	利用類切換，點擊事件中，首先判斷當前是哪一個類名，是播放類就暫停，移出播放類，添加暫停類
全屏功能	利用API element.requestFullScreen()實現，在點擊事件里設置即可
進度條綁定視頻播放進度	獲取視頻已經播放的事件以及總時間，將計算結果賦值給進度條的value
進度條控制視頻播放進度	原理和上面類似，只是要反過來，是要把進度條的value值和總時間的計算結果賦值給當前播放時間屬性
視頻切換功能	利用自定義屬性，將視頻地址綁定到每個li標簽上，例如點擊第一個視頻，在點擊事件中就是將自定義屬性中存儲的地址賦給video標簽的src屬性
聲音控制	和視頻進度實現原理一樣，將計算結果賦值給volume屬性即可

代碼實現

貼一下代碼

<!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;}/* 開關按鈕 */.iconfont.open_down {}/* 全屏按鈕 */.iconfont.fullscreen {}/* 進度條 */.iconfont.progress_bar {}video{width: 100%;height: 100%;}/* 浮動，讓控制元素排成一排 */.right_controls {width: 100%;position: relative;height: 100%;line-height: 100px;margin-right: 20px;}.controls {margin-right: 10px;}/* 進度條 */[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;}/* 頭部的標題 */.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(){// 判斷是否是開啟按鈕，是就播放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")}})// 以上，播放及暫停功能完成// 視頻進度改變，進度條記錄變化 video.addEventListener("timeupdate",function(){// 已播放var current=video.currentTime;// 視頻全程時間var all=video.duration;// 設置給進度條bar.value=(current/all)*100;// 視頻播放完畢，自動if(bar.value==100){open_down.classList.remove("icon-iconfront-");open_down.classList.add("icon-bofang")}}) // 以上，記錄進度功能完成// 拉進度，改變視頻進度 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")} }) // 以上，拉進度功能完成// 全屏功能 fullscreen.addEventListener('click',function(){video.requestFullscreen(); }) // 以上，全屏功能完成// 切換視頻for(var i=0;i<lis.length;i++){lis[i].addEventListener("click",fn) } // 因為是純前端實現視頻切換，我把視頻地址通過自定義屬性存在li標簽上 function fn(){video.src=this.getAttribute("url");}// 控制聲音，和上面視頻進度條的實現原理類似 voice.addEventListener("click",function(){if(!voice_controls.classList.contains("show")){// 判斷是聲音控件是顯示地狀態還是隱藏地狀態，顯示的時候就隱藏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>

總結

以上是生活随笔為你收集整理的H5实现一个简易本地视频播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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