用js可以做播放器?你没有看错,javascript结合html5是完全可以实现一款个性化的视频播放器的。在项目早些时候
我们是通过phoneGap提供的插件实现的视频播放,但是有一个问题,我们的项目是一个单页应用,翻页的时候,实际
上是用translateX的位移模拟手机上的滑动翻页效果的,而用phoneGap提供的视频播放器,它的层级是我们的前端代码
无法控制的,也就是说,页面滑动的时候,视频没有跟着一起动,感觉就是脱离了页面。后来我们大胆的采用html5的video
来实现播放。因为video是页面中的元素,所以它当然可以随着页面一起移动了,但是它的默认样式,实在是与我们的项目风格
太不协调了。于是我就查了一下video的api 进行了自定义。具体代码稍后贴出,也可以从我的git上下载。下面展示一下效果:
界面有点简单,甚至可以说比较丑。这只能说美工不给力,但是作为一个demo,我想控制的
开关,进度条,时间等,都可以进行自定义,这就足够了。如果你觉得有兴趣,不妨看下后面的源码,超级
简单:
(function(){ var video = document.querySelector(‘video‘); var VideoBox = video.parentNode.children[1]; var mediaLength = 500; var pauseTime = 0; //播放事件 var play = function() { video.play(); powerBtn.className = ‘StopControl‘; timeSpan(); } //暂停事件 var pause = function() { video.pause(); powerBtn.className = ‘MainControl‘; pauseTime = video.currentTime; } /*开关按钮*/ var powerBtn = VideoBox.children[0]; /*监听开关事件*/ powerBtn.addEventListener(‘click‘,function(e){ video.paused ? play() : pause(); },false); //进度条 var DomProcess = VideoBox.children[1].children[1]; //进度条长度增加 DomProcess.addEventListener(‘click‘,function(e){ var left = this.getBoundingClientRect().left; var length = e.clientX - left; durationProcessRange(length / mediaLength); },false); //进度条长度减少 var DomProcessYet = VideoBox.children[1].children[2]; DomProcessYet.addEventListener(‘click‘,function(e){ var left = this.getBoundingClientRect().left; var length = e.clientX - left; durationProcessRange(length / mediaLength); },false); //响应播放进度条变化 function durationProcessRange(rangeVal) { video.currentTime = rangeVal * video.duration; video.play(); } //监听播放完成事件 video.addEventListener(‘ended‘, function () { powerBtn.className = ‘MainControl‘; },false); //时间进度处理程序 function timeSpan() { var total = timeDispose(video.duration); var ProcessYet = 0; setInterval(function () { var ProcessYet = (video.currentTime / video.duration) * mediaLength; DomProcessYet.style.width = ProcessYet + ‘px‘; var currentTime = timeDispose(video.currentTime); var SongTime = VideoBox.children[1].children[0]; SongTime.innerHTML = currentTime + " | " + total; }, 1000); } //时间处理,因为时间是以s为单位算的,所以这边执行格式处理一下 function timeDispose(number) { var minute = parseInt(number / 60); var second = parseInt(number % 60); minute = minute >= 10 ? minute : "0" + minute; second = second >= 10 ? second : "0" + second; return minute + ":" + second; } })();
不过由于安卓上对video的实现不是很完整,还是保留了用phoneGap播放,苹果和PC采用video播放。
需要指出的是,苹果上的iphone是不允许我们对video的界面元素进行控制的,只能用默认的风格。
此外呢,html5的video元素,对视频格式也有要求,具体查看w3c的说明文档。
有兴趣尝试一下的,可以自己写或从以下地址下载源码:
https://github.com/bjtqti/xxt/tree/master/html5
另外有一个叫videojs的网站上,有完整的实现。只是体积太大,不介意的可以直采用。