zoukankan      html  css  js  c++  java
  • 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现。看着那一大段的<object>真心觉得累。随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要把界面打造的更加个性一点,需要一点javascript和一点css.如果能再加一个漂亮的美工,那就完全不在话下了。在项目早些时候

    我们是通过phoneGap提供的插件实现的视频播放,但是有一个问题,翻页的时候,视频没有跟着一起动,感觉就是脱离了页面。后来采用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 + "&nbsp;|&nbsp;" + 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的网站上,有完整的实现。只是体积太大,不介意的可以直采用。

  • 相关阅读:
    SQLSERVER查询某张表哪些字段包含某关键字
    SQLSERVER初始化机构path
    Golang的ORM框架之gorm
    Golang的web框架之Gin
    初识Go逆向
    GIT 常用命令
    mac上系统偏好里无法停止mysql
    js正则高级用法: 分组和断言
    Java强软弱虚四种引用的使用场景
    两数之和
  • 原文地址:https://www.cnblogs.com/afrog/p/3851574.html
Copyright © 2011-2022 走看看