CocoRoboDesktop/js/Controls/Mobile/Video.js

Namespace.register("U.MT.UI.Video"); //注册命名空间

/**
* 创建视频
* @param src 资源地址
* @param height 视频高度
* @param autoplay 是否自动播放
* @param parent 父元素
*/
U.MT.UI.Video.create = function (src, height, autoplay, parent) {
    autoplay = autoplay || false; //检测自动播放
    var _intervalTemp = null; //用于记录interval的值
    var _volumeTemp = null; //用于记录临时音量（静音与取消静音用）
    var _moving = false; //记录是否有移动
    var _tempHeight = ""; //记录临时高度，退出全屏时用
    var _fullscreen = false; //记录是否在全屏

    var _els = U.MT.UI.Video.appendEle(src, height, autoplay, parent);
    U.MT.UI.Video.addEvent(_els, _intervalTemp, _volumeTemp, _moving, _tempHeight, _fullscreen);
};

/**
* 生成元素
* @param src 视频资源地址
* @param height 视频高度
* @param autoplay 是否自动播放
* @param parent 父元素
*/
U.MT.UI.Video.appendEle = function (src, height, autoplay, parent) {
    var els = {};
    //包括视频和控制器的大div
    els.videoDiv = $$("div", {
        "className": "U_MT_UI_Video_VideoDiv", //设置class
        "style": { "width": "100%", "height": height + "px"}//设置样式
    }, parent);
    //视频主体
    els.video = $$("video", {
        "src": src, //资源地址
        "className": "U_MT_UI_Video_VideoMain", //视频class
        "autoplay": autoplay, //设置是否自动播放
        "preload": "auto"//是否预加载（默认自动）
    }, els.videoDiv);
    //控制器主体
    els.controls = $$("div", { "className": "U_MT_UI_Video_VideoControls" }, els.videoDiv);
    //暂停/播放按钮
    els.playPauseBtn = $$("div", { "className": "U_MT_UI_Video_PlayPauseButton U_MT_UI_Video_PlayIcon" }, els.controls);

    //显示当前时间的div
    els.currentTimeDiv = $$("div", { "className": "U_MT_UI_Video_Time", "innerHTML": "00:00" }, els.controls);
    //进度条
    els.progress = $$("div", {
        "className": "U_MT_UI_Video_Progress"//设置class
    }, els.controls);
    //进度条实际进度
    els.progressCurrentTime = $$("div", { "className": "U_MT_UI_Video_ProgressCurrentTime" }, els.progress);
    //进度条上的圆点
    els.progressCircle = $$("div", { "className": "U_MT_UI_Video_ProgressCircle" }, els.progressCurrentTime);
    //显示实际时间的div
    els.DurationDiv = $$("div", {
        "className": "U_MT_UI_Video_Time", //设置class
        "innerHTML": "00:00", //设置默认值
        "onselectstart": "return false;"//禁止选择
    }, els.controls);
    //音量按钮
    els.soundControls = $$("div", { "className": "U_MT_UI_Video_SoundControls" }, els.controls);
    //音量
    els.soundProgress = $$("div", { "className": "U_MT_UI_Video_SoundProgress" }, els.controls);
    //真实音量
    els.soundProgressCurrent = $$("div", {
        "className": "U_MT_UI_Video_SoundProgressCurrent", //设置class
        "style": { "width": "100%"}//默认音量100
    }, els.soundProgress);
    //全屏按钮
    els.fullScreenBtn = $$("div", { "className": "U_MT_UI_Video_FullScreen" }, els.controls);
    return els;
};

