js+video标签实现一个自定义播放器 |
您所在的位置：网站首页 › 声音控制按钮 › js+video标签实现一个自定义播放器 |
js+video标签实现一个自定义播放器
|
这是我参与新手入门的第2篇文章 js+video标签实现一个自定义播放器 video一些常见的方法和属性。 方法&属性描述play()播放pause()暂停duration视频总时长currentTime视频当前播放的时长volume音量width宽度height高度src属性规定要播放的视频的 URLcontrols是否显示自带的控件，比如播放按钮等autoplay是否自动播放preload是否在页面加载后载入视频，如果设置了 autoplay 属性，则忽略该属性。loop是否循坏播放poster视频下载时显示的图像，或者在用户点击播放按钮前显示的图像loop是否循坏播放muted静音 正文 html+css部分先来简单实现一下播放器的页面部分吧！！！ 要实现的页面效果：
html代码： 您的浏览器不支持 video 视频播放 播放 暂停 音量加 音量减 快进10s 快退10s 加速播放 减速播放 大屏幕 中屏幕 小屏幕css代码 *{margin: 0; padding: 0;} .clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;} .clearfix {*zoom: 1;} #wrap{width: 600px; margin: 50px auto;} #video{width: 100%;} button{width: 69px; height: 30px; border: none; background: #f9c; float: left; border-radius: 5px; margin: 3px;} button:hover{position: relative; top: 1px; left: 1px; background: red;} #progress{width: 100%; height: 13px; background: gray; margin-top: -3px;} #bar{width:0; height: 13px; background: red;} js部分页面部分完成了，那就是我们重点的js啦！！！ 简单分析下我们需要实现的逻辑有哪些???然后一个一个来实现它吧！！！ 因为我们使用的都是原生的js写的，所以我们写两个用的上公共函数,方便我们使用。 属性方法auto自动自动自动公共函数 //通过id找对象函数 function $(id){ return document.getElementById(id) }; // 获取元素样式函数 function getStyle(obj,attr){ var css=obj.currentStyle || getComputedStyle(obj,null); return css[attr] }接着就一步一步来实现功能啦！！！ 进度条 进度条是个复杂点,理清思路，用定时器来实现，详情看注释 var video=$('video'); var duration=video.duration; //视频总时长; // 进度条运动函数 var bar=$('bar'); var timer=null; function run(){ var currentTime=video.currentTime; //视频当前播放的时长; bar.style.width=currentTime/duration*100+'%';//进度条进度 } // 点击改变进度条进度,控制视频播放进度; var progress=$('progress'); progress.addEventListener('click',progress_click,false); function progress_click(ev){ var oEvent=ev ||event ;//兼容处理; var px=oEvent.clientX; //鼠标点击位置的横坐标位置; var pl=progress.offsetLeft;//div到浏览器左边的距离; var bwidth=px-pl; //鼠标点击位置进度条的长度; var pwidth=parseInt(getStyle(progress,'width')); bar.style.width=bwidth/pwidth*100+'%'; //进度条进度 video.currentTime=duration*(bwidth/pwidth);//视频播放进度 }播放与暂停 播放、暂停使用的是play(),pause()方法，配合进度条的定时器就可以随时播放暂停啦 // 播放 var play=$('play'); play.addEventListener('click',play_click,false); function play_click(){ video.play(); timer=setInterval(run,1000) //开启定时器 }; // 暂停 var pause=$('pause'); pause.addEventListener('click',pause_click,false); function pause_click(){ video.pause(); clearInterval(timer) //清除定时器 };音量加减 音量加减使用的是volume属性做加减运算,由于volume音量默认的最大值为1，最小值为0，以0.2为单位做加减，因此需要注意解决js小数运算的精度问题，可用toFixed()的方法做处理。 // 音量加 var volume1=$('volume1'); volume1.addEventListener('click',volume1_click,false); function volume1_click(){ if(video.volume>=1){ alert('音量已最大'); return } video.volume+=0.2; video.volume=video.volume.toFixed(2);//解决小数运算精度问题 }; // 音量减 var volume2=$('volume2'); volume2.addEventListener('click',volume2_click,false); function volume2_click(){ if(video.volume=1){ alert('音量已最大'); return } video.volume+=0.2; video.volume=video.volume.toFixed(2);//解决小数运算精度问题 }; // 音量减 var volume2=$('volume2'); volume2.addEventListener('click',volume2_click,false); function volume2_click(){ if(video.volume |
【本文地址】