首页 > 代码库 > 用javascript做一款属于自己的播放器

用javascript做一款属于自己的播放器

2024-07-12 14:14:14   220人阅读

用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的网站上，有完整的实现。只是体积太大，不介意的可以直采用。


联系
我们