U.MT.UI.Video.addEvent = function (els, intervalTemp, volumeTemp, moving, tempHeight, tempWidth, fullscreen) {
    /**
    * 给暂停/播放按钮添加事件
    * @param event click事件
    */
    els.playPauseBtn.onclick = function (event) {
        U.MT.UI.Video.playPauseBtnClick(event, els);
    };

    /**
    * 进度条移动函数（圆点）
    * @param event touchstart事件
    */
    els.progressCircle.ontouchstart = function (event) {
        event.stopPropagation(); //停止事件的传播
        event.preventDefault(); //取消事件的默认动作
        U.MT.UI.Video.circleMove(event, moving, els);
    };

    if (els.videoDiv.onwebkitfullscreenchange !== undefined) {//webkit设置全屏状态
        els.videoDiv.onwebkitfullscreenchange = function () {
            var rtn = U.MT.UI.Video.fullscreenChange(fullscreen, tempHeight, els);
            fullscreen = rtn[0];
            tempHeight = rtn[1];
        }; //webkit设置全屏状态
    } else if (els.videoDiv.onfullscreenchange !== undefined) {//w3设置全屏状态
        els.videoDiv.onfullscreenchange = function () {
            var rtn = U.MT.UI.Video.fullscreenChange(fullscreen, tempHeight, els);
            fullscreen = rtn[0];
            tempHeight = rtn[1];
        }; //w3设置全屏状态
    } else if (els.videoDiv.onmozfullscreenchange !== undefined) {//moz设置全屏状态
        els.videoDiv.onmozfullscreenchange = function () {
            var rtn = U.MT.UI.Video.fullscreenChange(fullscreen, tempHeight, els);
            fullscreen = rtn[0];
            tempHeight = rtn[1];
        }; //moz设置全屏状态
    }

    els.fullScreenBtn.onclick = function () {
        U.MT.UI.Video.fullscreenClick(fullscreen, els);
    };

    /**
    * 鼠标按下事件
    * @param event 事件
    */
    els.soundProgress.ontouchstart = function (event) {
        U.MT.UI.Video.soundProgressMove(event, moving, els); //执行声音进度条拖动函数
    };

    /**
    * 视频播放事件，用于设置播放按钮与启动刷新
    */
    els.video.onplay = function () {
        els.playPauseBtn.className = "U_MT_UI_Video_PlayPauseButton U_MT_UI_Video_PauseIcon"; //设置class
        intervalTemp = U.MT.UI.Video.setInterval(moving, els); //开始播放，启动计时器
    };

    /**
    * 视频暂停事件，用于设置暂停按钮与停止刷新
    */
    els.video.onpause = function () {
        els.playPauseBtn.className = "U_MT_UI_Video_PlayPauseButton U_MT_UI_Video_PlayIcon"; //设置暂停按钮的icon（修改class）
        clearInterval(intervalTemp); //清除刷新的interval
    };

    /**
    * 进度条鼠标按下事件
    * @param event 事件
    */
    els.progress.ontouchstart = function (event) {
        U.MT.UI.Video.progressMove(event, moving, els); //进度条拖动函数
    };

    /**
    * 视频可以播放
    */
    els.video.oncanplay = function () {
        U.MT.UI.Video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息//刷新信息
    };

    /**
    * 静音按钮事件函数
    */
    els.soundControls.onclick = function () {
        volumeTemp = U.MT.UI.Video.muteClick(els, volumeTemp, moving);
    };

    /**
    * 控制栏显示/隐藏控制
    */
    els.videoDiv.onclick = function () {
        U.MT.UI.Video.displayControls(event, els);
    };
};

/**
* 让控制栏可以隐藏
* @param event 视频点击事件
* @param els 元素集合
*/
U.MT.UI.Video.displayControls = function (event, els) {
    var _target = event.target; //获取目标
    if (_target === els.video || _target === els.videoDiv) {//判断目标点击后是否可以隐藏/显示
        if (els.controls.style.display === "none") {//如果已设置隐藏状态则显示
            els.controls.style.display = "block";
        } else {//否则隐藏控制栏
            els.controls.style.display = "none";
        }
    }
};

/**
* 静音按钮单击
* @param els 元素集合
* @param volumeTemp 临时音量
* @param moving 是否正在移动
* @returns {*} 返回修改后的临时音量
*/
U.MT.UI.Video.muteClick = function (els, volumeTemp, moving) {
    if (els.video.volume !== 0) {//音量非零，静音
        volumeTemp = els.video.volume; //记录当前音量
        els.video.volume = 0; //静音
        U.MT.UI.Video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息//刷新数据
    } else if (els.video.volume === 0 && volumeTemp !== null) {//如果音量等于0（即静音），且用户没有按过静音键
        els.video.volume = volumeTemp; //设置音量
        volumeTemp = null; //将变量值重置
        U.MT.UI.Video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息//刷新数据
    }
    return volumeTemp;
};

