每日一练 JS30挑战 HTML5播放器

HTML5播放器

实现目标

有进度条，可拖动点击
有音量，可改变音量
有倍速，可改变播放速度
有前进后退按钮
有暂停播放键

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HTML Video Player</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="player"><video class="player__video viewer" src="./oceans.mp4" ></video><div class="player__controls"><div class="progress"><div class="progress__filled"></div></div><button class="player__button toggle" title="Toggle Play">►</button><input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="0.2"><input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1"><button data-skip="-10" class="player__button">« 10s</button><button data-skip="25" class="player__button">25s »</button></div></div><script src="scripts.js"></script>
</body>
</html>

const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('button[data-skip]');
// console.log(skipButtons);
const ranges = player.querySelectorAll('.player__slider');
// console.log(ranges);
const progressBar = player.querySelector('.progress__filled');
console.log(progressBar);
const progress = player.querySelector('.progress');
console.log(progress);
function togglePlay(){// console.log(video.paused);//播放状态 true 暂停const method = video.paused?'play':'pause';video[method]();// if(video.paused){//     video.play();// }else{//     video.pause();// }
}
function updateToggle(){const icon = video.paused?'►':'ǁ';//https://www.copypastecharacter.com/all-characterstoggle.textContent = icon;
}
function skip(){console.log('skip....');video.currentTime += parseFloat(this.dataset.skip);//字符串处理成小数类型
}
function handleRange(){//声音和速度// console.log(this.name);//当前被点击元素名// console.log(this.value);//对应的值video[this.name] = this.value;
}
function handleProgress(){//进度条const percent = (video.currentTime / video.duration) * 100;progressBar.style.flexBasis = `${percent}%`;//百分号
}
function screb(e){const screbTime = (e.offsetX / progress.offsetWidth) * video.duration;video.currentTime = screbTime;
}video.addEventListener('click',togglePlay);//点击画面
video.addEventListener('play',updateToggle);//播放状态
video.addEventListener('pause',updateToggle);//暂停状态
toggle.addEventListener('click',togglePlay);//点击按钮
video.addEventListener('timeupdate',handleProgress);//进度条
progress.addEventListener('click',screb);//调整进度条
let mousedown = false;
progress.addEventListener('mousedown',()=>mousedown = true);
progress.addEventListener('mouseup',()=>mousedown = false);
progress.addEventListener('mousemove',e=>mousedown && screb(e));//短路运算符的妙用
skipButtons.forEach(item=>item.addEventListener('click',skip));ranges.forEach(item=>item.addEventListener('change',handleRange));
ranges.forEach(item=>item.addEventListener('mousemove',handleRange));

实现效果

每日一练 JS30挑战 HTML5播放器相关推荐

微信小程序练手项目-音乐播放器
微信小程序练手项目-音乐播放器该项目只适合练手,大佬请绕道项目展示图: 项目介绍微信小程序音乐播放器页面: 音乐推荐.播放器.播放列表功能: 播放.暂停.上一首.下一首.跳转播放列表.实时进 ...
HTML5播放器：视频分段播放
2019独角兽企业重金招聘Python工程师标准>>> 本来想试试能不能越过Vip验证关卡,直接获取到视频资源地址的,但是发现拿到的地址只有几分钟的,或者十几分钟的! 想着这应该是视 ...
7款高颜值HTML5播放器：让你的音乐有声有色
原文:http://www.codeceo.com/article/7-cool-html5-player.html 这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器 ...
PHP双码率视频云转码服务系统源码 m3u8切片秒切html5播放器全开源
介绍: PHP双码率视频云转码服务系统源码 m3u8切片秒切html5播放器全开源 PHP双码率视频云转码服务系统源码 m3u8切片秒切版本特点: 1.修正了双码率无法转码.切片问题,优化&quo ...
自己的HTML5 播放器
不知道写什么,主要也是自己水平实在是有限,想想自己会的东西都太基本,网上一搜往后不知道能数多少页,自己表达的也没有别人好.我希望自己写的东西要么是网上没有(可能性就是零--),要么是带着自己的见解.所 ...
html5播放器视频倍速播放功能
阿酷TONY 2021-3-24 1. 倍速播放功能可以让视频加速或者减速播放: 2. 在PC端,HTML5播放器能轻松实现倍速播放功能,您可以将视频的播放速度设定为0.5倍,1倍(正常速),1.2倍 ...
安卓uc斗鱼html5,斗鱼HTML5播放器
// ==UserScript== // @description 基于 flv.js 的斗鱼HTML5播放器. // @icon https://ojiju7xvu.qnssl.com/d5hp/i ...
html网易云客堂,网易云课堂 HTML5 播放器样式调整
网易云课堂 HTML5 播放器样式调整是一款由作者黄盐分享的一个浏览器扩展插件.通过脚本用户可以配合[视频站启用html5播放器使用],播放器不会出现滚动条,并且有控制按钮,有需要的用户欢迎下载使用体 ...
b站选择HTML5播放器,b站用什么播放器看片好?选择硬解还是软解?看本地视频首选哪一个?...
b站看视频的时候,我们经常会遇到视频卡顿或者视频黑屏等一系列的症状,有时候我们采用各种方式都不能进行解决,其实这是和播放器的类型有关,一般来说B站都有默认的播放器进行视频播放,除了常规的播放器之外,还 ...

每日一练 JS30挑战 HTML5播放器

HTML5播放器

实现目标

实现代码

实现效果

每日一练 JS30挑战 HTML5播放器相关推荐

最新文章

热门文章