H5自定义video功能与样式处理
H5的video非常简单，方便，有时我们可能需要自己来设置样式来自定义的video，自定义的话我们需要对功能进行一些处理，这里常用的功能几乎是都用到了，第一次练习代码很累赘，之后会慢慢改进。
常用的一些 video API
"视频播放":video.play();
"视频暂停播放":video.pause();
"视频地址":video.currentSrc;
"视频总时长":video.duration;
"视频播放速率":video.playbackRate;
"是否暂停":video.paused;
"是否结束":video.ended;
"是否静音":video.muted;
"当前播放时间": video.currentTime;
"当前缓冲量":video.buffered.end(0);
"当前音量":video.volume
api使用方法
video.onloadedmetadata=function(){
console.log("视频地址"+video.currentSrc);
console.log("视频总时长"+video.duration);
console.log("视频播放速率"+video.playbackRate);
console.log("是否暂停"+video.paused);
console.log("是否结束"+video.ended);
console.log("是否静音"+video.muted);
}
//当前时间
video.ontimeupdate=function(){
console.log("当前播放时间"+video.currentTime);
console.log("当前缓冲量"+video.buffered.end(0));
}
//当前音量
video.onvolumechange=function(){
console.log("当前音量"+video.volume);
}
//播放
btnPlay.onclick=function (){
video.play();
}
//停止
btnStop.onclick=function (){
video.pause();
}
demo全部代码（代码里面的图片请替换成本地图片，不让无法看到此demo的完整效果，播放按钮在进度条左边）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8"> <title>自定义播放器音量拖动</title>
<style>
.video-warp {
width: 800px;
margin: auto;
text-align: center;
}
video {
width: 100%;
}
.controls {
width: 100%;
background: #ccc;
height: 20px;
line-height: 20px;
text-align: left;
box-sizing: border-box;
padding-left: 5px;
position: relative;
}
.controls i {
display: inline-block;
width: 20px;
height: 20px;
background: url(img/play.png) no-repeat;
background-size: 100%;
}
.controls i:nth-of-type(2) {
display: none;
background: url(img/pause.png) no-repeat;
background-size: 100%;
}
.controls i:nth-of-type(3) {
background: url(img/sound.png) no-repeat;
background-size: 100%;
}
.controls i:nth-of-type(4) {
display: none;
background: url(img/mute.png) no-repeat;
background-size: 100%;
}
.progress {
display: inline-block;
width: 62%;
height: 10px;
line-height: 10px;
background: #e5e9ef;
border-radius: 5px;
vertical-align: super;
overflow: hidden;
}
.video-timer {
display: inline-block;
vertical-align: top;
}
.timrBar {
display: inline-block;
height: 11px;
background: #8adced;
}
#playSpeed {
color: #fb0606;
cursor: pointer;
float: right;
margin-right: -32px; }
/*yinliang*/
.video-sound {
position: absolute;
width: 100px;
height: 10px;
background: #e5e9ef;
bottom: 5px;
right:48px;
border-radius: 5px;
overflow: hidden;
}
.soundBar {
height: 100%;
background: #00a1d6;
}
/*全屏*/
#screen{
float: right;
margin-right: 25px;
margin-top: 5px;
width: 10px;
height: 10px;
background: url(img/full-screen.png);
background-size:contain ;
}
</style>
</head> <body>
<div class="video-warp" id="video-warp">
<video id="video" poster="img/preview.jpg"
<source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg"></source>
当前浏览器不支持 video直接播放，点击这里下载视频：
<a href="myvideo.webm">下载视频</a>
</video>
<div class="controls" id="controls">
<i id="play"></i>
<i id="pause" class="hide"></i>
<!--进度条-->
<div class="progress">
<div class="timrBar"></div>
</div>
<!--时长-->
<div class="video-timer">
<span id="currentTime">00:00</span><em>/</em>
<span id="duration">00:00</span>
</div>
<i id="sound" class="sound"></i>
<i id="muteSound" class="sound"></i>
<div class="video-sound">
<div class="soundBar"></div>
</div>
<i id="screen"></i>
<span id="playSpeed">*3</span>
</div>
</div>
<script>
var v = {
video: document.getElementById("video"),//容器框
play: document.getElementById("play"),//播放按钮
pause: document.getElementById("pause"),//暂停按钮
duration: document.getElementById("duration"),//总时长
currentTime: document.getElementById("currentTime"),//当前播放时间
progress: document.getElementsByClassName("progress")[0],//进度条容器
timrBar: document.getElementsByClassName("timrBar")[0], //进度条 sound: document.getElementsByClassName("video-sound")[0], //音量容器
soundBar: document.getElementsByClassName("soundBar")[0],//音量
playSpeed: document.getElementById("playSpeed"),//播放速率
warp: document.getElementById("video-warp"), //视频区域距离左边距离
soundPercent:0 ,//音量百分比
fullScreen:document.getElementById("screen")/*全屏按钮*/
}; v.video.onloadedmetadata = function() {
//播放
v.play.onclick = function() {
if(v.video.paused || v.video.ended) {
v.video.play();
this.style.display = "none";
v.pause.style.display = "inline-block";
}
}
//暂停
v.pause.onclick = function() {
if(!v.video.paused || !v.video.ended) {
v.video.pause();
v.pause.style.display = "none";
v.play.style.display = "inline-block";
}
}
//获取时长
v.duration.innerHTML = timer(v.video.duration);
v.currentTime.innerHTML = timer(v.video.currentTime);
//进度条跟随
v.video.ontimeupdate = function() {
var currentTime = v.video.currentTime;
var duration = v.video.duration;
var percent = currentTime / duration * 100;
v.timrBar.style.width = percent + "%";
v.currentTime.innerHTML = timer(v.video.currentTime);
}
//进度条获取坐标调用 拖拽实现方法
var enableProgressDrag = function(e) {
var progressDrag = false;
v.progress.onmousedown = function(e) {
progressDrag = true;
updateprogress(e.pageX - v.warp.offsetLeft);
}
document.onmouseup = function(e) {
if(progressDrag) {
progressDrag = false;
updateprogress(e.pageX - v.warp.offsetLeft);
} }
v.progress.onmousemove = function(e) {
if(progressDrag) {
updateprogress(e.pageX - v.warp.offsetLeft);
}
}
}; enableProgressDrag();
//播放速率
v.playSpeed.onclick = function() {
v.video.playbackRate = 3;
} //音量获取坐标调用 拖拽实现方法
var enableSoundDrag = function(e) {
var soundDrag = false;
v.sound.onmousedown = function(e) {
soundDrag = true;
updatesound(e.pageX - v.warp.offsetLeft);
}
v.sound.onmouseup = function(e) {
if(soundDrag) {
soundDrag = false;
updatesound(e.pageX - v.warp.offsetLeft);
} }
v.sound.onmousemove = function(e) {
if(soundDrag) {
updatesound(e.pageX - v.warp.offsetLeft);
}
}
};
enableSoundDrag();
updatesound(null, 35); //初始化音量
/*全屏*/
var isScreen=false;
v.fullScreen.addEventListener("click",function(){
if(isScreen==false){
requestFullscreen(v.video);
isScreen=true;
}else{
exitFullscreen(v.video);
isScreen=false;
}
})
}
//进度条可拖拽实现
function updateprogress(x) {
var percent = 100 * (x - v.progress.offsetLeft) / v.progress.offsetWidth;
if(percent > 100) {
percent = 100;
}
if(percent < 0) {
percent = 0;
}
v.timrBar.style.width = percent + "%";
v.video.currentTime = v.video.duration * percent / 100; }
//音量可拖拽实现
function updatesound(x, n) {
sounding();
if(n) {
soundPercent = n;
} else {
soundPercent = 100 * (x - v.sound.offsetLeft) / v.sound.offsetWidth;
}
if(soundPercent > 100) {
persoundPercentcent = 100;
}
if(soundPercent < 0) {
soundPercent = 0;
}
v.soundBar.style.width = soundPercent + "%";
v.video.volume = soundPercent / 100;
}
//时间格式化
function timer(seconds) {
var minute = Math.floor(seconds / 60);
if(minute < 10) {
minute = "0" + minute;
} var second = Math.floor(seconds % 60);
if(second < 10) {
second = "0" + second;
}
return minute + ":" + second;
}
//是否静音
var sound = document.querySelector("#sound");
var muteSound = document.querySelector("#muteSound");
function sounding() {
if(v.video.volume == 0 ) {
sound.style.display = "none";
muteSound.style.display = "inline-block";
} else {
sound.style.display = "inline-block";
muteSound.style.display = "none";
}
}
//切换静音
sound.onclick=function(){
showHide(sound,muteSound);
v.video.volume =0;
v.soundBar.style.width=0;
}
//去除静音 音量回到之前选定区域
muteSound.onclick=function(){
showHide(muteSound,sound);
v.soundBar.style.width = soundPercent + "%";
v.video.volume = soundPercent / 100;
}
//显示与隐藏
function showHide(a,b){
a.style.display = "none";
b.style.display = "inline-block";
} /*全屏*/
// 全屏
// ele:全屏的对象
function requestFullscreen(ele) {
// 全屏兼容代码
if (ele.requestFullscreen) {
ele.requestFullscreen();
} else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
}
// 取消全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
</script>
</body> </html>
效果：
H5自定义video功能与样式处理的更多相关文章
- 富文本编辑器UEditor自定义工具栏（三、自定义工具栏功能按钮图标及工具栏样式简单修改）
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...
- jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- WPF编程，使用WindowChrome实现自定义窗口功能的一种方法。
原文:WPF编程,使用WindowChrome实现自定义窗口功能的一种方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_43307934/arti ...
- c#微信开发，使用JS-SDK自定义分享功能，分享朋友圈，分享给朋友等
如果一个后端开发掌握了微信开发,甚至有微信开发上线项目,这在换工作的时候 还是有竞争力的. 微信开发的资料很多,但是用asp.net c#进行微信开发好像比较少,或者资料不够完整. 使用JS-SDK自 ...
- h5 的video视频控件
h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
- jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
随机推荐
- C++11智能指针原理和实现
一.智能指针起因 在C++中,动态内存的管理是由程序员自己申请和释放的,用一对运算符完成:new和delete. new:在动态内存中为对象分配一块空间并返回一个指向该对象的指针: delete:指向 ...
- Luogu P5068 [Ynoi2015]我回来了
题目 Ynoi难得的水题. 首先我们可以\(O(n^2)\)地求出任意两点之间的距离. 然后我们可以\(O(n^3)\)地求出对于任意一个点\(u\),跟它距离\(\le d\)的点的集合. 然后对于 ...
- Brain的同步规则
这段话来自Java编程思想并发一章 什么时候使用同步 如果你正在写一个变量,它可能接下来将被另一个线程读取,或者正在读取一个上一次已经被另一个线程写过的变量,那么你必须使用同步,并且,读写线程都必须用 ...
- oa_mvc_easyui_详细页(5)
1.表格详细列中添加a标签,给id参数 <a href="javascript:void(0)" class="details" ids="@n ...
- mongo分布式锁Java实现
一.分布式锁使用场景: 代码部署在多台服务器上,即分布式部署. 多个进程同步访问一个共享资源. 二.需要的技术: 数据库:mongo java:mongo操作插件类 MongoTemplate(mav ...
- calc,support,media各自的含义及用法
@support:用于检测浏览器是否支持CSS某个属性,即条件判断,如果支持某个属性,可以写一套样式,如果不支持某属性,提供另一套样式作为替补. calc():用于计算动态函数值,支持“+”,“-”, ...
- 从程序员小仙飞升上神,java技术开发要如何实现？
新霸哥是一个专业从事java开发的,近期,新霸哥发现很多的朋友在问,从程序员小仙飞升上神难吗?在此新霸哥将为你详细的介绍,下面新霸哥将从新手入门和老司机进阶多方面详细的为大家介绍一下. 说起java首 ...
- tomcat性能优化，内存优化和并发线程连接优化
今天被一同事问到tomcat和内存优化的问题,而网上的资料基本都是来回copy,所以抽时间随便写点.文章中设置的参数都是一个随便写的,具体的还要根据自己的情况来定. 1.内存优化: 说到tomcat不 ...
- deep_learning_Function_tensorflow_transpose()
tf.transpose()的用法 一.tensorflow官方文档内容 transpose( a, perm=None, name='transpose' ) Defined ...
- 2019-2020-1 20199319《Linux内核原理与分析》第七周作业
进程的描述和进程的创建 进程的描述 1.操作系统内核实现操作系统的三大管理功能: 进程管理 内存管理 文件系统. 其中最核心的功能是进程管理. 2.对进程的描述:在操作系统原理中,通过进程控制块PCB ...