/**
* 暂停开始按钮单击
* @param event 事件
* @param els 元素集合
*/
U.MT.UI.Video.playPauseBtnClick = function (event, els) {
    var _el = event.target; //获取到按钮本身
    if (_el.className === "U_MT_UI_Video_PlayPauseButton U_MT_UI_Video_PlayIcon") {//暂停状态
        els.video.play(); //开始播放
    } else {//播放状态
        els.video.pause(); //暂停播放
    }
};

/**
* 全屏按钮点击事件
* @param fullscreen 是否全屏
* @param els 元素集合
*/
U.MT.UI.Video.fullscreenClick = function (fullscreen, els) {
    if (!fullscreen) {//如果不在全屏状态
        if (els.videoDiv.requestFullScreen) {//w3请求全屏
            els.videoDiv.requestFullScreen(); //w3请求全屏
        }
        else if (els.videoDiv.webkitRequestFullScreen) {//webkit请求全屏
            els.videoDiv.webkitRequestFullScreen(); //webkit请求全屏
        }
        else if (els.videoDiv.mozRequestFullScreen) {//moz请求全屏
            els.videoDiv.mozRequestFullScreen(); //moz请求全屏
        }
    } else {
        if (document.exitFullScreen) {//w3退出全屏
            document.exitFullScreen(); //w3退出全屏
        }
        else if (document.webkitCancelFullScreen) {//webkit退出全屏
            document.webkitCancelFullScreen(); //webkit退出全屏
        }
        else if (document.webkitExitFullscreen) {//webkit退出全屏
            document.webkitExitFullscreen(); //webkit退出全屏
        }
        else if (document.mozExitFullScreen) {//moz退出全屏
            document.mozExitFullScreen(); //moz退出全屏
        }
    }
};

/**
* 全屏状态改变事件
* @param fullscreen 记录是否全屏
* @param tempHeight 临时高度
* @param els 元素集合
* @returns {*[]} 返回部分修改后的变量
*/
U.MT.UI.Video.fullscreenChange = function (fullscreen, tempHeight, els) {
    if (!fullscreen) {//如果没全屏
        tempHeight = els.videoDiv.offsetHeight + "px"; //记录当前高度（恢复用）
        els.videoDiv.style.height = "100vh"; //设置覆盖网页
        els.videoDiv.style.width = "100vw"; //设置覆盖网页
        els.videoDiv.style.position = "absolute"; //设置绝对定位
        els.videoDiv.style.top = "0"; //放置最上
        els.videoDiv.style.left = "0"; //放置最左
        els.videoDiv.style.zIndex = "999"; //放置顶层
    } else {
        els.videoDiv.style.height = tempHeight; //恢复高度
        els.videoDiv.style.width = "100%"; //恢复宽度
        els.videoDiv.style.position = ""; //清除绝对定位
        els.videoDiv.style.top = ""; //清除top
        els.videoDiv.style.left = ""; //清除left
        els.videoDiv.style.zIndex = ""; //清除zindex
    }
    fullscreen = !fullscreen; //更改全屏状态
    return [fullscreen, tempHeight];
};

/**
* 时间格式化（数字秒转换成00:00的格式）
* @param time 待转换的时间（秒） 例:30
* @returns {string} 返回的时间  例:00:30
*/
U.MT.UI.Video.timeFormat = function (time) {
    var _sec = parseInt(time % 60); //计算秒
    var _min = parseInt(parseInt(time) / 60); //计算分钟
    (_sec < 10) ? _sec = "0" + _sec : _sec; //秒补零
    (_min < 10) ? _min = "0" + _min : _min; //分钟补零
    return _min + ":" + _sec; //返回生成的时间
};

