基于h5的视频播放器

  • Z5_318834
    了解作者
  • 4.8KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 07:37
    上传日期
运用h5,css,JavaScript技术写的视频播放器,支持视频的选择、播放、暂停、快进、音量调节等
video_play.rar
  • video_play
  • demo.html
    8.2KB
  • icon
  • play.png
    916B
  • volume.png
    774B
  • upload.png
    518B
  • pause.png
    205B
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>h5视频播放器</title> <style> body, h1 { margin: 0; } body { background-color: #ef6a6c; } video { display: block; width: 100%; } button { padding: 0; border: none; outline: none; background-color: transparent; } .player { margin: 50px auto 0; width: 1130px; min-height: 730px; } .title { height: 48px; line-height: 48px; text-align: center; font-size: 24px; background-color: #e7e8ea; } .content { min-height: 636px; background-color: #000; } .controls { display: flex; justify-content: space-around; align-items: center; height: 46px; background-color: #e7e8ea; } .play, .volume, .openFile { margin: 7px 9px auto; width: 30px; height: 30px; } .progress { width: 800px; height: 20px; border-radius: 10px; background-image: linear-gradient(to right, #ccc 0%, #ccc 0%); } .play { background: url('./icon/play.png') center/cover; } .volume { position: relative; } .volume>.volumeBtn { height: 100%; background: url('./icon/volume.png') center/cover; } .volume>.volumeBar { display: none; position: absolute; top: -100px; left: 50%; width: 10px; height: 100px; border-radius: 5px; transform: translateX(-50%); background-image: linear-gradient(to top, #0086b3 30%, #ccc 25%); } .openFile { background: url('./icon/upload.png') center/cover; } .openFile>input { width: 100%; height: 100%; opacity: 0; } </style> </head> <body> <div class="player"> <h1 class="title">h5视频播放器</h1> <div class="content"> <video src="" volume=0.3></video> </div> <div class="controls"> <button class="play"></button> <button class="volume"> <div class="volumeBtn"></div> <div class="volumeBar"></div> </button> <div class="progress"></div> <div class="openFile"> <input type="file"> </div> </div> </div> <script> /* 1.点击播放 暂停 按钮logo随之发生变化 2.进度条设置 点击/拖拽 3.音量设置 点击/拖拽 4.选中文件设置 播放器文件名设置 触发播放选项 */ let playBtn = document.querySelector(".play"), volumeBtn = document.querySelector(".volumeBtn"), volumeBar = document.querySelector(".volumeBar"), progress = document.querySelector(".progress"), openFileBtn = document.querySelector(".openFile>input"), videoFile = document.querySelector(".content>video"), title = document.querySelector(".title") // 播放/暂停设置 let playToggle = false // 视屏处于关闭状态 let loadFile = false // 是否已经加载视频 playBtn.onclick = function() { if(loadFile) { if(playToggle) { videoFile.pause() // 视频暂停 playBtn.style.backgroundImage = 'url(./icon/play.png)' // 切换为播放logo playToggle = false }else { videoFile.play() // 视频播放 playBtn.style.backgroundImage = 'url(./icon/pause.png)' playToggle = true } } } // 进度条设置 videoFile.addEventListener("timeupdate", function() { let nowTime = this.currentTime // 获取当前已经播放了的时间 let totalTime = this.duration // 视频总时间 let playProgress = (nowTime/totalTime)*100+"%" progress.style.backgroundImage = `linear-gradient(to right, #0086b3 ${playProgress}, #ccc ${playProgress})` }) progress.addEventListener("mousedown", progressSet) progress.addEventListener("mouseup", progressSet) progress.addEventListener("mousemove", progressSet) let progressToggle = false // 默认不可以拖动 function progressSet(ev=window.event) { // console.log(ev) if(!loadFile) { return } let playProgress switch (ev.type) { case "mousedown": progressToggle = true playProgress = ev.offsetX/progress.clientWidth videoFile.currentTime = playProgress*videoFile.duration progress.style.backgroundImage = `linear-gradient(to right, #0086b3 ${playProgress*100}%, #ccc ${playProgress*100}%)` break case "mousemove": if(progressToggle) { playProgress = ev.offsetX/progress.clientWidth videoFile.currentTime = playProgress*videoFile.duration progress.style.backgroundImage = `linear-gradient(to right, #0086b3 ${playProgress*100}%, #ccc ${playProgress*100}%)` } break case "mouseup": progressToggle = false break } } // 选中文件设置 openFileBtn.onchange = function() { let nowVideo = this let url = window.URL.createObjectURL(nowVideo.files[0]) videoFile.setAttribute("src", url) title.innerHTML = nowVideo.files[0].name.split(".")[0] progress.style.backgroundImage = `linear-gradient(to right, #ccc 0%, #ccc 0%)` playBtn.style.backgroundImage = 'url(./icon/play.png)' // 切换为播放logo playToggle = false loadFile = true } // 音量设置 let volumeToggle = false // 默认不显示音量条 volumeBtn.onclick = function() { if(!volumeToggle) { volumeToggle = true volumeBar.style.display = "block" }else { volumeToggle = false volumeBar.style.display = "none" } } volumeBar.addEventListener("mousedown", volumeSet) volumeBar.addEventListener("mousemove", volumeSet) volumeBar.addEventListener("mouseup", volumeSet) volumeProgressToggle = false function volumeSet(ev=window.event) { let volumeValue switch (ev.type) { case "mousedown": volumeProgressToggle = true volumeValue = 1-ev.offsetY/volumeBar.clientHeight videoFile.volume = volumeValue volumeBar.style.backgroundImage = `linear-gradient(to top, #0086b3 ${volumeValue*100}%, #ccc ${volumeValue*100}%)` break case "mousemove": if(volumeProgressToggle) { volumeValue = 1-ev.offsetY/volumeBar.clientHeight
评论
    相关推荐