"use strict"; (self["webpackChunk"] = self["webpackChunk"] || []).push([[64716],{ /***/ 64716: /*!*********************************************************!*\ !*** ./src/components/Video/Play/index.jsx + 1 modules ***! \*********************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { // EXPORTS __webpack_require__.d(__webpack_exports__, { Z: function() { return /* binding */ Play; } }); // EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.2@@babel/runtime/helpers/slicedToArray.js var slicedToArray = __webpack_require__(11006); var slicedToArray_default = /*#__PURE__*/__webpack_require__.n(slicedToArray); // EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.2@@babel/runtime/helpers/regeneratorRuntime.js var regeneratorRuntime = __webpack_require__(10574); var regeneratorRuntime_default = /*#__PURE__*/__webpack_require__.n(regeneratorRuntime); // EXTERNAL MODULE: ./node_modules/_@babel_runtime@7.23.2@@babel/runtime/helpers/asyncToGenerator.js var asyncToGenerator = __webpack_require__(39343); var asyncToGenerator_default = /*#__PURE__*/__webpack_require__.n(asyncToGenerator); // EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/index.js var _react_17_0_2_react = __webpack_require__(59301); // EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/message/index.js + 4 modules var message = __webpack_require__(8591); // EXTERNAL MODULE: ./node_modules/_antd@5.9.0@antd/es/dropdown/index.js + 1 modules var dropdown = __webpack_require__(38854); // EXTERNAL MODULE: ./node_modules/_flv.js@1.5.0@flv.js/src/flv.js + 38 modules var flv = __webpack_require__(71507); // EXTERNAL MODULE: ./node_modules/_hls.js@1.4.12@hls.js/dist/hls.mjs var dist_hls = __webpack_require__(36775); // EXTERNAL MODULE: ./src/utils/authority.ts var authority = __webpack_require__(71633); // EXTERNAL MODULE: ./node_modules/_react-copy-to-clipboard@5.0.2@react-copy-to-clipboard/lib/index.js var lib = __webpack_require__(56102); // EXTERNAL MODULE: ./src/utils/fullscreen.ts var fullscreen = __webpack_require__(57616); ;// CONCATENATED MODULE: ./src/components/Video/Play/index.less?modules // extracted by mini-css-extract-plugin /* harmony default export */ var Playmodules = ({"watermark":"watermark___hNYlv","videovideo":"videovideo___ovOkV","animate__loop":"animate__loop___mvL6s","upDown":"upDown___SlgHv","container":"container___g1WYG","video-container":"video-container___XPkWR","video-controls":"video-controls___to0Zq","hide":"hide___NA3DV","video-progress":"video-progress___gqHsd","seek":"seek___iZHBm","seek-tooltip":"seek-tooltip___uWyXx","bottom-controls":"bottom-controls___uoIBm","left-controls":"left-controls___mBEx4","right-controls":"right-controls___e9L6r","rateOverlay":"rateOverlay___HHBWe","controlText":"controlText___M_BWR","volume-controls":"volume-controls___fa3mE","fullscreen-button":"fullscreen-button___ur0es","fullscreen-button1":"fullscreen-button1___rfaXm","pip-button":"pip-button___GFO8W","playback-animation":"playback-animation___ndURq","volume":"volume___OTmpP","hidden":"hidden___o7GkT"}); // EXTERNAL MODULE: ./node_modules/_react@17.0.2@react/jsx-runtime.js var jsx_runtime = __webpack_require__(37712); ;// CONCATENATED MODULE: ./src/components/Video/Play/index.jsx function formatTime(timeInSeconds) { if (isNaN(timeInSeconds)) { return { minutes: '00', seconds: '00' }; } var result = new Date(timeInSeconds * 1000).toISOString().substr(11, 8); return { hour: result.substr(0, 2), minutes: result.substr(3, 2), seconds: result.substr(6, 2) }; } Object.defineProperty(HTMLMediaElement.prototype, 'playing', { get: function get() { return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); } }); function compareNumbers(a, b) { return a - b; } function getTotalEffectTime(pos) { pos.sort(compareNumbers); var sum = 0; for (var i = 0; i < pos.length - 1; i++) { var v = Math.abs(pos[i + 1] - pos[i]); if (v < 21) { sum += v; } } return sum; } var regex = /(android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini)/i; //接口文档 https://www.showdoc.cc/educoder?page_id=4029884447803706 /* harmony default export */ var Play = (/*#__PURE__*/(0,_react_17_0_2_react.forwardRef)(function (_ref, ref) { var _src, _src2; var allow_skip = _ref.allow_skip, src = _ref.src, toLog = _ref.toLog, videoId = _ref.videoId, logWatchHistory = _ref.logWatchHistory, _ref$courseId = _ref.courseId, courseId = _ref$courseId === void 0 ? null : _ref$courseId, startTime = _ref.startTime, _ref$handlePause = _ref.handlePause, handlePause = _ref$handlePause === void 0 ? function () {} : _ref$handlePause, _ref$handlePlay = _ref.handlePlay, handlePlay = _ref$handlePlay === void 0 ? function () {} : _ref$handlePlay, _ref$handlePlayEnded = _ref.handlePlayEnded, handlePlayEnded = _ref$handlePlayEnded === void 0 ? function () {} : _ref$handlePlayEnded, _ref$autoPlay = _ref.autoPlay, autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay, _ref$onPlayEnded = _ref.onPlayEnded, onPlayEnded = _ref$onPlayEnded === void 0 ? function () {} : _ref$onPlayEnded; src = (_src = src) === null || _src === void 0 ? void 0 : _src.replace('http://', 'https://'); var suf = (_src2 = src) === null || _src2 === void 0 || (_src2 = _src2.split('.')) === null || _src2 === void 0 ? void 0 : _src2.pop(); var isFlv = suf === 'flv'; var el = (0,_react_17_0_2_react.useRef)(); var watermarkRef = (0,_react_17_0_2_react.useRef)(); var warpEl = (0,_react_17_0_2_react.useRef)(); var pauseIcon = (0,_react_17_0_2_react.useRef)(); var playIcon = (0,_react_17_0_2_react.useRef)(); var seekEl = (0,_react_17_0_2_react.useRef)(); var progressBarEl = (0,_react_17_0_2_react.useRef)(); var durationEl = (0,_react_17_0_2_react.useRef)(); var timeElapsedEl = (0,_react_17_0_2_react.useRef)(); var seekTooltipEl = (0,_react_17_0_2_react.useRef)(); var noMuteVolEl = (0,_react_17_0_2_react.useRef)(); var highVolEl = (0,_react_17_0_2_react.useRef)(); var lowVolEl = (0,_react_17_0_2_react.useRef)(); var volumeEl = (0,_react_17_0_2_react.useRef)(); var deviceMatch = navigator.userAgent.toLowerCase().match(regex); var device = deviceMatch ? deviceMatch[0] : 'pc'; var firstOnPlayFlag = (0,_react_17_0_2_react.useRef)(false); var user = (0,authority/* userInfo */.eY)(); var totalDuration = 0; var sumTimePlayed = 0; var lastUpdatedTime = 0; var logId = null; var initLog = false; var timeTick = 20; //记录频率 默认20s var logCount = 1; var isLoging = false; var isSeeking = false; var pos = []; //播放时间点集 (0,_react_17_0_2_react.useImperativeHandle)(ref, function () { return { getLastUpdatedTime: function getLastUpdatedTime() { return el.current.currentTime; }, getDuration: function getDuration() { return el.current.duration; } }; }); message/* default */.ZP.config({ maxCount: 1, getContainer: function getContainer() { return warpEl.current; } }); var log = (0,_react_17_0_2_react.useCallback)(function (callback) { var isEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var params = { point: el.current.currentTime }; if (logId) { params['log_id'] = logId; params['watch_duration'] = getTotalEffectTime(pos); //当前观看视频时长,拖放进度条,重复的视频片段观看时,不会把重复的时长累积进来,最大时长是视频的总时长 params['total_duration'] = sumTimePlayed; //累计观看视频时长,拖放进度条,重复的视频片段观看时,重复观看时长要累积进来 } else { if (courseId) { params['video_id'] = parseInt(videoId, 10); params['course_id'] = courseId; } else { params['video_id'] = videoId; } params['duration'] = totalDuration; params['device'] = device; } if (isEnd) { params['ed'] = '1'; } function getLogId() { return _getLogId.apply(this, arguments); } function _getLogId() { _getLogId = asyncToGenerator_default()( /*#__PURE__*/regeneratorRuntime_default()().mark(function _callee() { var id; return regeneratorRuntime_default()().wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: isLoging = true; _context.next = 3; return logWatchHistory === null || logWatchHistory === void 0 ? void 0 : logWatchHistory(params); case 3: id = _context.sent; logId = id; isLoging = false; if (callback) { callback(); } case 7: case "end": return _context.stop(); } }, _callee); })); return _getLogId.apply(this, arguments); } getLogId(); }, [videoId, courseId]); (0,_react_17_0_2_react.useEffect)(function () { var _src3; if (el.current) { pauseIcon.current.style.display = 'none'; playIcon.current.style.display = 'block'; } message/* default */.ZP.destroy(); var player = null; if (flv/* default */.Z.isSupported && isFlv && src && ((_src3 = src) === null || _src3 === void 0 ? void 0 : _src3.indexOf('.m3u8')) < 0) { player = flv/* default */.Z.createPlayer({ type: 'flv', volume: 0.8, cors: true, url: src, muted: false }); if (el.current) { player.attachMediaElement(el.current); player.load(); } } else { el.current.setAttribute('src', src); } updateVolumeIcon(); return function () { if (player) { player.unload(); player.pause(); player.destroy(); player = null; } }; }, [el, isFlv, src]); function playIconStatus() { if (el.current.paused) { pauseIcon.current.style.display = 'none'; playIcon.current.style.display = 'block'; } else { pauseIcon.current.style.display = 'block'; playIcon.current.style.display = 'none'; } } function updateVolumeIcon() { noMuteVolEl.current.style.display = 'none'; lowVolEl.current.style.display = 'none'; highVolEl.current.style.display = 'none'; if (el.current.muted || el.current.volume === 0) { noMuteVolEl.current.style.display = 'block'; } else if (el.current.volume > 0 && el.current.volume <= 0.5) { lowVolEl.current.style.display = 'block'; } else { highVolEl.current.style.display = 'block'; } } (0,_react_17_0_2_react.useEffect)(function () { var playButton = document.getElementById('play'); var playbackIcons = document.querySelectorAll('.playback-icons use'); function onPlay() { handlePlay(); if (startTime && !firstOnPlayFlag.current) { el.current.currentTime = startTime; } firstOnPlayFlag.current = true; pos.push(el.current.currentTime); if (!initLog) { initLog = true; if (toLog) { log(); } } } //循环播放, 累计时长不能清空 function onEnded() { return _onEnded.apply(this, arguments); } function _onEnded() { _onEnded = asyncToGenerator_default()( /*#__PURE__*/regeneratorRuntime_default()().mark(function _callee2() { return regeneratorRuntime_default()().wrap(function _callee2$(_context2) { while (1) switch (_context2.prev = _context2.next) { case 0: playIconStatus(); pos.push(el.current.currentTime); if (toLog) { log(function () { logId = null; lastUpdatedTime = 0; initLog = false; isLoging = false; isSeeking = false; pos = []; //有效时长重新累计,算新的一遍 sumTimePlayed = 0; logCount = 1; }, true); } onPlayEnded(); case 4: case "end": return _context2.stop(); } }, _callee2); })); return _onEnded.apply(this, arguments); } function updateProgress() { // seekEl.current.value = Math.floor(el.current.currentTime); // progressBarEl.current.value = Math.floor(el.current.currentTime); seekEl.current.value = Math.round(el.current.currentTime); progressBarEl.current.value = Math.round(el.current.currentTime); } function updateTimeElapsed() { var time = formatTime(Math.round(el.current.currentTime)); timeElapsedEl.current.innerText = "".concat(time.hour > 0 ? time.hour + ':' : '').concat(time.minutes, ":").concat(time.seconds); timeElapsedEl.current.setAttribute('datetime', "".concat(time.hour > 0 ? ' ' + time.hour + ' ' : '').concat(time.minutes, "m ").concat(time.seconds, "s")); } function initializeVideo() { var videoDuration = Math.round(el.current.duration); seekEl.current.setAttribute('max', videoDuration); progressBarEl.current.setAttribute('max', videoDuration); var time = formatTime(videoDuration); durationEl.current.innerText = "".concat(time.hour > 0 ? time.hour + ':' : '').concat(time.minutes, ":").concat(time.seconds); durationEl.current.setAttribute('datetime', "".concat(time.hour > 0 ? ' ' + time.hour + ' ' : '').concat(time.minutes, "m ").concat(time.seconds, "s")); } function onTimeupdate() { try { var videoDuration = Math.round(el.current.duration); seekEl.current.setAttribute('max', videoDuration); progressBarEl.current.setAttribute('max', videoDuration); var time = formatTime(videoDuration); durationEl.current.innerText = "".concat(time.hour > 0 ? time.hour + ':' : '').concat(time.minutes, ":").concat(time.seconds); durationEl.current.setAttribute('datetime', "".concat(time.hour > 0 ? ' ' + time.hour + ' ' : '').concat(time.minutes, "m ").concat(time.seconds, "s")); updateProgress(); updateTimeElapsed(); var _watermarkRef$current = watermarkRef.current.getBoundingClientRect(), width = _watermarkRef$current.width, height = _watermarkRef$current.height, x = _watermarkRef$current.x, y = _watermarkRef$current.y; if (x < 0 || y < 0 || !width) { // el.current.src = ''; // el.current.pause(); // message.warning({ // content: '当前操作非法,已禁止观看视频', // key: 'watermarkRef', // }); return; } if (!isSeeking) { var newTime = el.current.currentTime; var timeDiff = newTime - lastUpdatedTime; //currenttime update before Seeking & Seeked fired if (Math.abs(timeDiff) < 10) { sumTimePlayed += Math.abs(timeDiff); lastUpdatedTime = newTime; if (!isLoging) { if (sumTimePlayed - logCount * timeTick >= 0) { logCount++; pos.push(lastUpdatedTime); if (toLog) { log(); } } } } else { lastUpdatedTime = newTime; if (toLog) { log(); } } } } catch (error) { console.log(error); } } function onSeeking() { isSeeking = true; } function onSeeked() { if (el.current.playing) { pos.push(el.current.currentTime, lastUpdatedTime); } lastUpdatedTime = el.current.currentTime; isSeeking = false; } function onCanPlay() { totalDuration = el.current.duration; if (totalDuration <= 20) { timeTick = totalDuration / 3; } el.current.addEventListener('play', onPlay); } function onFullscreenchange(e) { e.preventDefault(); if ((0,fullscreen/* IsFull */.vp)()) { el.current.style.width = '100%'; el.current.style.height = '100%'; } else { el.current.style.cssText = ''; } } function onPause() { handlePause(); } function skipAhead(event) { if (!allow_skip) { message/* default */.ZP.warning('该视频禁止快进/后退播放'); return; } var skipTo = event.target.dataset.seek ? event.target.dataset.seek : event.target.value; el.current.currentTime = skipTo; progressBarEl.current.value = skipTo; seekEl.current.value = skipTo; } function updateSeekTooltip(event) { var skipTo = Math.round(event.offsetX / event.target.clientWidth * parseInt(event.target.getAttribute('max'), 10)); seekEl.current.setAttribute('data-seek', skipTo); var t = formatTime(skipTo); seekTooltipEl.current.textContent = "".concat(t.hour > 0 ? t.hour + ':' : '').concat(t.minutes, ":").concat(t.seconds); var rect = el.current.getBoundingClientRect(); seekTooltipEl.current.style.left = "".concat(event.pageX - rect.left, "px"); } function handleKeyDown(e) { switch (e.code) { case 'Space': e.preventDefault(); //除了需求相关的按键外其余的按键需要保留默认行为,所以preventDefault写在switch里面 togglePlay(); break; case 'ArrowRight': e.preventDefault(); if (!allow_skip) { message/* default */.ZP.warning('该视频禁止快进/后退播放'); break; } if (el.current.currentTime >= el.current.duration) { break; } el.current.currentTime = parseInt(el.current.currentTime) + 5; updateProgress(); break; case 'ArrowLeft': e.preventDefault(); if (!allow_skip) { message/* default */.ZP.warning('该视频禁止快进/后退播放'); break; } if (el.current.currentTime === 0) { break; } el.current.currentTime = parseInt(el.current.currentTime) - 5; updateProgress(); break; case 'ArrowUp': e.preventDefault(); if (el.current.volume < 1) { el.current.volume = (parseInt(el.current.volume * 10) + 1) / 10; } break; case 'ArrowDown': e.preventDefault(); if (el.current.volume > 0) { el.current.volume = (parseInt(el.current.volume * 10) - 1) / 10; } break; } } warpEl.current.addEventListener((0,fullscreen/* fullscreenChange */.gH)(), onFullscreenchange); el.current.addEventListener('canplay', onCanPlay); el.current.addEventListener('ended', onEnded); el.current.addEventListener('seeking', onSeeking); el.current.addEventListener('seeked', onSeeked); el.current.addEventListener('loadedmetadata', initializeVideo); seekEl.current.addEventListener('mousemove', updateSeekTooltip); seekEl.current.addEventListener('input', skipAhead); el.current.addEventListener('timeupdate', onTimeupdate); el.current.addEventListener('pause', onPause); el.current.addEventListener('volumechange', updateVolumeIcon); document.addEventListener('keydown', handleKeyDown); return function () { var _el$current, _el$current2, _el$current3, _el$current4, _el$current5, _seekEl$current, _seekEl$current2, _el$current6, _el$current7, _el$current8, _el$current9, _el$current10; (_el$current = el.current) === null || _el$current === void 0 || _el$current.removeEventListener('canplay', onCanPlay); (_el$current2 = el.current) === null || _el$current2 === void 0 || _el$current2.removeEventListener('play', onPlay); (_el$current3 = el.current) === null || _el$current3 === void 0 || _el$current3.removeEventListener('ended', onEnded); (_el$current4 = el.current) === null || _el$current4 === void 0 || _el$current4.removeEventListener('seeking', onSeeking); (_el$current5 = el.current) === null || _el$current5 === void 0 || _el$current5.removeEventListener('seeked', onSeeked); (_seekEl$current = seekEl.current) === null || _seekEl$current === void 0 || _seekEl$current.removeEventListener('mousemove', updateSeekTooltip); (_seekEl$current2 = seekEl.current) === null || _seekEl$current2 === void 0 || _seekEl$current2.removeEventListener('input', skipAhead); (_el$current6 = el.current) === null || _el$current6 === void 0 || _el$current6.removeEventListener('timeupdate', onTimeupdate); (_el$current7 = el.current) === null || _el$current7 === void 0 || _el$current7.removeEventListener('pause', onPause); (_el$current8 = el.current) === null || _el$current8 === void 0 || _el$current8.removeEventListener('loadedmetadata', initializeVideo); (_el$current9 = el.current) === null || _el$current9 === void 0 || _el$current9.removeEventListener('volumechange', updateVolumeIcon); document.removeEventListener('keydown', handleKeyDown); if ((_el$current10 = el.current) !== null && _el$current10 !== void 0 && _el$current10.playing) { pos.push(lastUpdatedTime, el.current.currentTime); if (toLog) { log(); } } }; }, [el, src]); (0,_react_17_0_2_react.useEffect)(function () { var _src4; el.current.onended = function () { handlePlayEnded(el); }; el.current.oncontextmenu = function () { return false; }; if (((_src4 = src) === null || _src4 === void 0 ? void 0 : _src4.indexOf('.m3u8')) > -1) { if (el.current.canPlayType('application/vnd.apple.mpegurl')) { el.current.src = src; } else if (dist_hls/* default */.Z.isSupported()) { var hls = new dist_hls/* default */.Z(); hls.loadSource(src); hls.attachMedia(el.current); } } }, [src]); var _useState = (0,_react_17_0_2_react.useState)(1.0), _useState2 = slicedToArray_default()(_useState, 2), videoSpeed = _useState2[0], setVideoSpeed = _useState2[1]; var togglePlay = function togglePlay() { if (el.current.paused || el.current.ended) { el.current.play(); } else { el.current.pause(); } playIconStatus(); }; function toggleMute() { el.current.muted = !el.current.muted; if (el.current.muted) { volumeEl.current.setAttribute('data-volume', volume.value); volumeEl.current.value = 0; } else { volumeEl.current.value = volumeEl.current.dataset.volume; } } return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { style: { position: 'relative' }, ref: warpEl, children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", { ref: watermarkRef, className: "".concat(Playmodules.watermark, " animated_alternate animate__animated_10s animate__infinite animate__stepstart ").concat(Playmodules.animate__loop), children: user ? user.login : ' ' }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", { className: Playmodules['container'], children: /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['video-container'], id: "video-container", children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", { className: Playmodules['playback-animation'], id: "playback-animation", children: /*#__PURE__*/(0,jsx_runtime.jsxs)("svg", { className: Playmodules['playback-icons'], children: [/*#__PURE__*/(0,jsx_runtime.jsx)("use", { className: "hidden", href: "#play-icon" }), /*#__PURE__*/(0,jsx_runtime.jsx)("use", { href: "#pause" })] }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("video", { className: Playmodules['video'], id: "video", preload: "auto", disablePictureInPicture: true, ref: el, autoPlay: autoPlay }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: "".concat(Playmodules['video-controls'], " "), id: "video-controls", children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['bottom-controls'], children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['left-controls'], children: [/*#__PURE__*/(0,jsx_runtime.jsx)("button", { "data-title": "\u64AD\u653E/\u6682\u505C", id: "play", onClick: togglePlay, children: /*#__PURE__*/(0,jsx_runtime.jsxs)("svg", { className: Playmodules['playback-icons'], children: [/*#__PURE__*/(0,jsx_runtime.jsx)("use", { ref: playIcon, href: "#play-icon" }), /*#__PURE__*/(0,jsx_runtime.jsx)("use", { ref: pauseIcon, style: { display: 'none' }, href: "#pause" })] }) }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['time'], children: [/*#__PURE__*/(0,jsx_runtime.jsx)("time", { id: "time-elapsed", ref: timeElapsedEl, children: "00:00" }), /*#__PURE__*/(0,jsx_runtime.jsx)("span", { children: " / " }), /*#__PURE__*/(0,jsx_runtime.jsx)("time", { id: "duration", ref: durationEl, children: "00:00" })] })] }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['right-controls'], children: [allow_skip && /*#__PURE__*/(0,jsx_runtime.jsx)(dropdown/* default */.Z, { placement: "top", overlayClassName: Playmodules['rateOverlay'], getPopupContainer: function getPopupContainer(trigger) { return trigger.parentNode; }, menu: { items: [{ key: '1', label: /*#__PURE__*/(0,jsx_runtime.jsx)("span", { onClick: function onClick() { setVideoSpeed(1); el.current.playbackRate = 1; }, children: "1.0x" }) }, { key: '2', label: /*#__PURE__*/(0,jsx_runtime.jsx)("span", { onClick: function onClick() { setVideoSpeed(1.5); el.current.playbackRate = 1.5; }, children: "1.5x" }) }, { key: '3', label: /*#__PURE__*/(0,jsx_runtime.jsx)("span", { onClick: function onClick() { setVideoSpeed(2); el.current.playbackRate = 2; }, children: "2.0x" }) }] }, children: /*#__PURE__*/(0,jsx_runtime.jsx)("div", { className: "".concat(Playmodules['controlText'], " mr5"), children: "\u500D\u901F" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)(lib.CopyToClipboard, { text: src, onCopy: function onCopy() { return message/* default */.ZP.success('复制成功'); }, children: /*#__PURE__*/(0,jsx_runtime.jsx)("button", { "data-title": '复制链接', children: /*#__PURE__*/(0,jsx_runtime.jsx)("i", { className: "icon-lianjie2 iconfont", style: { fontSize: '12px', color: 'white' } }) }) }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['volume-controls'], children: [/*#__PURE__*/(0,jsx_runtime.jsxs)("button", { "data-title": "\u5F00\u542F/\u5173\u95ED\u58F0\u97F3", className: Playmodules['volume-button'], id: "volume-button", onClick: toggleMute, children: [/*#__PURE__*/(0,jsx_runtime.jsx)("i", { ref: noMuteVolEl, className: "icon-a-bianzu8 iconfont", style: { fontSize: '14px', color: 'white' } }), /*#__PURE__*/(0,jsx_runtime.jsx)("i", { ref: lowVolEl, className: "icon-shengyinkaibeifen iconfont", style: { fontSize: '14px', color: 'white' } }), /*#__PURE__*/(0,jsx_runtime.jsx)("i", { ref: highVolEl, className: "icon-shengyinkai iconfont", style: { fontSize: '14px', color: 'white' } })] }), /*#__PURE__*/(0,jsx_runtime.jsx)("input", { className: Playmodules['volume'], id: "volume", value: "1", "data-mute": "0.5", type: "range", max: "1", min: "0", step: "0.01", ref: volumeEl, style: { display: 'none' }, onClick: updateVolumeIcon })] }), /*#__PURE__*/(0,jsx_runtime.jsx)("button", { "data-title": "\u5168\u5C4F/\u9000\u51FA\u5168\u5C4F", className: Playmodules['fullscreen-button'], onClick: function onClick() { if ((0,fullscreen/* IsFull */.vp)()) { (0,fullscreen/* exitFull */.BU)(); } else { (0,fullscreen/* requestFullScreen */.Dj)(warpEl.current); } }, children: /*#__PURE__*/(0,jsx_runtime.jsx)("i", { className: "icon-fangda1 iconfont", style: { fontSize: '12px', color: 'white' } }) })] })] }), /*#__PURE__*/(0,jsx_runtime.jsxs)("div", { className: Playmodules['video-progress'], children: [/*#__PURE__*/(0,jsx_runtime.jsx)("progress", { ref: progressBarEl, value: "0", min: "0" }), /*#__PURE__*/(0,jsx_runtime.jsx)("input", { className: Playmodules.seek, ref: seekEl, value: "0", min: "0", type: "range", step: "1" }), /*#__PURE__*/(0,jsx_runtime.jsx)("div", { className: Playmodules['seek-tooltip'], ref: seekTooltipEl, id: "seek-tooltip", children: "00:00" })] })] })] }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("svg", { style: { display: 'none' }, children: /*#__PURE__*/(0,jsx_runtime.jsxs)("defs", { children: [/*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "pause", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M14.016 5.016h3.984v13.969h-3.984v-13.969zM6 18.984v-13.969h3.984v13.969h-3.984z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "play-icon", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M8.016 5.016l10.969 6.984-10.969 6.984v-13.969z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "volume-high", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M14.016 3.234q3.047 0.656 5.016 3.117t1.969 5.648-1.969 5.648-5.016 3.117v-2.063q2.203-0.656 3.586-2.484t1.383-4.219-1.383-4.219-3.586-2.484v-2.063zM16.5 12q0 2.813-2.484 4.031v-8.063q1.031 0.516 1.758 1.688t0.727 2.344zM3 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "volume-low", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M5.016 9h3.984l5.016-5.016v16.031l-5.016-5.016h-3.984v-6zM18.516 12q0 2.766-2.531 4.031v-8.063q1.031 0.516 1.781 1.711t0.75 2.32z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "volume-mute", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M12 3.984v4.219l-2.109-2.109zM4.266 3l16.734 16.734-1.266 1.266-2.063-2.063q-1.547 1.313-3.656 1.828v-2.063q1.172-0.328 2.25-1.172l-4.266-4.266v6.75l-5.016-5.016h-3.984v-6h4.734l-4.734-4.734zM18.984 12q0-2.391-1.383-4.219t-3.586-2.484v-2.063q3.047 0.656 5.016 3.117t1.969 5.648q0 2.203-1.031 4.172l-1.5-1.547q0.516-1.266 0.516-2.625zM16.5 12q0 0.422-0.047 0.609l-2.438-2.438v-2.203q1.031 0.516 1.758 1.688t0.727 2.344z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "fullscreen", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M14.016 5.016h4.969v4.969h-1.969v-3h-3v-1.969zM17.016 17.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 9.984v-4.969h4.969v1.969h-3v3h-1.969zM6.984 14.016v3h3v1.969h-4.969v-4.969h1.969z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "fullscreen-exit", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M15.984 8.016h3v1.969h-4.969v-4.969h1.969v3zM14.016 18.984v-4.969h4.969v1.969h-3v3h-1.969zM8.016 8.016v-3h1.969v4.969h-4.969v-1.969h3zM5.016 15.984v-1.969h4.969v4.969h-1.969v-3h-3z" }) }), /*#__PURE__*/(0,jsx_runtime.jsx)("symbol", { id: "pip", viewBox: "0 0 24 24", children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", { d: "M21 19.031v-14.063h-18v14.063h18zM23.016 18.984q0 0.797-0.609 1.406t-1.406 0.609h-18q-0.797 0-1.406-0.609t-0.609-1.406v-14.016q0-0.797 0.609-1.383t1.406-0.586h18q0.797 0 1.406 0.586t0.609 1.383v14.016zM18.984 11.016v6h-7.969v-6h7.969z" }) })] }) })] }); })); /***/ }), /***/ 57616: /*!*********************************!*\ !*** ./src/utils/fullscreen.ts ***! \*********************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /* harmony export */ __webpack_require__.d(__webpack_exports__, { /* harmony export */ BU: function() { return /* binding */ exitFull; }, /* harmony export */ Dj: function() { return /* binding */ requestFullScreen; }, /* harmony export */ gH: function() { return /* binding */ fullscreenChange; }, /* harmony export */ vp: function() { return /* binding */ IsFull; } /* harmony export */ }); function requestFullScreen(element) { try { if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } catch (e) { console.log(e, ":e"); } } function exitFull() { if (window.top.document.webkitExitFullscreen) { window.top.document.webkitExitFullscreen(); } else if (document.exitFullscreen) { window.top.document.exitFullscreen(); } else if (document.msExitFullscreen) { window.top.document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { window.top.document.mozCancelFullScreen(); } } // esliint disabled var fullscreenChange = function fullscreenChange() { //['fullscreenchange','msfullscreenchange','webkitfullscreenchange', 'mozfullscreenchange'] if (document.webkitExitFullscreen) { // document.webkitExitFullscreen() return 'webkitfullscreenchange'; } else if (document.exitFullscreen) { // document.exitFullscreen() return 'fullscreenchange'; } else if (document.msExitFullscreen) { // document.msExitFullscreen() return 'msfullscreenchange'; } else if (document.mozCancelFullScreen) { // document.mozCancelFullScreen() return 'mozfullscreenchange'; } }; //判断是否全屏 function IsFull() { var fullscreenElement = window.top.document.fullscreenElement || window.top.document.mozFullscreenElement || window.top.document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; console.log("fullscreenElement", fullscreenElement); if (fullscreenElement == null) { return false; } else { return true; } } // document.addEventListener("mozfullscreenchange", function (event) { // console.log("mozfullscreenchange ", event); // if (IsFull()) { // console.log('进入全屏') // $("#closescreen").show(); // $("#openscreen").hide(); // } else { // console.log('退出全屏') // $("#closescreen").hide(); // $("#openscreen").show(); // } // }); // document.addEventListener("webkitfullscreenchange", function (event) { // console.log("webkitfullscreenchange", event); // if (IsFull()) { // console.log('进入全屏') // $("#closescreen").show(); // $("#openscreen").hide(); // } else { // console.log('退出全屏') // $("#closescreen").hide(); // $("#openscreen").show(); // } // }); // document.addEventListener("msfullscreenchange", function (event) { // console.log("msfullscreenchange", event); // if (IsFull()) { // console.log('进入全屏') // $("#closescreen").show(); // $("#openscreen").hide(); // } else { // console.log('退出全屏') // $("#closescreen").hide(); // $("#openscreen").show(); // } // }); /***/ }) }]);