/**
* 刷新数据
* @param moving 是否正在移动（用于判断要不要刷新）
* @param currentTimeDiv 当前时间元素
* @param DurationDiv 视频总长度元素
* @param progressCurrentTime 进度条当前长度
* @param soundProgressCurrent 音量当前长度
* @param video 视频元素
*/
U.MT.UI.Video.flushInfo = function (moving, currentTimeDiv, DurationDiv, progressCurrentTime, soundProgressCurrent, video) {
    if (moving) return; //如果在拖动则不刷新
    currentTimeDiv.innerHTML = U.MT.UI.Video.timeFormat(video.currentTime); //当前时间刷新
    DurationDiv.innerHTML = U.MT.UI.Video.timeFormat(video.duration); //视频总长度刷新
    progressCurrentTime.style.width = video.currentTime / video.duration * 100 + "%"; //进度条刷新
    soundProgressCurrent.style.width = video.volume * 100 + "%"; //音量刷新
};

/**
* 循环刷新信息
* @param _moving 是否正在移动
* @param _els 元素
* @returns {number} interval
*/
U.MT.UI.Video.setInterval = function (_moving, _els) {
    return setInterval(function () {//设置定时器
        U.MT.UI.Video.flushInfo(_moving, _els.currentTimeDiv, _els.DurationDiv, _els.progressCurrentTime, _els.soundProgressCurrent, _els.video); //刷新信息
    }, 500); //每半秒刷新一次
};

/**
* 获取当前元素左边到屏幕最左边的距离
* @param el 元素
* @returns {number} 返回距离（不包括单位）
*/
U.MT.UI.Video.getScreenLeft = function (el) {
    var _rtnLeft = el.offsetLeft; //定义一个左边长度
    var _parent = el.offsetParent; //定义这个元素的父元素
    while (_parent != null) {//如果父元素不为空，则进入循环
        _rtnLeft += _parent.offsetLeft; //记录左边距离
        _parent = _parent.offsetParent; //重新定义父元素
    }
    return _rtnLeft; //返回距离
};

/**
* 进度条拖动函数
* @param event 事件
* @param moving 是否正在移动
* @param els 元素集合
*/
U.MT.UI.Video.progressMove = function (event, moving, els) {//部分注释见move函数
    // event.stopPropagation();//停止事件的传播
    // event.preventDefault();//取消事件的默认动作
    if (event.target.className === "U_MT_UI_Video_ProgressCircle") {
        return;
    }
    var _e = event; //事件
    var _content = els.progress; //进度条元素
    var _startX = _e.touches[0].clientX; //设置一个开始的点
    var _currentProgress = els.progressCurrentTime; //进度条实际进度元素
    var _x = event.touches[0].clientX - U.MT.UI.Video.getScreenLeft(els.progress); //相对于进度条的x点
    var _length = _content.offsetWidth; //进度条的长度
    els.video.currentTime = els.video.duration * (_x / _length); //计算出视频的时间并设置
    U.MT.UI.Video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息//刷新数据
    els.videoDiv.ontouchmove = function (e) {//点击移动函数
        e.stopPropagation(); //停止事件的传播
        e.preventDefault(); //取消事件的默认动作
        if (e.touches[0].clientX - U.MT.UI.Video.getScreenLeft(els.progress) < 0 || e.touches[0].clientX - U.MT.UI.Video.getScreenLeft(els.progress) > els.progress.offsetWidth) {//判断是否可以移动
            return;
        }
        moving = true; //设置移动状态
        var _iL = e.touches[0].clientX - _startX; //移动距离
        if (!(_currentProgress.offsetWidth + _iL > els.progress.offsetWidth || _currentProgress.offsetWidth + _iL < 0)) {//根据移动距离判断是否可以移动
            _currentProgress.style.width = (_currentProgress.offsetWidth + _iL) / els.progress.offsetWidth * 100 + "%"; //当前进度条设置样式
            els.video.currentTime = (_currentProgress.offsetWidth + _iL) / els.progress.offsetWidth * els.video.duration; //设置视频时间
        }
        _startX = e.touches[0].clientX; //重置开始的点
    };
    els.videoDiv.ontouchend = function (event) {//点击结束事件
        event.stopPropagation(); //停止事件的传播
        event.preventDefault(); //取消事件的默认动作
        moving = false; //设置移动事件
        els.videoDiv.ontouchmove = function () {//清除点击移动事件
        };
        els.videoDiv.ontouchend = function () {//清除点击结束事件
        };
    };
};

