123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471 |
- Namespace.register("U.MD.UI.video");
- U.MD.UI.video = function (src, width, height, autoplay, parent) {
- var _autoplay = autoplay || false;
- var _intervalTemp = null;
- var _volumeTemp = null;
- var _moving = false;
- var _tempHeight = "";
- var _tempWidth = "";
- var _fullscreen = false;
-
- var _els = U.MD.UI.video.appendEle(src, width, height, _autoplay, parent);
-
- U.MD.UI.video.addEvent(_els, _intervalTemp, _volumeTemp, _moving, height, width, _fullscreen);
- return _els;
- };
- U.MD.UI.video.appendEle = function (src, width, height, autoplay, parent) {
- var els = {};
-
- els.videoDiv = $$("div", { "className": "U_MD_UI_video_VideoDiv", "style": { "width": width + "px", "height": height + "px"} }, parent);
-
- els.video = $$("video", {
- "src": src,
- "className": "U_MD_UI_video_VideoMain",
- "autoplay": autoplay,
- "preload": "auto"
- }, els.videoDiv);
-
- els.controls = $$("div", { "className": "U_MD_UI_video_VideoControls" }, els.videoDiv);
-
- els.playPauseBtn = $$("div", { "className": "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PlayIcon" }, els.controls);
-
- els.currentTimeDiv = $$("div", { "className": "U_MD_UI_video_Time", "innerHTML": "00:00" }, els.controls);
-
- els.progress = $$("div", { "className": "U_MD_UI_video_Progress" }, els.controls);
-
- els.progressCurrentTime = $$("div", { "className": "U_MD_UI_video_ProgressCurrentTime" }, els.progress);
-
- els.progressCircle = $$("div", { "className": "U_MD_UI_video_ProgressCircle" }, els.progressCurrentTime);
-
- els.DurationDiv = $$("div", {
- "className": "U_MD_UI_video_Time",
- "innerHTML": "00:00",
- "onselectstart": "return false;"
- }, els.controls);
-
- els.soundControls = $$("div", { "className": "U_MD_UI_video_SoundControls" }, els.controls);
-
- els.soundProgress = $$("div", { "className": "U_MD_UI_video_SoundProgress" }, els.controls);
-
- els.soundProgressCurrent = $$("div", { "className": "U_MD_UI_video_SoundProgressCurrent", "style": { "width": "100%"} }, els.soundProgress);
-
- els.fullScreenBtn = $$("div", { "className": "U_MD_UI_video_FullScreen" }, els.controls);
- return els;
- };
- U.MD.UI.video.addEvent = function (els, intervalTemp, volumeTemp, moving, tempHeight, tempWidth, fullscreen) {
-
- els.playPauseBtn.onclick = function (event) {
- U.MD.UI.playPauseBtnClick(event, els);
- };
- if (els.videoDiv.onwebkitfullscreenchange !== undefined) {
- els.videoDiv.onwebkitfullscreenchange = function () {
- var rtn = U.MD.UI.video.fullscreenChange(fullscreen, tempHeight, tempWidth, els);
- fullscreen = rtn[0];
- tempHeight = rtn[1];
- tempWidth = rtn[2];
- }
- }
- else if (els.videoDiv.onfullscreenchange !== undefined) {
- els.videoDiv.onfullscreenchange = function () {
- var rtn = U.MD.UI.video.fullscreenChange(fullscreen, tempHeight, tempWidth, els);
- fullscreen = rtn[0];
- tempHeight = rtn[1];
- tempWidth = rtn[2];
- }
- } else if (els.videoDiv.onmozfullscreenchange !== undefined) {
- els.videoDiv.onmozfullscreenchange = function () {
- var rtn = U.MD.UI.video.fullscreenChange(fullscreen, tempHeight, tempWidth, els);
- fullscreen = rtn[0];
- tempHeight = rtn[1];
- tempWidth = rtn[2];
- }
- }
-
- els.fullScreenBtn.onclick = function () {
- U.MD.UI.video.fullscreenClick(fullscreen, els);
- };
-
- els.progressCircle.onmousedown = function (event) {
- U.MD.UI.video.circleMove(event, moving, els);
- };
-
- els.soundProgress.onmousedown = function (event) {
- U.MD.UI.video.soundProgressMove(event, els, moving);
- };
-
- els.progress.onmousedown = function (event) {
- U.MD.UI.video.progressMove(event, els, moving);
- };
-
- els.video.onpause = function () {
- els.playPauseBtn.className = "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PlayIcon";
- clearInterval(intervalTemp);
- };
-
- els.video.onplay = function () {
- els.playPauseBtn.className = "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PauseIcon";
- intervalTemp = U.MD.UI.video.setInterval(moving, els);
- };
-
- els.video.oncanplay = function () {
- U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video);
- };
-
- els.soundControls.onclick = function () {
- volumeTemp = U.MD.UI.video.muteClick(els, volumeTemp, moving);
- };
-
- els.videoDiv.onclick = function () {
-
- };
- };
- U.MD.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";
- }
- }
- };
- U.MD.UI.playPauseBtnClick = function (event, els) {
- var _el = event.target;
- if (_el.className === "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PlayIcon") {
- els.video.play();
- }
- else {
- els.video.pause();
- }
- };
- U.MD.UI.video.muteClick = function (els, volumeTemp, moving) {
- if (els.video.volume !== 0) {
- volumeTemp = els.video.volume;
- els.video.volume = 0;
- U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video);
- } else if (els.video.volume === 0 && volumeTemp !== null) {
- els.video.volume = volumeTemp;
- volumeTemp = null;
- U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video);
- }
- return volumeTemp;
- };
- U.MD.UI.video.fullscreenClick = function (fullscreen, els) {
- if (!fullscreen) {
- if (els.videoDiv.requestFullScreen) {
- els.videoDiv.requestFullScreen();
- }
- else if (els.videoDiv.webkitRequestFullScreen) {
- els.videoDiv.webkitRequestFullScreen();
- }
- else if (els.videoDiv.mozRequestFullScreen) {
- els.videoDiv.mozRequestFullScreen();
- }
- } else {
- if (document.exitFullScreen) {
- document.exitFullScreen();
- }
- else if (document.webkitCancelFullScreen) {
- document.webkitCancelFullScreen();
- }
- else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- }
- else if (document.mozExitFullScreen) {
- document.mozExitFullScreen();
- }
- }
- };
- U.MD.UI.video.fullscreenChange = function (fullscreen, tempHeight, tempWidth, els) {
- if (!fullscreen) {
-
-
- 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 + "px";
- els.videoDiv.style.width = tempWidth + "px";
- els.videoDiv.style.position = "";
- els.videoDiv.style.top = "";
- els.videoDiv.style.left = "";
- els.videoDiv.style.zIndex = "";
- }
- fullscreen = !fullscreen;
- return [fullscreen, tempHeight, tempWidth];
- };
- U.MD.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;
- };
- U.MD.UI.video.flushInfo = function (moving, currentTimeDiv, DurationDiv, progressCurrentTime, soundProgressCurrent, video) {
- if (moving) return;
- currentTimeDiv.innerHTML = U.MD.UI.video.timeFormat(video.currentTime);
- DurationDiv.innerHTML = U.MD.UI.video.timeFormat(video.duration);
- progressCurrentTime.style.width = video.currentTime / video.duration * 100 + "%";
- soundProgressCurrent.style.width = video.volume * 100 + "%";
- };
- U.MD.UI.video.getScreenLeft = function (el) {
- var _rtnLeft = el.offsetLeft;
- var _parent = el.offsetParent;
- while (_parent != null) {
- _rtnLeft += _parent.offsetLeft;
- _parent = _parent.offsetParent;
- }
- return _rtnLeft;
- };
- U.MD.UI.video.setInterval = function (_moving, _els) {
- return setInterval(function () {
- U.MD.UI.video.flushInfo(_moving, _els.currentTimeDiv, _els.DurationDiv, _els.progressCurrentTime, _els.soundProgressCurrent, _els.video);
- }, 500);
- };
- U.MD.UI.video.circleMove = function (event, moving, els) {
- moving = true;
- var _e = event;
- var _content = event.currentTarget;
- var _startX = _e.pageX;
- var _currentProgress = _content.parentElement;
- var _progress = _currentProgress.parentElement;
- els.videoDiv.onmousemove = function (e) {
- if (e.pageX - U.MD.UI.video.getScreenLeft(_progress) < 0 || e.pageX - U.MD.UI.video.getScreenLeft(_progress) > _progress.offsetWidth) {
- return;
- }
- var _iL = e.pageX - _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.pageX;
- };
- els.videoDiv.onmouseup = function () {
- moving = false;
- els.videoDiv.onmousemove = function () {
- };
- els.videoDiv.onmouseup = function () {
- };
- };
- };
- U.MD.UI.video.soundProgressMove = function (event, els, moving) {
- event.preventDefault();
- var _e = event;
- var _content = event.currentTarget;
- var _startX = _e.pageX;
- var _currentSound = els.soundProgressCurrent;
- var _x = event.offsetX;
- var _length = _content.offsetWidth;
- els.video.volume = _x / _length;
- U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video);
-
- els.videoDiv.onmousemove = function (e) {
- if (e.pageX - U.MD.UI.video.getScreenLeft(els.soundProgress) < 0 || e.pageX - U.MD.UI.video.getScreenLeft(els.soundProgress) > els.soundProgress.offsetWidth) {
- return;
- }
- var _iL = e.pageX - _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.pageX;
- };
- els.videoDiv.onmouseup = function (e) {
- els.videoDiv.onmousemove = function () {
- };
- els.videoDiv.onmouseup = function () {
- };
- };
- };
- U.MD.UI.video.progressMove = function (event, els, moving) {
- event.preventDefault();
- if (event.target.className === "U_MD_UI_video_ProgressCircle") {
- return;
- }
- var _e = event;
- var _content = U.selectEl(".U_MD_UI_video_Progress")[0]
- var _startX = _e.pageX;
- var _currentProgress = els.progressCurrentTime;
- var _x = event.layerX || event.offsetX;
- var _length = _content.offsetWidth;
- els.video.currentTime = els.video.duration * (_x / _length);
- U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video);
-
- els.videoDiv.onmouseup = function () {
- moving = false;
- U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video);
- els.videoDiv.onmousemove = function () {
- };
- els.videoDiv.onmouseup = function () {
- };
- };
- };
|