/**
* 声音进度条拖动函数
* @param event 事件
* @param moving 是否正在移动
* @param els 元素集合
*/
U.MT.UI.Video.soundProgressMove = function (event, moving, els) {
    event.stopPropagation(); //停止事件的传播
    event.preventDefault(); //取消事件的默认动作
    var _e = event; //事件
    var _content = els.soundProgress; //声音进度条
    var _startX = _e.touches[0].clientX; //开始的点
    var _currentSound = els.soundProgressCurrent; //当前音量元素
    var _x = event.touches[0].clientX - U.MT.UI.Video.getScreenLeft(els.soundProgress); //记录鼠标相对于音量进度条的x位置
    var _length = _content.offsetWidth; //进度条长度
    els.video.volume = _x / _length; //设置音量
    U.MT.UI.Video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息//刷新数据
    els.videoDiv.ontouchmove = function (e) {//点击移动函数
        e.stopPropagation(); //停止事件的传播
        e.preventDefault(); //取消事件的默认动作
        if (e.touches[0].clientX - U.MT.UI.Video.getScreenLeft(els.soundProgress) < 0 || e.touches[0].clientX - U.MT.UI.Video.getScreenLeft(els.soundProgress) > els.soundProgress.offsetWidth) {//判断是否可以移动
            return;
        }
        var _iL = e.touches[0].clientX - _startX; //移动的距离
        if (!(_currentSound.offsetWidth + _iL > _content.offsetWidth || _currentSound.offsetWidth + _iL < 0)) {//根据移动的距离判断是否可以移动
            _currentSound.style.width = (_currentSound.offsetWidth + _iL) / _content.offsetWidth * 100 + "%"; //设置音量条样式
            els.video.volume = (_currentSound.offsetWidth) / _content.offsetWidth; //设置音量
        }
        _startX = e.touches[0].clientX; //重置开始的点
    };
    els.videoDiv.ontouchend = function (e) {//点击结束事件（鼠标移开屏幕）
        e.stopPropagation(); //停止事件的传播
        e.preventDefault(); //取消事件的默认动作
        moving = false; //设置移动状态
        els.videoDiv.ontouchmove = function () {//清除移动函数
        };
        els.videoDiv.ontouchend = function () {//清除点击结束函数
        };
    };
};

/**
* 进度条移动函数（圆点）
* @param event 事件
* @param moving 是否正在移动
* @param els 元素集合
*/
U.MT.UI.Video.circleMove = function (event, moving, els) {
    moving = true; //设置移动状态
    var _e = event; //事件
    var _content = els.progressCircle; //获取目标
    var _startX = _e.touches[0].clientX; //设置开始的点
    var _currentProgress = _content.parentElement; //实际进度条元素
    var _progress = _currentProgress.parentElement; //进度条元素
    els.videoDiv.ontouchmove = function (e) {//点击移动事件
        e.stopPropagation(); //停止事件的传播
        e.preventDefault(); //取消事件的默认动作
        if (e.touches[0].clientX - U.MT.UI.Video.getScreenLeft(_progress) < 0 || e.touches[0].clientX - U.MT.UI.Video.getScreenLeft(_progress) > _progress.offsetWidth) {//判断是否在可移动范围内
            return;
        }
        var _iL = e.touches[0].clientX - _startX; //移动的距离
        //根据实际进度与进度条长度对比进行判断
        if (!(_currentProgress.offsetWidth + _iL > _progress.offsetWidth || _currentProgress.offsetWidth + _iL < 0) && (e.currentTarget.children[0].offsetWidth <= e.currentTarget.children[0].offsetWidth)) {
            //设置进度条位置
            _currentProgress.style.width = (_currentProgress.offsetWidth + _iL) / _progress.offsetWidth * 100 + "%";
            //设置视频位置
            els.video.currentTime = (_currentProgress.offsetWidth + _iL) / _progress.offsetWidth * els.video.duration;
        }
        _startX = e.touches[0].clientX; //重新设置起点
    };
    els.videoDiv.ontouchend = function () {//清除事件
        event.stopPropagation(); //停止事件的传播
        event.preventDefault(); //取消事件的默认动作
        _moving = false; //设置移动状态
        els.videoDiv.ontouchmove = function () {//清除点击移动函数
        };
        els.videoDiv.ontouchend = function () {//清除点击结束函数
        };
    };
};