"use strict"; function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); } function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); } function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); } function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); } function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); } function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } } function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; } function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; } function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } var YbPlayer = /*#__PURE__*/function () { function YbPlayer(_ref) { var container = _ref.container, src = _ref.src, segments = _ref.segments, title = _ref.title, poster = _ref.poster, type = _ref.type, three = _ref.three, autoplay = _ref.autoplay, loop = _ref.loop, muted = _ref.muted, playbackRate = _ref.playbackRate, preload = _ref.preload, isLive = _ref.isLive, header = _ref.header, controls = _ref.controls, height = _ref.height, crossOrigin = _ref.crossOrigin, objectFit = _ref.objectFit, openDirection = _ref.openDirection, exitDirection = _ref.exitDirection, initialTime = _ref.initialTime, duration = _ref.duration, danmu = _ref.danmu, custom = _ref.custom, decoder = _ref.decoder, quality = _ref.quality, works = _ref.works, workIndex = _ref.workIndex, subtitles = _ref.subtitles, subtitleIndex = _ref.subtitleIndex; _classCallCheck(this, YbPlayer); this.container = typeof container == 'string' ? document.querySelector(container) : container; this.src = src; //播放链接 this.segments = segments; //切片列表 仅支持flv.js segments权重比src小,如果同时传入src和segments,以src优先 this.title = title; //标题 this.poster = poster || undefined; //封面 this.type = type; //解码类型 this.three = three || 'none'; //3D模式 this.autoplay = autoplay; //是否自动播放 this.loop = loop; //是否循环播放 this.muted = muted; //是否静音 this.playbackRate = playbackRate || 1; //默认播放倍速 this.preload = preload; //是否预加载 this.isLive = isLive; //是否直播 this.header = header; //显示头部控制栏 this.controls = controls; //显示底部控制栏 this.height = height || 'auto'; //视频高度 this.crossOrigin = crossOrigin; //跨域属性 anonymous-它有一个默认值。它定义了将在不传递凭据信息的情况下发送CORS请求 use-credentials-将发送带有凭据、cookie 和证书的 cross-origin 请求 this.objectFit = objectFit; //当视频宽高超出容器时的表现形式 fill-内容拉伸填充 contain-保持比例内容缩放 cover-保持比例内容可能被剪切 none-内容不重置 scale-down-保持比例从none或contain选一个 initial-默认值 this.openDirection = openDirection || 'auto'; //全屏方向 auto-自动计算 landscape-横屏 portrait-竖屏 this.exitDirection = exitDirection || 'portrait'; //退出全屏时锁定的屏幕方向 landscape-横屏 portrait-竖屏 this.initialTime = initialTime; //初始化时间 this.duration = duration; //自定义时长 this.danmu = danmu || []; //弹幕列表 this.custom = custom || {}; //自定义配置 this.decoder = decoder || {}; //解码器 this.quality = quality || []; //画质列表 this.works = works || []; //分p列表 this.subtitles = subtitles || []; //字幕 this.subtitleIndex = subtitleIndex || -1; //字幕索引 -1 - 关闭字幕 this.workIndex = workIndex || 0; //分P索引 this.video = null; //视频 this.pano = null; //3D实例 this.cm = null; //弹幕实例 this.hls = null; //hls实例 this.flv = null; //flv实例 this.gesture = null; //手势实例 this.subtitle = null; //字幕实例 this.disabled = false; //是否锁屏 this.currentTime = 0; this._isSeeking = false; //正在拖动进度中 this._isDirection = false; //是否已经调用setDirection this._controlsTimer = null; //控制栏隐藏定时器 this._toastTimer = null; //消息隐藏定时器 this._danmuTimer = null; //弹幕定时器 this._seizingTimer = null; //卡死定时器(播放一些直播源的时候,可能会出现卡死无反应的情况,需要做出处理) this._event = {}; } //开启全屏按钮 return _createClass(YbPlayer, [{ key: "onmessage", get: function get() { return this._event.onmessage || null; }, set: function set(callback) { this._event.onmessage = callback; } }, { key: "load", value: function load() { this.container.innerHTML = "\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
").concat(YbPlayer.lockIcon, "
\n\t\t\t\t\t
").concat(YbPlayer.lockIcon, "
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t"); this._bindfullscreenerror = this._fullscreenerror.bind(this); this._bindfullscreenchanged = this._fullscreenchanged.bind(this); this.container.addEventListener('fullscreenerror', this._bindfullscreenerror); this.container.addEventListener('mozfullscreenerror', this._bindfullscreenerror); this.container.addEventListener('msfullscreenerror', this._bindfullscreenerror); this.container.addEventListener('webkitfullscreenerror', this._bindfullscreenerror); this.container.addEventListener('fullscreenchange', this._bindfullscreenchanged); this.container.addEventListener('mozfullscreenchange', this._bindfullscreenchanged); this.container.addEventListener('msfullscreenchange', this._bindfullscreenchanged); this.container.addEventListener('webkitfullscreenchange', this._bindfullscreenchanged); } }, { key: "unload", value: function unload() { this._clearDanmuTimer(); this._clearToastTimer(); this._clearControlsTimer(); this._removeBackbuttonListener(); this._event = {}; //卸载所有监听事件 if (this.container) { this.container.removeEventListener('fullscreenerror', this._bindfullscreenerror); this.container.removeEventListener('mozfullscreenerror', this._bindfullscreenerror); this.container.removeEventListener('msfullscreenerror', this._bindfullscreenerror); this.container.removeEventListener('webkitfullscreenerror', this._bindfullscreenerror); this.container.removeEventListener('fullscreenchange', this._bindfullscreenchanged); this.container.removeEventListener('mozfullscreenchange', this._bindfullscreenchanged); this.container.removeEventListener('msfullscreenchange', this._bindfullscreenchanged); this.container.removeEventListener('webkitfullscreenchange', this._bindfullscreenchanged); this._bindfullscreenerror = null; this._bindfullscreenchanged = null; this.container.innerHTML = ''; this.container = null; } } /** * 加载视频 * @param {String} type 加载类型 init-初始化视频 quality-切换画质 error-错误重加载 */ }, { key: "loadVideo", value: function loadVideo() { var _this2 = this; var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'init'; this.video = YbPlayer.getDecodeType(this.decoder, this.src) == 'jsmpeg' || this.type == 'jsmpeg' ? new YbMpeg() : document.createElement('VIDEO'); var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; var lockEls = this.container.getElementsByClassName('yb-player-lock'); var bProgressEl = this.container.getElementsByClassName('yb-player-bottom-progress')[0]; this.showLoading(); if (!this.isLive) this.loadRange(); for (var i = 0; i < lockEls.length; i++) { YbPlayer.tap(lockEls[i], function () { if (_this2.disabled) _this2.enable();else _this2.disable(); }); } this.video.oncanplay = function () { _this2.emit('canplay', { duration: _this2.getDuration(), videoWidth: _this2.video.videoWidth, videoHeight: _this2.video.videoHeight, type: type }); }; this.video.oncanplaythrough = function () { _this2.emit('canplaythrough', { duration: _this2.getDuration(), videoWidth: _this2.video.videoWidth, videoHeight: _this2.video.videoHeight, type: type }); }; this.video.onloadedmetadata = function () { _this2.hideLoading(); _this2.setInnerHTML('yb-player-time', (_this2.isLive ? '直播中 · ' : '') + '00:00'); _this2.setInnerHTML('yb-player-duration', YbPlayer.timeFormat(_this2.getDuration())); _this2.emit('loadedmetadata', { duration: _this2.getDuration(), videoWidth: _this2.video.videoWidth, videoHeight: _this2.video.videoHeight, type: type }); }; this.video.ondurationchange = function () { _this2.setInnerHTML('yb-player-duration', YbPlayer.timeFormat(_this2.getDuration())); _this2.emit('durationchange', _this2.getDuration()); }; this.video.onloadeddata = function () { //非直播时初始化播放时长 if (_this2.initialTime && !_this2.isLive) _this2.seek(_this2.initialTime); _this2.emit('loadeddata', { duration: _this2.getDuration(), videoWidth: _this2.video.videoWidth, videoHeight: _this2.video.videoHeight, type: type }); }; this.video.onloadstart = function () { _this2.emit('loadstart', { type: type }); }; this.video.onended = function () { _this2.emit('ended', { workIndex: _this2.workIndex }); }; this.video.onvolumechange = function () { var mutedEl = _this2.container.getElementsByClassName('yb-player-muted')[0]; if (mutedEl) _this2.video.muted ? mutedEl.classList.add('yb-player-icon-close') : mutedEl.classList.remove('yb-player-icon-close'); _this2.emit('mutedchange', _this2.video.muted); }; this.video.onratechange = function () { var playbackRate = _this2.video.playbackRate; if (_this2.cm) _this2.cm.setConfig('playbackRate', playbackRate); _this2.emit('ratechange', playbackRate); _this2.setInnerHTML('yb-player-header-rate', '倍速x' + playbackRate); var rateEl = _this2.container.getElementsByClassName('yb-player-rate')[0] || document.createElement('DIV'); if (![1, 1.0].includes(playbackRate)) { rateEl.setAttribute('class', 'yb-player-rate'); rateEl.innerHTML = "\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t".concat(playbackRate + '倍速播放中', "\n\t\t\t\t"); var wrapperEl = _this2.container.getElementsByClassName('yb-player-wrapper')[0]; if (wrapperEl) wrapperEl.appendChild(rateEl); } else { if (rateEl) rateEl.remove(); } }; this.video.ontimeupdate = function () { _this2.currentTime = _this2.video.currentTime; //如果是直播,需要更新直播时长,initialTime初始播放时长 if (!_this2._isSeeking) { var currentTime = _this2.isLive ? _this2.video.currentTime + (_this2.initialTime || 0) : _this2.video.currentTime; _this2.setInnerHTML('yb-player-time', (_this2.isLive ? '直播中 · ' : '') + YbPlayer.timeFormat(currentTime)); var rate = currentTime / _this2.getDuration(); var rangeEl = _this2.container.getElementsByClassName('yb-player-range-box')[0]; var focusEl = _this2.container.getElementsByClassName('yb-player-range-focus')[0]; var thumbEl = _this2.container.getElementsByClassName('yb-player-range-thumb')[0]; if (focusEl) focusEl.style.width = rate * 100 + '%'; if (thumbEl && rangeEl) thumbEl.style.transform = "translate(calc(-50% + ".concat(rate * rangeEl.offsetWidth, "px), -50%)"); bProgressEl.style.width = currentTime / _this2.getDuration() * 100 + '%'; } //如果自定义最大播放时长,当播放时长大于等于最大播放时长且不是直播时 if (_this2.duration && _this2.video.currentTime >= _this2.duration && !_this2.isLive) { if (_this2.loop) _this2.seek(0); //开启了循环播放则跳转0秒 else { //未开启循环播放,则触发暂停,并派发ended事件,模拟视频播放结束事件 _this2.video.pause(); _this2.emit('ended', { workIndex: _this2.workIndex }); } } _this2._clearSeizingTimer(); _this2._seizingTimer = window.setTimeout(function () { if (_this2.video && _this2.video.src && !_this2.video.paused) _this2.emit('seizing'); }, 5000); _this2.emit('timeupdate', _this2.video.currentTime); }; this.video.onplay = function () { _this2.playDanmu(); _this2.playSubtitle(); _this2.playPano(); _this2.setInnerHTML('yb-player-toggle', YbPlayer.pauseIcon); _this2.hideLoading(); //如果有自定义时长,当播放时长大于等于最大时长时,强制跳转到0秒,模拟视频播放完结束后点击重新播放 if (_this2.duration && _this2.video.currentTime >= _this2.duration && !_this2.isLive) _this2.seek(0); _this2.emit('play'); }; this.video.onpause = function () { _this2.stopDanmu(); _this2.stopSubtitle(); _this2.setInnerHTML('yb-player-toggle', YbPlayer.playIcon); _this2.hideLoading(); _this2.emit('pause'); }; this.video.onseeking = function () { _this2.emit('seeking', _this2.video.currentTime); }; this.video.onseeked = function () { _this2.seekDanmu(_this2.video.currentTime); _this2.emit('seeked', _this2.video.currentTime); }; this.video.onplaying = function () { _this2.playDanmu(); _this2.playSubtitle(); _this2.hideLoading(); _this2.emit('playing'); }; this.video.onwaiting = function () { _this2.stopDanmu(); _this2.stopSubtitle(); _this2.showLoading(); _this2.emit('waiting'); }; this.video.onprogress = function () { var bufferer = _this2.video.buffered; if (bufferer.length > 0) { var bufferedEnd = bufferer.end(bufferer.length - 1); var duration = _this2.getDuration(); var bufferPercent = bufferedEnd / duration * 100; var preload = _this2.container.getElementsByClassName('yb-player-range-preload')[0]; if (preload) preload.style.width = bufferPercent + '%'; } _this2.emit('progress'); }; this.video.onabort = function () { //如果container不存在了,说明被销毁了,后面就不执行了 // if ( this.container ) { // this.showError('播放中断') // this.unloadVideo() // } _this2.emit('abort'); }; this.video.onerror = function (e) { if (e && e.target.error) { // 网络问题或其他不可恢复的错误 var code = e.target.error.code; var errorMsg = ''; switch (code) { case 1: errorMsg = '视频加载中止,请检查网络连接'; break; case 2: errorMsg = '网络错误,请检查网络连接'; break; case 3: errorMsg = '视频解码错误,格式可能不受支持'; break; case 4: errorMsg = '视频源不支持或地址无效'; break; } _this2.showError(errorMsg); _this2.unloadVideo(); } _this2.emit('error', e); }; //视频长按菜单取消 this.video.oncontextmenu = function (e) { e.preventDefault(); }; //设置属性,让video不被劫持 this.video.setAttribute('x-webkit-airplay', 'allow'); this.video.setAttribute('webkit-playsinline', true); this.video.setAttribute('playsinline', true); this.video.setAttribute('x5-video-player-type', 'h5'); this.video.setAttribute('x5-video-play', true); this.video.setAttribute('style', 'position: relative;z-index:0;width:100%;height:' + (this.getFullscreen() ? '100%' : this.height) + ';object-fit:' + this.objectFit); this.video.setAttribute('poster', this.poster); if (this.crossOrigin) this.video.setAttribute('crossOrigin', this.crossOrigin); //设置video基础属性 this.video.autoplay = ['quality', 'error'].includes(type) ? true : this.autoplay; //加载类型为切换画质和错误重加载时,需要自动播放,不保证一定能成功 this.video.loop = this.loop; this.video.muted = this.muted; this.video.defaultMuted = this.muted; this.video.playbackRate = this.playbackRate; this.video.defaultPlaybackRate = this.playbackRate; this.video.preload = this.preload; this.video.controls = false; this.video.volume = 1; wrapperEl.insertBefore(this.getVideoElement(), this.container.getElementsByClassName('yb-player-danmu')[0]); //将视频插入弹幕容器前方,让弹幕容器层级高于视频 //如果传入了src,去判断播放链接的类型 if (this.src && (!this.decoder[this.type] || this.type == 'auto')) this.type = YbPlayer.getDecodeType(this.decoder, this.src);else if (this.segments && this.segments.length) this.type = 'flv'; //否则如果传入了segments,解码器直接使用flv if (this.type == 'video') this.video.src = this.src;else this.loadDecoder(); //异步加载解码器加载视频链接(此时可以不再管理视频) if (this.three != 'none') this.loadPano(); //加载3D场景 else this.loadCustom(); //加载自定义配置 如果开启了3D,则不需要主动去加载自定义配置,因为加载完3D场景后会自动去加载一次 } //卸载视频 }, { key: "unloadVideo", value: function unloadVideo() { this._clearSeizingTimer(); this.unloadCustom(); this.unloadDecoder(); this.unloadPano(); if (this.video) { //判断一下是否是video元素 // this.video.onclick = null this.video.onloadedmetadata = null; this.video.onended = null; this.video.onvolumechange = null; this.video.ontimeupdate = null; this.video.onplay = null; this.video.onpause = null; this.video.onseeked = null; this.video.onplaying = null; this.video.onwaiting = null; this.video.onprogress = null; this.video.onerror = null; this.video.oncontextmenu = null; this.video.pause(); //移除src 释放视频资源 this.video.removeAttribute('src'); this.video.load(); this.video.remove(); this.video = null; } this.currentTime = 0; this.unloadRange(); } //加载解码器 }, { key: "loadDecoder", value: function () { var _loadDecoder = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() { var _this3 = this; var loader, config; return _regenerator().w(function (_context) { while (1) switch (_context.n) { case 0: if (!this.type) this.type = YbPlayer.getDecodeType(this.decoder, this.src); //检测是否支持video播放 if (this.type) { _context.n = 2; break; } _context.n = 1; return YbPlayer.checkWithVideo(this.src); case 1: this.type = _context.v; case 2: if (this.type) { _context.n = 4; break; } _context.n = 3; return YbPlayer.checkWithHls(this.decoder.hls.loader, this.src); case 3: this.type = _context.v; case 4: if (this.type) { _context.n = 6; break; } _context.n = 5; return YbPlayer.checkWithFlv(this.decoder.flv.loader, this.src); case 5: this.type = _context.v; case 6: if (this.type == 'hls') { loader = this.decoder[this.type].loader; config = this.decoder[this.type].config; this.hls = new loader(config); this.hls.loadSource(this.src); this.hls.attachMedia(this.video); this.hls.on(loader.Events.ERROR, function (e, data) { _this3.emit('hlserror', { event: e, data: data }); if (data.fatal) { switch (data.type) { case loader.ErrorTypes.NETWORK_ERROR: //对于网络相关的错误 _this3.hls.startLoad(); break; case loader.ErrorTypes.MEDIA_ERROR: //媒体/视频相关错误 _this3.hls.recoverMediaError(); break; default: //不可恢复的错误 _this3.showError(); _this3.unloadVideo(); break; } } }); } else if (this.type == 'flv') { loader = this.decoder[this.type].loader; config = this.decoder[this.type].config || {}; this.flv = loader.createPlayer(_objectSpread({ type: "flv", isLive: this.isLive, url: this.src, segments: this.segment && this.segments.length ? this.segment : null }, config), _objectSpread({ enableWorker: false, //不启用分离线程 enableStashBuffer: false, //关闭IO隐藏缓冲区 isLive: this.isLive, lazyLoad: false }, config)); this.flv.on('error', function (errorType, errorDetail, errorInfo) { _this3.emit('flverror', { errorType: errorType, errorDetail: errorDetail, errorInfo: errorInfo }); if (YbPlayer.isFlvFatalError(errorType, errorDetail, errorInfo)) { _this3.showError(); _this3.unloadVideo(); } }); this.flv.attachMediaElement(this.video); this.flv.load(); } else if (this.type == 'jsmpeg') { loader = this.decoder[this.type].loader; config = this.decoder[this.type].config || {}; this.video.setDecoder(loader); this.video.setConfig(_objectSpread(_objectSpread({}, config), {}, { loop: this.loop, autoplay: this.autoplay, poster: this.poster, muted: this.muted })); this.video.src = this.src; this.video.load(); } else if (this.type == 'video') { this.video.src = this.src; } else { this.showError('解码失败'); this.unloadVideo(); } case 7: return _context.a(2); } }, _callee, this); })); function loadDecoder() { return _loadDecoder.apply(this, arguments); } return loadDecoder; }() //卸载解码器 }, { key: "unloadDecoder", value: function unloadDecoder() { if (this.hls) { this.hls.destroy(); this.hls = null; } if (this.flv) { this.flv.pause(); this.flv.unload(); this.flv.detachMediaElement(); this.flv.destroy(); this.flv = null; } } //加载3D场景 }, { key: "loadPano", value: function loadPano() { this.pano = new YbPano(this, this.custom.pano || {}); this.pano.init(); //当前视频正在播放,需要同步播放3D if (this.video && !this.video.paused) this.playPano(); //加载3D后需要重新loadCustom this.unloadCustom(); this.loadCustom(); if (!this.gesture) return; var controlsType = this.pano.getControlsType(); if (controlsType == 'orbit') this.disableGesture();else this.enableGesture(); } //卸载3D场景 }, { key: "unloadPano", value: function unloadPano() { if (this.pano) { this.pano.dispose(); this.pano = null; //卸载3D模式后后需要重新loadCustom this.unloadCustom(); this.loadCustom(); //开启手势事件 this.enableGesture(); } } //播放3D }, { key: "playPano", value: function playPano() { var panoEl = this.container.getElementsByClassName('yb-player-pano')[0]; if (panoEl && panoEl.style.visibility != 'visible') { panoEl.style.visibility = 'visible'; //加载视频纹理 this.pano && this.pano.createVideoSphere(); } this.pano && this.pano.animate(); } //刷新3D场景 }, { key: "refreshPano", value: function refreshPano() { if (!this.pano) return; this.pano.updateSize(); //重置大小 } //加载弹幕 }, { key: "loadDanmu", value: function loadDanmu() { if (this.video) { var config = Object.assign({}, { show: true, speed: 1, timeDiffrence: 0, fontScale: 1, fontSize: 18, opacity: 1.0, color: '#ffffff', overlap: false, disableScroll: false, //关闭滚动弹幕 disableTop: false, //关闭顶端弹幕 disableBottom: false, //关闭底端弹幕 disableFilter: false //关闭弹幕过滤 }, this.custom.danmu || {}); this.custom.danmu = config; this.cm = new YbDanmu(this.container.getElementsByClassName('yb-player-danmu')[0], YbPlayer.deepClone(this.danmu || []), config); this.cm.load(); if (this.video.currentTime > 0) this.seekDanmu(this.video.currentTime); if (!this.video.paused) this.playDanmu(); //加载弹幕后需要重新loadCustom this.unloadCustom(); this.loadCustom(); if (config.show) this.showDanmu();else this.hideDanmu(); } } //卸载弹幕 }, { key: "unloadDanmu", value: function unloadDanmu() { if (this.cm) { this.stopDanmu(); this.cm.unload(); this.cm = null; //卸载弹幕后需要重新loadCustom this.unloadCustom(); this.loadCustom(); } } //展示弹幕 }, { key: "showDanmu", value: function showDanmu() { if (this.cm) { this.cm.show(); var danmuVisibleEl = this.container.getElementsByClassName('yb-player-danmu-visible')[0]; danmuVisibleEl.classList.remove('yb-player-icon-close'); } } //隐藏弹幕 }, { key: "hideDanmu", value: function hideDanmu() { if (this.cm) { this.cm.hide(); var danmuVisibleEl = this.container.getElementsByClassName('yb-player-danmu-visible')[0]; danmuVisibleEl.classList.add('yb-player-icon-close'); } } /** * 发送并显示弹幕 * @param { Object|String } danmu 弹幕内容 * @param { Boolean } border 使用边框 */ }, { key: "sendDanmu", value: function sendDanmu(danmu, border) { if (!this.cm) return; var time = this.video.currentTime; danmu = typeof danmu == 'string' ? { text: danmu } : danmu; var obj = _objectSpread({ time: time, color: '#ffffff' }, danmu); if (this.danmu) this.danmu.push(obj); this.cm.send(obj, border); this.emit('danmusend', obj); } /** * 插入弹幕数据 * @param { Object|String } danmu 弹幕内容 */ }, { key: "insertDanmu", value: function insertDanmu(danmu) { if (!this.cm) return; var time = this.video.currentTime; danmu = typeof danmu == 'string' ? { text: danmu } : danmu; var obj = _objectSpread({ time: time, color: '#ffffff' }, danmu); if (this.danmu) this.danmu.push(obj); this.cm.insert(obj); } //播放弹幕 }, { key: "playDanmu", value: function playDanmu() { var _this4 = this; this._clearDanmuTimer(); if (this.cm) this.cm.play(); this._danmuTimer = window.setInterval(function () { _this4.cm && _this4.cm.time(_this4.video.currentTime); }, 100); } //暂停弹幕 }, { key: "stopDanmu", value: function stopDanmu() { this._clearDanmuTimer(); if (this.cm) this.cm.pause(); } //跳转弹幕 }, { key: "seekDanmu", value: function seekDanmu(time) { // if ( this.cm ) this.cm.goto(time * 1000) this.cm && this.cm.seek(time); } //刷新弹幕 }, { key: "refreshDanmu", value: function refreshDanmu() { var _this5 = this; if (!this.cm) return; if (this._danmuRefreshtimer) { clearTimeout(this._danmuRefreshtimer); this._danmuRefreshtimer = null; } ; this._danmuRefreshtimer = window.setTimeout(function () { _this5.cm.refresh(); //重置弹幕舞台大小 }, 200); } //加载字幕 }, { key: "loadSubtitle", value: function () { var _loadSubtitle = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() { return _regenerator().w(function (_context2) { while (1) switch (_context2.n) { case 0: _context2.n = 1; return YbSubtitle.init(this, this.subtitles[this.subtitleIndex].src, this.custom.subtitle || {}); case 1: this.subtitle = _context2.v; if (this.video && !this.video.paused) this.playSubtitle(); case 2: return _context2.a(2); } }, _callee2, this); })); function loadSubtitle() { return _loadSubtitle.apply(this, arguments); } return loadSubtitle; }() //卸载字幕 }, { key: "unloadSubtitle", value: function unloadSubtitle() { this.subtitle && this.subtitle.unload(); } //播放字幕 }, { key: "playSubtitle", value: function playSubtitle() { this.subtitle && this.subtitle.play(); } //暂停字幕 }, { key: "stopSubtitle", value: function stopSubtitle() { this.subtitle && this.subtitle.pause(); } //展示蒙层避免误操作 }, { key: "showMask", value: function showMask() { var _this6 = this; var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; if (wrapperEl) { var maskEl = document.createElement('DIV'); maskEl.setAttribute('class', 'yb-player-mask'); // maskEl.onclick = () => { // this.hideToolbar() // this.hidePopup() // } YbPlayer.tap(maskEl, function () { _this6.hideToolbar(); _this6.hidePopup(); }); wrapperEl.appendChild(maskEl); //加入蒙层 } } //隐藏蒙层 }, { key: "hideMask", value: function hideMask() { var maskEls = this.container.querySelectorAll('.yb-player-mask'); maskEls.forEach(function (t) { return t.remove(); }); } /** * 展示工具栏 * @param {String} selector 选择器 * @param {Array} list 工具栏列表 * @param {Boolean} isCheck 是否展示选择框 * @param {Number} checkIndex 选择框索引 */ }, { key: "showToolbar", value: function showToolbar(selector, list, isCheck, checkIndex) { var _this7 = this; var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; if (wrapperEl) { this.showMask(); var toolbarEl = document.createElement('DIV'); toolbarEl.setAttribute('class', 'yb-player-toolbar'); list.forEach(function (item, key) { toolbarEl.innerHTML += isCheck ? "\n\t\t\t\t\t
\n\t\t\t\t\t\t".concat(item.text, "\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t") : "
".concat(item.text, "
"); }); var children = toolbarEl.children || []; var _loop = function _loop(i) { // children[i].onclick = () => { // this.hideToolbar(); // list[i].click() // } YbPlayer.tap(children[i], function () { _this7.hideToolbar(); list[i].click(); }); }; for (var i = 0; i < children.length; i++) { _loop(i); } toolbarEl.setAttribute('style', 'visibility:hidden'); //隐藏工具栏 wrapperEl.appendChild(toolbarEl); //先插入不显示的工具栏,因为需要计算工具栏尺寸 var element = this.container.querySelector(selector); //获取点击选择器 var rect = element.getBoundingClientRect(); //获取点击元素的尺寸布局信息 var boxWidth = this.container.offsetWidth; var boxHeight = this.container.offsetHeight; var top = rect.top + rect.height; //计算顶部定位 var left = rect.left; //计算左边定位 var right = boxWidth - rect.right; //计算右边定位 var bottom = boxHeight - rect.bottom + rect.height; //计算底部定位 var isTop = true; //是否定位顶部 true-定位顶部 false-定位底部 var isLeft = true; //是否定位左边 true-定位左边 false-定位右边 if (top > boxHeight / 2) isTop = false; //判断点击元素是否在盒子上半部 if (left + toolbarEl.offsetWidth > boxWidth) isLeft = false; //判断定位左边时,工具栏是否超出container toolbarEl.setAttribute('style', "".concat(isTop ? 'top:' + top + 'px' : 'bottom:' + bottom + 'px', ";").concat(isLeft ? 'left:' + left + 'px' : 'right:' + right + 'px', ";transform-origin:").concat(isTop ? 'top' : 'bottom', " ").concat(isLeft ? 'left' : 'right')); toolbarEl.style.maxHeight = (isTop ? boxHeight - top : boxHeight - bottom) + 'px'; //设置工具栏最大高度,避免超出容器后无法滚动内容 wrapperEl.removeChild(toolbarEl); //移除工具栏(因为需要动画效果,所以先移除,再添加) wrapperEl.appendChild(toolbarEl); //再添加工具栏 } } //隐藏工具栏 }, { key: "hideToolbar", value: function hideToolbar() { this.hideMask(); var toolbarEls = this.container.querySelectorAll('.yb-player-toolbar'); toolbarEls.forEach(function (t) { return t.remove(); }); } /** * 展示弹窗 * @param {String} title 弹窗标题 * @param {HtmlElement} dom 弹窗内容 * @param {String} mode 弹窗方向 center-中间弹窗 */ }, { key: "showPopup", value: function showPopup(title, dom, mode) { var _this8 = this; var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; if (wrapperEl) { this.showMask(); var popupEl = document.createElement('DIV'); var popupDirection = ''; if (mode == 'center') { popupDirection = 'yb-player-popup-center'; } else { var boxWidth = this.container.offsetWidth; var boxHeight = this.container.offsetHeight; var rate = boxWidth / boxHeight; popupDirection = rate > 1 ? 'yb-player-popup-landscape' : 'yb-player-popup-portrait'; } popupEl.setAttribute('class', 'yb-player-popup ' + popupDirection); popupEl.innerHTML = "\n\t\t\t\t
".concat(title, "
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t"); var contentEl = popupEl.getElementsByClassName('yb-player-popup-content')[0]; contentEl.appendChild(dom); var closeEl = popupEl.getElementsByClassName('yb-player-popup-close')[0]; // closeEl.onclick = () => { // this.hidePopup() // } YbPlayer.tap(closeEl, function () { _this8.hidePopup(); }); wrapperEl.appendChild(popupEl); } } //隐藏弹窗 }, { key: "hidePopup", value: function hidePopup() { this.hideMask(); var popupEls = this.container.querySelectorAll('.yb-player-popup'); popupEls.forEach(function (p) { return p.remove(); }); } //插入元素 }, { key: "appendDom", value: function appendDom(dom) { var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; wrapperEl.appendChild(dom); } //移除元素 }, { key: "removeDom", value: function removeDom(dom) { var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; wrapperEl.removeChild(dom); } }, { key: "showMoreSetting", value: function showMoreSetting() { var _this9 = this; var header = this.custom.header || {}; var more = YbPlayer.deepClone(header.more || []); if (!header.disableLock) { more.unshift({ text: '锁定屏幕', click: function click() { if (_this9.disabled) _this9.enable();else _this9.disable(); } }); } if (!header.disableThreeCapture && this.three != 'none') { more.unshift({ text: '渲染截图', click: function click() { _this9.capture('three'); } }); } if (!header.disableCapture) { more.unshift({ text: '视频截图', click: function click() { _this9.capture(); } }); } if (this.cm && !header.disableDanmuFilter && this.getFullscreen()) { more.unshift({ text: '弹幕过滤', click: function click() { if (_this9.getPopup()) _this9.hidePopup(); _this9.showDanmuFilter(); } }); } if (this.cm && !header.disableDanmuSetting && this.getFullscreen()) { more.unshift({ text: '弹幕设置', click: function click() { if (_this9.getPopup()) _this9.hidePopup(); _this9.showDanmuSetting(); } }); } this.showToolbar('.yb-player-more', more); } //展示画质列表 }, { key: "showQuality", value: function showQuality() { var _this0 = this; var quality = this.custom.quality || {}; var qualityName = quality.name || '画质'; var list = this.quality.map(function (q, k) { return { text: q.title, click: function click() { _this0.initialTime = _this0.video.currentTime; _this0.src = q.src; _this0.type = q.type; _this0.stopDanmu(); _this0.unloadVideo(); _this0.loadVideo('quality'); _this0.hideControls(); _this0.showToast('切换' + qualityName + '到' + q.title); _this0.emit('qualitychange', { index: k, detail: q }); //派发更改事件,以便开发者外部记录 } }; }); var index = this.quality.findIndex(function (q) { return q.src == _this0.src; }); this.showToolbar('.yb-player-quality', list, true, index); } //展示字幕列表 }, { key: "showSubtitle", value: function showSubtitle() { var _this1 = this; var list = this.subtitles.map(function (s, k) { return { text: s.title, click: function click() { _this1.subtitleIndex = k; var subtitleEl = _this1.container.getElementsByClassName('yb-player-subtitle')[0]; subtitleEl.classList.remove('yb-player-icon-close'); subtitleEl.innerHTML = s.title; _this1.unloadSubtitle(); _this1.loadSubtitle(); _this1.emit('subtitlechange', { index: k, detail: s }); //派发字幕更改事件,以便开发者外部记录 } }; }); list.push({ text: '关闭字幕', click: function click() { _this1.subtitleIndex = -1; var subtitleEl = _this1.container.getElementsByClassName('yb-player-subtitle')[0]; subtitleEl.classList.add('yb-player-icon-close'); subtitleEl.innerHTML = '字幕'; _this1.unloadSubtitle(); _this1.emit('subtitlechange', { index: _this1.subtitleIndex }); //派发字更改事件,以便开发者外部记录 } }); var index = this.subtitleIndex == -1 ? list.length - 1 : this.subtitleIndex; this.showToolbar('.yb-player-subtitle', list, true, index); } //展示倍速播放选项 }, { key: "showPlaybackRate", value: function showPlaybackRate() { var _this10 = this; var arr = [{ text: '0.5倍速', value: 0.5 }, { text: '正常倍速', value: 1 }, { text: '1.5倍速', value: 1.5 }, { text: '1.75倍速', value: 1.75 }, { text: '2倍速', value: 2 }, { text: '3倍速', value: 3 }]; var list = arr.map(function (a, k) { return { text: a.text, click: function click() { _this10.hideToolbar(); if (_this10.video) _this10.video.playbackRate = a.value; } }; }); var index = arr.findIndex(function (a) { return a.value == _this10.video.playbackRate; }); this.showToolbar('.yb-player-header-rate', list, true, index); } //展示3D模式选项 }, { key: "showThree", value: function showThree() { var _this11 = this; var arr = [{ label: '关闭3D', value: 'none' }, { label: '360全景', value: '360' }]; var list = arr.map(function (a, k) { return { text: a.label, click: function click() { _this11.three = a.value; var headerThreeEl = _this11.container.getElementsByClassName('yb-player-header-three')[0]; if (a.value == 'none') _this11.unloadPano();else _this11.loadPano(); _this11.hideControls(); //隐藏一次控制栏,否则控制栏显示会异常 _this11.setInnerHTML('yb-player-header-three', a.label); _this11.emit('threechange', a); //派发更改事件,以便开发者外部记录 } }; }); var index = arr.findIndex(function (a) { return a.value == _this11.three; }); this.showToolbar('.yb-player-header-three', list, true, index); } //展示全景视频控制器类型列表 }, { key: "showPanoControls", value: function showPanoControls() { var _this12 = this; var arr = [{ label: '陀螺仪', value: 'orientation' }, { label: '滑动', value: 'orbit' }, { label: '关闭', value: 'close' }]; var list = arr.map(function (a, k) { return { text: a.label, click: function click() { var panoControlEl = _this12.container.getElementsByClassName('yb-player-pano-controls')[0]; var item = a; //记录当前点击类型 if (a.value == 'close') { if (panoControlEl) panoControlEl.classList.add('yb-player-icon-close'); _this12.pano && _this12.pano.unloadControls(); //卸载3D控制器 _this12.showToast('关闭动画传感器'); _this12.setInnerHTML('yb-player-pano-controls', '传感器'); } else { if (panoControlEl) panoControlEl.classList.remove('yb-player-icon-close'); _this12.showToast('切换动画传感器类型为' + a.label); _this12.pano && _this12.pano.setControlsType(a.value); //这里需要实时获取控制器类型,因为陀螺仪可能会开启失败 var _controlsType = _this12.pano.getControlsType(); var _index = arr.findIndex(function (item) { return item.value == _controlsType; }); if (_index > -1) item = arr[_index]; _this12.setInnerHTML('yb-player-pano-controls', item.label); } if (item.value == 'orbit') _this12.disableGesture(); //禁用手势事件 else _this12.enableGesture(); //开启手势事件 _this12.emit('panocontrolschange', item); //派发更改事件,以便开发者外部记录 } }; }); var controlsType = this.pano.getControlsType(); //获取传感器类型 var index = arr.findIndex(function (a) { return a.value == controlsType; }); this.showToolbar('.yb-player-pano-controls', list, true, index); } //展示分P列表 }, { key: "showWorks", value: function showWorks() { var _this13 = this; this.hideControls(); var list = this.works.map(function (q, key) { return { text: q.title, click: function click() { var activeEl = _this13.container.getElementsByClassName('yb-player-work-item-active')[0]; if (activeEl) activeEl.classList.remove('yb-player-work-item-active'); var elementEl = _this13.container.getElementsByClassName('yb-player-work-item-' + key)[0]; if (elementEl) elementEl.classList.add('yb-player-work-item-active'); _this13.workIndex = key; _this13.change(key); } }; }); var div = document.createElement('DIV'); list.forEach(function (item, key) { div.innerHTML += "\n\t\t\t\t
").concat(item.text, "
\n\t\t\t"); }); var children = div.children || []; for (var i = 0; i < children.length; i++) { // children[i].onclick = list[i].click YbPlayer.tap(children[i], list[i].click); } var work = this.custom.work || {}; var worksName = work.name || '分P'; this.showPopup(worksName + '列表', div); var scrollEl = this.container.getElementsByClassName('yb-player-popup-content')[0]; var elementEl = this.container.getElementsByClassName('yb-player-work-item-' + this.workIndex)[0]; if (elementEl) scrollEl.scroll({ top: elementEl.offsetTop - elementEl.offsetHeight - 10 }); } }, { key: "showDanmuSetting", value: function showDanmuSetting() { var _this14 = this; this.hideControls(); var config = YbPlayer.deepClone(this.custom.danmu); var div = document.createElement('DIV'); div.setAttribute('class', 'yb-player-danmu-setting'); div.innerHTML = "\n\t\t\t
\n\t\t\t\t\u5168\u90E8\u663E\u793A\n\t\t\t\t
\n\t\t\t\t\t\u662F\n\t\t\t\t\t\u5426\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u6EDA\u52A8\u663E\u793A\n\t\t\t\t
\n\t\t\t\t\t\u662F\n\t\t\t\t\t\u5426\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u9876\u7AEF\u663E\u793A\n\t\t\t\t
\n\t\t\t\t\t\u662F\n\t\t\t\t\t\u5426\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5E95\u7AEF\u663E\u793A\n\t\t\t\t
\n\t\t\t\t\t\u662F\n\t\t\t\t\t\u5426\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u7981\u6B62\u91CD\u53E0\n\t\t\t\t
\n\t\t\t\t\t\u662F\n\t\t\t\t\t\u5426\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5F39\u5E55\u8FC7\u6EE4\n\t\t\t\t
\n\t\t\t\t\t\u5F00\n\t\t\t\t\t\u5173\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5F39\u5E55\u901F\u5EA6\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t").concat(config.speed, "\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u900F\u660E\u5EA6\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t").concat((config.opacity / 1 * 100).toFixed(0), "%\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5B57\u4F53\u5927\u5C0F\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t").concat(config.fontScale, "\u500D\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u65F6\u95F4\u5DEE\uFF08\u79D2\uFF09\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t").concat(config.timeDiffrence, "\u79D2\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t"); var switchEls = div.getElementsByClassName('yb-player-setting-switch'); var spReduceEl = div.getElementsByClassName('yb-player-setting-danmu-speed-reduce')[0]; var spAddEl = div.getElementsByClassName('yb-player-setting-danmu-speed-add')[0]; var spEl = div.getElementsByClassName('yb-player-setting-danmu-speed')[0]; var opReduceEl = div.getElementsByClassName('yb-player-setting-danmu-opacity-reduce')[0]; var opAddEl = div.getElementsByClassName('yb-player-setting-danmu-opacity-add')[0]; var opPercentEl = div.getElementsByClassName('yb-player-setting-danmu-opacity-percent')[0]; var sizeReduceEl = div.getElementsByClassName('yb-player-setting-danmu-size-reduce')[0]; var sizeAddEl = div.getElementsByClassName('yb-player-setting-danmu-size-add')[0]; var sizeEl = div.getElementsByClassName('yb-player-setting-danmu-size')[0]; var diffrenceEl = div.getElementsByClassName('yb-player-setting-danmu-diffrence')[0]; var diReduceEl = div.getElementsByClassName('yb-player-setting-danmu-diffrence-reduce')[0]; var diAddEl = div.getElementsByClassName('yb-player-setting-danmu-diffrence-add')[0]; var _loop2 = function _loop2(i) { // switchEls[i].onclick = () => { // switchEls[i].classList.add('yb-player-setting-switch-active') // if ( switchEls[i].getAttribute('data-visible') ) { // for ( let j = 0; j < switchEls.length; j++ ) if ( switchEls[j].getAttribute('data-visible') ) switchEls[j].classList.remove('yb-player-setting-switch-active') // config.show = switchEls[i].getAttribute('data-visible') == 1 // if ( config.show ) this.showDanmu() // else this.hideDanmu() // } // if ( switchEls[i].getAttribute('data-scroll') ) { // for ( let j = 0; j < switchEls.length; j++ ) if ( switchEls[j].getAttribute('data-scroll') ) switchEls[j].classList.remove('yb-player-setting-switch-active') // config.disableScroll = switchEls[i].getAttribute('data-scroll') == 1 // setConfig('disableScroll', config.disableScroll) // } // if ( switchEls[i].getAttribute('data-top') ) { // for ( let j = 0; j < switchEls.length; j++ ) if ( switchEls[j].getAttribute('data-top') ) switchEls[j].classList.remove('yb-player-setting-switch-active') // config.disableTop = switchEls[i].getAttribute('data-top') == 1 // setConfig('disableTop', config.disableTop) // } // if ( switchEls[i].getAttribute('data-bottom') ) { // for ( let j = 0; j < switchEls.length; j++ ) if ( switchEls[j].getAttribute('data-bottom') ) switchEls[j].classList.remove('yb-player-setting-switch-active') // config.disableBottom = switchEls[i].getAttribute('data-bottom') == 1 // setConfig('disableBottom', config.disableBottom) // } // if ( switchEls[i].getAttribute('data-overlap') ) { // for ( let j = 0; j < switchEls.length; j++ ) if ( switchEls[j].getAttribute('data-overlap') ) switchEls[j].classList.remove('yb-player-setting-switch-active') // config.overlap = switchEls[i].getAttribute('data-overlap') == 1 // setConfig('overlap', config.overlap) // } // if ( switchEls[i].getAttribute('data-filter') ) { // for ( let j = 0; j < switchEls.length; j++ ) if ( switchEls[j].getAttribute('data-filter') ) switchEls[j].classList.remove('yb-player-setting-switch-active') // config.disableFilter = switchEls[i].getAttribute('data-filter') == 1 // setConfig('disableFilter', config.disableFilter) // } // switchEls[i].classList.add('yb-player-setting-switch-active') // } YbPlayer.tap(switchEls[i], function () { switchEls[i].classList.add('yb-player-setting-switch-active'); if (switchEls[i].getAttribute('data-visible')) { for (var j = 0; j < switchEls.length; j++) if (switchEls[j].getAttribute('data-visible')) switchEls[j].classList.remove('yb-player-setting-switch-active'); config.show = switchEls[i].getAttribute('data-visible') == 1; if (config.show) _this14.showDanmu();else _this14.hideDanmu(); } if (switchEls[i].getAttribute('data-scroll')) { for (var _j = 0; _j < switchEls.length; _j++) if (switchEls[_j].getAttribute('data-scroll')) switchEls[_j].classList.remove('yb-player-setting-switch-active'); config.disableScroll = switchEls[i].getAttribute('data-scroll') == 1; setConfig('disableScroll', config.disableScroll); } if (switchEls[i].getAttribute('data-top')) { for (var _j2 = 0; _j2 < switchEls.length; _j2++) if (switchEls[_j2].getAttribute('data-top')) switchEls[_j2].classList.remove('yb-player-setting-switch-active'); config.disableTop = switchEls[i].getAttribute('data-top') == 1; setConfig('disableTop', config.disableTop); } if (switchEls[i].getAttribute('data-bottom')) { for (var _j3 = 0; _j3 < switchEls.length; _j3++) if (switchEls[_j3].getAttribute('data-bottom')) switchEls[_j3].classList.remove('yb-player-setting-switch-active'); config.disableBottom = switchEls[i].getAttribute('data-bottom') == 1; setConfig('disableBottom', config.disableBottom); } if (switchEls[i].getAttribute('data-overlap')) { for (var _j4 = 0; _j4 < switchEls.length; _j4++) if (switchEls[_j4].getAttribute('data-overlap')) switchEls[_j4].classList.remove('yb-player-setting-switch-active'); config.overlap = switchEls[i].getAttribute('data-overlap') == 1; setConfig('overlap', config.overlap); } if (switchEls[i].getAttribute('data-filter')) { for (var _j5 = 0; _j5 < switchEls.length; _j5++) if (switchEls[_j5].getAttribute('data-filter')) switchEls[_j5].classList.remove('yb-player-setting-switch-active'); config.disableFilter = switchEls[i].getAttribute('data-filter') == 1; setConfig('disableFilter', config.disableFilter); } switchEls[i].classList.add('yb-player-setting-switch-active'); }); }; for (var i = 0; i < switchEls.length; i++) { _loop2(i); } // spReduceEl.onclick = () => { // config.speed = config.speed - 1 > 1 ? config.speed - 1 : 1 // spEl.innerHTML = config.speed // setConfig('speed', config.speed) // } YbPlayer.tap(spReduceEl, function () { config.speed = config.speed - 1 > 1 ? config.speed - 1 : 1; spEl.innerHTML = config.speed; setConfig('speed', config.speed); }); // spAddEl.onclick = () => { // config.speed = config.speed + 1 < 10 ? config.speed + 1 : 10 // spEl.innerHTML = config.speed // setConfig('speed', config.speed) // } YbPlayer.tap(spAddEl, function () { config.speed = config.speed + 1 < 10 ? config.speed + 1 : 10; spEl.innerHTML = config.speed; setConfig('speed', config.speed); }); // opReduceEl.onclick = () => { // config.opacity = config.opacity - 0.05 > 0 ? config.opacity - 0.05 : 0 // opPercentEl.innerHTML = (config.opacity / 1 * 100).toFixed(0) + '%' // setConfig('opacity', config.opacity) // } YbPlayer.tap(opReduceEl, function () { config.opacity = config.opacity - 0.05 > 0 ? config.opacity - 0.05 : 0; opPercentEl.innerHTML = (config.opacity / 1 * 100).toFixed(0) + '%'; setConfig('opacity', config.opacity); }); // opAddEl.onclick = () => { // config.opacity = config.opacity + 0.05 < 1 ? config.opacity + 0.05 : 1 // opPercentEl.innerHTML = (config.opacity / 1 * 100).toFixed(0) + '%' // setConfig('opacity', config.opacity) // } YbPlayer.tap(opAddEl, function () { config.opacity = config.opacity + 0.05 < 1 ? config.opacity + 0.05 : 1; opPercentEl.innerHTML = (config.opacity / 1 * 100).toFixed(0) + '%'; setConfig('opacity', config.opacity); }); // sizeReduceEl.onclick = () => { // config.fontScale = config.fontScale - 0.1 > 0 ? config.fontScale - 0.1 : 0.1 // config.fontScale = Number(config.fontScale.toFixed(1)) // sizeEl.innerHTML = config.fontScale + '倍' // setConfig('fontScale', config.fontScale) // } YbPlayer.tap(sizeReduceEl, function () { config.fontScale = config.fontScale - 0.1 > 0 ? config.fontScale - 0.1 : 0.1; config.fontScale = Number(config.fontScale.toFixed(1)); sizeEl.innerHTML = config.fontScale + '倍'; setConfig('fontScale', config.fontScale); }); // sizeAddEl.onclick = () => { // config.fontScale = config.fontScale + 0.1 < 3 ? config.fontScale + 0.1 : 3 // config.fontScale = Number(config.fontScale.toFixed(1)) // sizeEl.innerHTML = config.fontScale + '倍' // setConfig('fontScale', config.fontScale) // } YbPlayer.tap(sizeAddEl, function () { config.fontScale = config.fontScale + 0.1 < 3 ? config.fontScale + 0.1 : 3; config.fontScale = Number(config.fontScale.toFixed(1)); sizeEl.innerHTML = config.fontScale + '倍'; setConfig('fontScale', config.fontScale); }); // diReduceEl.onclick = () => { // config.timeDiffrence = config.timeDiffrence - 1 // diffrenceEl.innerHTML = config.timeDiffrence + '秒' // setConfig('timeDiffrence', config.timeDiffrence) // } YbPlayer.tap(diReduceEl, function () { config.timeDiffrence = config.timeDiffrence - 1; diffrenceEl.innerHTML = config.timeDiffrence + '秒'; setConfig('timeDiffrence', config.timeDiffrence); }); // diAddEl.onclick = () => { // config.timeDiffrence = config.timeDiffrence + 1 // diffrenceEl.innerHTML = config.timeDiffrence + '秒' // setConfig('timeDiffrence', config.timeDiffrence) // } YbPlayer.tap(diAddEl, function () { config.timeDiffrence = config.timeDiffrence + 1; diffrenceEl.innerHTML = config.timeDiffrence + '秒'; setConfig('timeDiffrence', config.timeDiffrence); }); var _configTimer = null; var _this = this; function setConfig(key, value) { if (_configTimer) { window.clearTimeout(_configTimer); _configTimer = null; } _configTimer = window.setTimeout(function () { _this.custom.danmu = config; if (_this.cm) { _this.cm.setConfig(key, value); if (['timeDiffrence', 'disableScroll', 'disableTop', 'disableBottom', 'fontScale'].includes(key)) _this.cm.reset(); } _this.emit('danmuconfigchange', config); //派发弹幕配置更改事件,以便开发者外部记录 }, 500); } this.showPopup('弹幕设置', div); } //展示弹幕过滤设置弹窗 }, { key: "showDanmuFilter", value: function showDanmuFilter() { var _this15 = this; this.hideControls(); var config = this.custom.danmu || {}; var fontSize = config.fontSize; var div = document.createElement('DIV'); var type = 'string'; div.innerHTML = "\n\t\t\t
\n\t\t\t\t\u8FC7\u6EE4\u5185\u5BB9\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u8FC7\u6EE4\u7C7B\u578B\n\t\t\t\t
\n\t\t\t\t\t\u6587\u672C\n\t\t\t\t\t\u6B63\u5219\n\t\t\t\t
\n\t\t\t
\n\t\t"); var filter = this.cm ? this.cm.filter : null; var rules = filter ? filter.getRules() : []; rules.forEach(pushRuleEl); //绑定规则类型点击选择事件 var typeEls = div.querySelectorAll('.yb-player-danmu-filter-type'); typeEls.forEach(function (typeEl) { // typeEl.onclick = () => { // typeEls.forEach(el => el.classList.remove('yb-player-setting-switch-active')) // typeEl.classList.add('yb-player-setting-switch-active') // type = typeEl.getAttribute('data-type') // } YbPlayer.tap(typeEl, function () { typeEls.forEach(function (el) { return el.classList.remove('yb-player-setting-switch-active'); }); typeEl.classList.add('yb-player-setting-switch-active'); type = typeEl.getAttribute('data-type'); }); }); //绑定规则点击添加事件 var addEl = div.querySelector('.yb-player-danmu-filter-add'); YbPlayer.tap(addEl, function () { var textEl = div.querySelector('.yb-player-danmu-filter-text'); if (!textEl.value) { _this15.showToast('请输入过滤内容'); return; } if (filter) { //删除过滤规则 var rule = { pattern: textEl.value, type: type }; if (!filter.add(rule)) { _this15.showToast('添加过滤规则内容重复'); return; } //重置弹幕 _this15.cm.reset(); //绘制规则列表 pushRuleEl(rule, filter.getRules().length - 1); //清空文本框 textEl.value = ''; _this15.showToast('成功添加规则'); //抛出过滤规则增加事件 _this15.emit('danmufilteradd', { index: filter.getRules().length - 1, detail: rule }); } }); //绘制规则列表 var _this = this; function pushRuleEl(rule, key) { var el = document.createElement('DIV'); el.setAttribute('class', 'yb-player-filter-item'); el.innerHTML = "\n\t\t\t\t").concat(rule.type == 'string' ? '文本' : '正则', "\n\t\t\t\t").concat(rule.pattern, "\n\t\t\t\t\n\t\t\t"); var btn = el.getElementsByTagName('button')[0]; YbPlayer.tap(btn, function () { var filter = _this.cm ? _this.cm.filter : null; if (filter) { //删除过滤规则 filter.remove(key); //重置弹幕 _this.cm.reset(); //抛出过滤规则删除事件 _this.emit('danmufilterreduce', { index: key, detail: rule }); _this.showToast('成功删除规则'); } //移除元素 el.remove(); }); div.appendChild(el); } this.showPopup('弹幕过滤', div); } //展示弹幕发送弹窗 }, { key: "showDanmuSend", value: function showDanmuSend() { var _this16 = this; if (this.video) this.video.pause(); this.hideControls(); var config = this.custom.danmu || {}; var fontSize = config.fontSize; var div = document.createElement('DIV'); var mode = 1; var boxWidth = this.container.offsetWidth; div.setAttribute('style', 'width:' + boxWidth * (7 / 10) + 'px'); div.innerHTML = "\n\t\t\t
\n\t\t\t\t\u5F39\u5E55\u5185\u5BB9\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5F39\u5E55\u7C7B\u578B\n\t\t\t\t
\n\t\t\t\t\t\u6EDA\u52A8\n\t\t\t\t\t\u9876\u7AEF\n\t\t\t\t\t\u5E95\u7AEF\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5F39\u5E55\u5927\u5C0F\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t").concat(fontSize, "\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t\u5F39\u5E55\u989C\u8272\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\u53D1\u9001
\n\t\t"); var textEl = div.getElementsByClassName('yb-player-danmu-send-textarea')[0]; var typeEls = div.getElementsByClassName('yb-player-danmu-send-type'); var colorEl = div.getElementsByClassName('yb-player-danmu-send-color')[0]; var sizeEl = div.getElementsByClassName('yb-player-setting-danmu-size')[0]; var reduceEl = div.getElementsByClassName('yb-player-setting-danmu-size-reduce')[0]; var addEl = div.getElementsByClassName('yb-player-setting-danmu-size-add')[0]; var btnEl = div.getElementsByClassName('yb-player-danmu-send-btn')[0]; var _loop3 = function _loop3(i) { // typeEls[i].onclick = () => { // for ( let j = 0; j < typeEls.length; j++ ) typeEls[j].classList.remove('yb-player-setting-switch-active') // typeEls[i].classList.add('yb-player-setting-switch-active') // mode = typeEls[i].getAttribute('data-type') // } YbPlayer.tap(typeEls[i], function () { for (var j = 0; j < typeEls.length; j++) typeEls[j].classList.remove('yb-player-setting-switch-active'); typeEls[i].classList.add('yb-player-setting-switch-active'); mode = typeEls[i].getAttribute('data-type'); }); }; for (var i = 0; i < typeEls.length; i++) { _loop3(i); } textEl.oninput = function () { textEl.style.height = textEl.scrollHeight > 100 ? 100 : textEl.scrollHeight < 35 ? 35 : textEl.scrollHeight; }; // reduceEl.onclick = () => { // fontSize = fontSize - 1 > 14 ? fontSize - 1 : 14 // sizeEl.innerHTML = fontSize // } YbPlayer.tap(reduceEl, function () { fontSize = fontSize - 1 > 14 ? fontSize - 1 : 14; sizeEl.innerHTML = fontSize; }); // addEl.onclick = () => { // fontSize = fontSize + 1 < 30 ? fontSize + 1 : 30 // sizeEl.innerHTML = fontSize // } YbPlayer.tap(addEl, function () { fontSize = fontSize + 1 < 30 ? fontSize + 1 : 30; sizeEl.innerHTML = fontSize; }); // btnEl.onclick = () => { // if ( !textEl.value ) { // this.showToast('请输入弹幕内容') // return // } // this.sendDanmu({ // mode, // text: textEl.value, // color: colorEl.value, // fontSize: fontSize // }, true) // this.hidePopup() // } YbPlayer.tap(btnEl, function () { if (!textEl.value) { _this16.showToast('请输入弹幕内容'); return; } _this16.sendDanmu({ mode: mode, text: textEl.value, color: colorEl.value, fontSize: fontSize }, true); _this16.hidePopup(); }); this.showPopup('发送弹幕', div, 'center'); } //加载自定义内容 }, { key: "loadCustom", value: function loadCustom() { var _this17 = this; //加载自定义进度条栏 var progressEl = this.container.getElementsByClassName('yb-player-progress')[0]; if (progressEl) { var progress = this.custom.progress || {}; //获取进度条栏配置 var lSlots = YbPlayer.deepClone(progress.leftSlots || []); //获取左边插槽 var rSlots = YbPlayer.deepClone(progress.rightSlots || []); //获取右边插槽 //是否展示播放下一个按钮 if (!progress.disableNext && this.works && this.works.length > 0) { lSlots.unshift({ innerHTML: "".concat(this.workIndex < this.works.length - 1 ? YbPlayer.nextIcon : '', ""), click: function click() { _this17.next(); } }); } if (!progress.disableToggle) { lSlots.unshift({ innerHTML: "".concat(this.video.paused ? YbPlayer.playIcon : YbPlayer.pauseIcon, ""), click: function click() { _this17.toggle(); } }); } //是否展示播放上一个按钮 if (!progress.disablePrev && this.works && this.works.length > 0) { lSlots.unshift({ innerHTML: "".concat(this.workIndex > 0 ? YbPlayer.prevIcon : '', ""), click: function click() { _this17.prev(); } }); } lSlots.push({ innerHTML: "\n\t\t\t\t\t
\n\t\t\t\t\t\t".concat(this.isLive ? '直播中 · ' : '').concat(typeof this.video.currentTime == 'number' ? YbPlayer.timeFormat(this.video.currentTime) : '开始', "\n\t\t\t\t\t\t").concat(!this.isLive ? "\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t".concat(!progress.disableRange ? '
' : '', "\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t").concat(this.getDuration() ? YbPlayer.timeFormat(this.getDuration()) : '结束', "\n\t\t\t\t\t\t") : '', "\n\t\t\t\t\t
\n\t\t\t\t"), click: function click() {} }); if (!progress.disableFullscreen) { rSlots.push({ innerHTML: "".concat(this.getFullscreen() ? YbPlayer.exitfullIcon : YbPlayer.openfullIcon, ""), click: function click() { if (_this17.getFullscreen()) _this17.exitFullscreen();else _this17.openFullscreen(); } }); } var arr = lSlots.concat(rSlots); arr.forEach(function (item, key) { progressEl.innerHTML += item.innerHTML; }); var children = progressEl.children; for (var i = 0; i < children.length; i++) { // children[i].onclick = arr[i].click YbPlayer.tap(children[i], arr[i].click); //如果标记了非全屏元素,则在全屏时需要隐藏 if (children[i].classList.contains('yb-player-unfull') && this.getFullscreen()) { children[i].classList.add('yb-player-hide'); } } //是否关闭进度条拖动 if (!progress.disableRange) this.loadRange(); } //加载控制栏自定义配置 var controlsBottomEl = this.container.getElementsByClassName('yb-player-controls-bottom')[0]; if (controlsBottomEl) { var controls = this.custom.controls || {}; //获取控制栏配置 var lSlots = YbPlayer.deepClone(controls.leftSlots || []); //获取左边插槽 var rSlots = YbPlayer.deepClone(controls.rightSlots || []); //获取右边吧插槽 //是否展示播放下一个按钮 if (!controls.disableNext && this.works && this.works.length > 0) { lSlots.unshift({ innerHTML: "".concat(this.workIndex < this.works.length - 1 ? YbPlayer.nextIcon : '', ""), click: function click() { _this17.next(); } }); } if (!controls.disableToggle) { lSlots.unshift({ innerHTML: "".concat(this.video.paused ? YbPlayer.playIcon : YbPlayer.pauseIcon, ""), click: function click() { _this17.toggle(); } }); } //是否展示播放上一个按钮 if (!controls.disablePrev && this.works && this.works.length > 0) { lSlots.unshift({ innerHTML: "".concat(this.workIndex > 0 ? YbPlayer.prevIcon : '', ""), click: function click() { _this17.prev(); } }); } if (this.cm && !controls.disableDanmuSend) { lSlots.push({ innerHTML: "
\u53D1\u6761\u5F39\u5E55\u5427
", click: function click() { if (_this17.getPopup()) _this17.hidePopup();else _this17.showDanmuSend(); } }); } else { lSlots.push({ innerHTML: "
", click: function click(e) { e.preventDefault(); } }); } //显示手势开启\关闭按钮 if (this.pano && !controls.disablePanoControlsType) { var controlsType = this.pano.getControlsType(); rSlots.push({ innerHTML: "").concat(controlsType == 'orientation' ? '陀螺仪' : controlsType == 'orbit' ? '滑动' : '传感器', ""), click: function click() { _this17.showPanoControls(); } }); } //显示画质切换按钮 if (this.quality && this.quality.length > 0 && !controls.disableQuality) { var index = this.quality.findIndex(function (q) { return q.src == _this17.src; }); var title = index > -1 ? this.quality[index].title : ''; var quality = this.custom.quality || {}; var qualityName = quality.name || '画质'; rSlots.push({ innerHTML: "".concat(title || qualityName, ""), click: function click() { if (_this17.getToolbar()) _this17.hideToolbar();else _this17.showQuality(); } }); } //显示字幕切换按钮 if (!controls.disableSubtitle && this.subtitles && this.subtitles.length > 0) { rSlots.push({ innerHTML: "\u5B57\u5E55"), click: function click() { if (_this17.getToolbar()) _this17.hideToolbar();else _this17.showSubtitle(); } }); } //显示弹幕开启\关闭按钮 if (this.cm && !controls.disableDanmuVisible) { rSlots.push({ innerHTML: "\u5F39\u5E55"), click: function click() { if (_this17.getDanmuVisible()) _this17.hideDanmu();else _this17.showDanmu(); } }); } //显示静音按钮 if (!controls.disableMuted) { rSlots.push({ innerHTML: "").concat(YbPlayer.voiceIcon, ""), click: function click() { _this17.video.muted = !_this17.video.muted; } }); } var arr = lSlots.concat(rSlots); if (arr.length == 0) controlsBottomEl.style.display = 'none'; arr.forEach(function (item, key) { controlsBottomEl.innerHTML += item.innerHTML; }); var children = controlsBottomEl.children; for (var _i = 0; _i < children.length; _i++) { // children[i].onclick = arr[i].click YbPlayer.tap(children[_i], arr[_i].click); } } //加载头部自定义内容 var heightEl = this.container.getElementsByClassName('yb-player-header')[0]; if (heightEl) { var header = this.custom.header || {}; //获取头部自定义配置 var lSlots = YbPlayer.deepClone(header.leftSlots || []); //获取左边插槽 var rSlots = YbPlayer.deepClone(header.rightSlots || []); //获取右边吧插槽 //是否开启返回按钮 if (!header.disableBack) { lSlots.push({ innerHTML: "".concat(YbPlayer.backIcon, ""), click: function click() { if (_this17.getFullscreen()) _this17.exitFullscreen();else _this17.emit('back'); } }); } //是否开启顶部标题 if (!header.disableTitle) { lSlots.push({ innerHTML: "".concat(this.title, ""), click: function click(e) { e.preventDefault(); } }); } //是否开启分P选择 if (!header.disableWorks && this.works && this.works.length > 0) { var work = this.custom.work || {}; var worksName = work.name || '分P'; rSlots.push({ innerHTML: "".concat(worksName, ""), click: function click() { if (_this17.getPopup()) _this17.hidePopup();else _this17.showWorks(); } }); } //是否开启倍速选择 if (!header.disableRate) { rSlots.push({ innerHTML: "\u500D\u901Fx".concat(this.video.playbackRate, ""), click: function click() { if (_this17.getToolbar()) _this17.hideToolbar();else _this17.showPlaybackRate(); } }); } //是否开启3D选择 if (header.enableThree) { rSlots.push({ innerHTML: "".concat(this.three == 'none' ? '关闭3D' : this.three, ""), click: function click() { if (_this17.getToolbar()) _this17.hideToolbar();else _this17.showThree(); } }); } //是否展示更多按钮 if (!header.disableMore) { rSlots.push({ innerHTML: "".concat(YbPlayer.moreIcon, ""), click: function click() { if (_this17.getToolbar()) _this17.hideToolbar();else _this17.showMoreSetting(); } }); } var arr = lSlots.concat(rSlots); arr.forEach(function (slot, key) { heightEl.innerHTML += slot.innerHTML; }); var children = heightEl.children; for (var _i2 = 0; _i2 < children.length; _i2++) { // children[i].onclick = arr[i].click YbPlayer.tap(children[_i2], arr[_i2].click); } } //加载其它自定义内容 var slots = YbPlayer.deepClone(this.custom.slots || []); var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; if (slots.length > 0 && wrapperEl) { var slotEl = document.createElement('DIV'); slotEl.setAttribute('class', 'yb-player-slot'); slots.forEach(function (slot, key) { slotEl.innerHTML += slot.innerHTML; }); var children = slotEl.children; for (var _i3 = 0; _i3 < children.length; _i3++) { // children[i].onclick = slots[i].click YbPlayer.tap(children[_i3], slots[_i3].click); if (slots[_i3].followControls) { children[_i3].setAttribute('data-controls', 1); if (!this.getControls()) children[_i3].classList.add('yb-player-hide'); } } wrapperEl.appendChild(slotEl); } //重新设置一次全屏状态 this._setFullscreenStatus(); } //卸载自定义 }, { key: "unloadCustom", value: function unloadCustom() { //卸载进度条栏自定义内容 var progressEl = this.container.getElementsByClassName('yb-player-progress')[0]; this.unloadRange(); var children = progressEl.children; // for ( let i = 0; i < children.length; i++ ) children[i].onclick = null progressEl.innerHTML = ''; //卸底部控制栏自定义内容 var controlsBottomEl = this.container.getElementsByClassName('yb-player-controls-bottom')[0]; var children = controlsBottomEl ? controlsBottomEl.childen : []; // for ( let i = 0; i < children.length; i++ ) children[i].onclick = null controlsBottomEl.innerHTML = ''; //卸载头部自定义内容 var heightEl = this.container.getElementsByClassName('yb-player-header')[0]; var children = heightEl ? heightEl.childen : []; // for ( let i = 0; i < children.length; i++ ) children[i].onclick = null heightEl.innerHTML = ''; //卸载其它自定义内容 var slotEl = this.container.getElementsByClassName('yb-player-slot')[0]; var children = slotEl ? slotEl.children : []; // for ( let i = 0; i < children.length; i++ ) children[i].onclick = null if (slotEl) slotEl.remove(); slotEl = null; } //注册手势事件 }, { key: "loadGestureEvent", value: function loadGestureEvent() { this.gesture = new YbGesture(this, this.custom.gesture || {}); this.gesture.load(); if (this.pano) { //如果开启了3D模式 var controlsType = this.pano.getControlsType(); //判断控制器类型来控制是否禁用手势事件 if (controlsType == 'gyro') this.enableGesture();else this.disableGesture(); } } //注销手势事件 }, { key: "unloadGestureEvent", value: function unloadGestureEvent() { this.gesture.unload(); this.gesture = null; } //禁用手势事件 }, { key: "disableGesture", value: function disableGesture() { if (this.gesture) this.gesture.disable(); } //启用手势事件 }, { key: "enableGesture", value: function enableGesture() { if (this.gesture) this.gesture.enable(); } //加载进度条 }, { key: "loadRange", value: function loadRange() { var _this18 = this; var progress = this.custom.progress || {}; var rangeEl = this.container.getElementsByClassName('yb-player-range-box')[0]; var focusEl = this.container.getElementsByClassName('yb-player-range-focus')[0]; var thumbEl = this.container.getElementsByClassName('yb-player-range-thumb')[0]; var timeEl = this.container.getElementsByClassName('yb-player-time')[0]; var _touchstartX = null; var _touchstartY = null; var _rate = null; var _mousedown = null; if (rangeEl) { var touchstart = function touchstart(e) { if (!_this18.video || !_this18.getDuration()) return; //视频未加载前,进度条禁止拖动 _this18.showControls(); _this18._isSeeking = true; var touch = e.touches[0]; _touchstartX = touch.pageX; _touchstartY = touch.pageY; var touchstartX = _touchstartX; //根据旋转方向获取 touchstartX = touchstartX - rangeEl.offsetLeft; var rangeWidth = rangeEl.offsetWidth; touchstartX = touchstartX < 0 ? 0 : touchstartX > rangeWidth ? rangeWidth : touchstartX; setProgress(touchstartX); }; var touchmove = function touchmove(e) { if (_touchstartX >= 0 || _touchstartY >= 0) { _this18.showControls(); var touch = e.touches[0]; var touchmoveX = touch.pageX; touchmoveX = touchmoveX - rangeEl.offsetLeft; var rangeWidth = rangeEl.offsetWidth; touchmoveX = touchmoveX < 0 ? 0 : touchmoveX > rangeWidth ? rangeWidth : touchmoveX; setProgress(touchmoveX); } }; var touchend = function touchend(e) { if (_rate >= 0) _this18.seek(_this18.getDuration() * _rate); _touchstartX = null; _touchstartY = null; _rate = null; _this18._isSeeking = false; }; var setProgress = function setProgress(touchX) { var rangeWidth = rangeEl.offsetWidth; _rate = touchX / rangeWidth; focusEl.style.width = _rate * 100 + '%'; thumbEl.style.transform = "translate(calc(-50% + ".concat(_rate * rangeWidth, "px), -50%)"); timeEl.innerHTML = YbPlayer.timeFormat(_this18.getDuration() * _rate); }; rangeEl.oncontextmenu = function (event) { event.preventDefault(); }; rangeEl.ontouchstart = touchstart; rangeEl.ontouchmove = touchmove; rangeEl.ontouchend = touchend; rangeEl.ontouchcancel = touchend; rangeEl.onmousedown = function (e) { if ('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) return; //设备支持触屏则不触发mousedown _mousedown = true; touchstart({ touches: [{ pageX: e.pageX, pageY: e.pageY }] }); }; rangeEl.onmousemove = function (e) { if (!_mousedown) return; touchmove({ touches: [{ pageX: e.pageX, pageY: e.pageY }] }); }; rangeEl.onmouseup = function (e) { if (!_mousedown) return; _mousedown = false; touchend({ touches: [{ pageX: e.pageX, pageY: e.pageY }] }); }; } } //卸载进度条 }, { key: "unloadRange", value: function unloadRange() { var rangeEl = this.container.getElementsByClassName('yb-player-range-box')[0]; if (rangeEl) { rangeEl.oncontextmenu = null; rangeEl.ontouchstart = null; rangeEl.ontouchmove = null; rangeEl.ontouchend = null; rangeEl.ontouchcancel = null; rangeEl.onmousedown = null; rangeEl.onmousemove = null; rangeEl.onmouseup = null; } } //注册事件监听 }, { key: "on", value: function on(event, callback) { this._event[event] = callback; } //注销事件监听 }, { key: "off", value: function off(event) { var _this19 = this; this._event[event] = null; var obj = {}; Object.keys(this._event).forEach(function (key) { if (_this19._event[key]) obj[key] = _this19._event[key]; }); this._event = obj; } /** * 主动触发事件 * @param {String} event 事件名称 * @param {Any} data 传递参数 */ }, { key: "emit", value: function emit(event, data) { var handle = this._event[event]; handle && handle(data); var arg = {}; arg[event] = ['undefined', 'null'].includes(_typeof(data)) ? true : data; this._event.onmessage && this._event.onmessage(YbPlayer.deepClone(arg)); } //动态修改video配置 }, { key: "setVideo", value: function setVideo(key, value) { if (this.video) this.video[key] = value; } //动态主要配置 }, { key: "setConfig", value: function setConfig(key, value) { var _this20 = this; Object.keys(this).forEach(function (k) { if (k == key) _this20[k] = value; }); } //动态手势事件配置 }, { key: "setGesture", value: function setGesture(key, value) { this.custom.gesture[key] = value; this.gesture.setConfig(key, value); } //动态字幕配置 }, { key: "setSubtitle", value: function setSubtitle(key, value) { this.custom.subtitle[key] = value; this.subtitle.setConfig(key, value); } //弹幕动态配置,动态改变需要重新装载弹幕 }, { key: "setDanmu", value: function setDanmu(key, value) { this.custom.danmu[key] = value; this.cm.setConfig(key, value); } //自定义动态配置,动态改变该配置需要unloadCustom再loadCustom }, { key: "setCustom", value: function setCustom(key, value) { this.custom[key] = value; } /** * 设置元素内容 * @param selector 选择器 * @param content 修改的内容 */ }, { key: "setInnerHTML", value: function setInnerHTML(selector, content) { var dom = this.container.getElementsByClassName(selector); if (dom && dom.length > 0) { if (dom.length > 1) for (var i = 0; i < dom.length; i++) dom[i].innerHTML = content;else dom[0].innerHTML = content; } } //获取是否加载错误 }, { key: "getError", value: function getError() { return this.container.getElementsByClassName('yb-player-error')[0]; } //获取是否在加载中 }, { key: "getLoading", value: function getLoading() { return this.container.getElementsByClassName('yb-player-loading')[0]; } //获取是否全屏 }, { key: "getFullscreen", value: function getFullscreen() { return document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement || this.container.classList.contains('yb-player-openfull'); } //获取全屏类型 }, { key: "getFullscreenType", value: function getFullscreenType() { return document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement ? 'api' : 'css'; } //获取控制栏是否显示中 }, { key: "getControls", value: function getControls() { var controlsEl = this.container.getElementsByClassName('yb-player-controls')[0]; var locksEl = this.container.getElementsByClassName('yb-player-locks')[0]; return controlsEl.classList.contains('yb-player-controls-show') || !locksEl.classList.contains('yb-player-hide'); } //获取弹幕是否显示 }, { key: "getDanmuVisible", value: function getDanmuVisible() { return this.cm ? this.cm.getVisible() : false; } //是否有工具栏正在显示 }, { key: "getToolbar", value: function getToolbar() { return this.container.getElementsByClassName('yb-player-toolbar')[0]; } //是否有弹窗正在显示 }, { key: "getPopup", value: function getPopup() { return this.container.getElementsByClassName('yb-player-popup')[0]; } //获取播放时长 }, { key: "getDuration", value: function getDuration() { return this.video ? this.duration ? Math.min(this.duration, this.video.duration) : this.video.duration : 0; } //获取video元素对象 }, { key: "getVideoElement", value: function getVideoElement() { return this.video && this.video.canvas ? this.video.canvas : this.video; } //开启锁屏 }, { key: "disable", value: function disable() { this.disabled = true; this.hideControls(); this.showControls(); var llockEL = this.container.getElementsByClassName('yb-player-lock-left')[0]; var rlockEL = this.container.getElementsByClassName('yb-player-lock-right')[0]; llockEL.innerHTML = YbPlayer.lockIcon; rlockEL.innerHTML = YbPlayer.lockIcon; } //解开锁屏 }, { key: "enable", value: function enable() { this.disabled = false; this.showControls(); var llockEL = this.container.getElementsByClassName('yb-player-lock-left')[0]; var rlockEL = this.container.getElementsByClassName('yb-player-lock-right')[0]; llockEL.innerHTML = YbPlayer.unlockIcon; rlockEL.innerHTML = YbPlayer.unlockIcon; } /** * 截图 * @param {String} type 截图类型 video-使用video元素截图 three-将3D元素截图 * @param {String} show 展示截图 */ }, { key: "capture", value: function capture() { var _this21 = this; var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'video'; var show = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var element = type == 'video' ? this.getVideoElement() : this.container.getElementsByClassName('yb-player-pano')[0].children[0]; if (!element) { this.showToast('视频还未加载'); return; } this.hideControls(); this.video.pause(); var canvas = document.createElement('canvas'); canvas.width = type == 'video' ? this.video.videoWidth : element.offsetWidth; canvas.height = type == 'video' ? this.video.videoHeight : element.offsetHeight; canvas.getContext('2d').drawImage(element, 0, 0, canvas.width, canvas.height); try { canvas.toBlob(function (blob) { var base64 = canvas.toDataURL('image/jpg'); var captureData = { blob: blob, base64: base64 }; var url = URL.createObjectURL(blob); canvas = null; _this21.emit('capturefinish', captureData); if (show) { var wrapperEL = _this21.container.getElementsByClassName('yb-player-wrapper')[0]; var div = document.createElement('DIV'); div.setAttribute('class', 'yb-player-capture-popup'); div.innerHTML = "\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\u5173\u95ED
\n\t\t\t\t\t\t\t
\u4FDD\u5B58
\n\t\t\t\t\t\t
\n\t\t\t\t\t"); var closeEl = div.getElementsByClassName('yb-player-capture-close')[0]; var saveEl = div.getElementsByClassName('yb-player-capture-save')[0]; YbPlayer.tap(closeEl, function () { div.remove(); div = null; URL.revokeObjectURL(url); }); // closeEl.onclick = () => { // div.remove() // div = null // closeEl.onclick = null // URL.revokeObjectURL(url); // } YbPlayer.tap(saveEl, function () { div.remove(); div = null; URL.revokeObjectURL(url); _this21.saveCapture(captureData); }); // saveEl.onclick = () => { // div.remove() // div = null // saveEl.onclick = null // URL.revokeObjectURL(url); // this.saveCapture(captureData) // } wrapperEL.appendChild(div); } }, 'image/jpg'); } catch (e) { this.showToast('截图失败,请检查视频链接是否跨域'); //截图失败,多半是跨域导致的 this.emit('captureerror', { type: type, errMsg: e.toString() }); } } }, { key: "saveCapture", value: function () { var _saveCapture = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(data) { var fileName, a, url, filePath, code, _t; return _regenerator().w(function (_context3) { while (1) switch (_context3.p = _context3.n) { case 0: fileName = new Date().getTime().toString() + Math.round(Math.random() * 10000) + '.jpg'; if (navigator.userAgent.includes('uni-app')) { _context3.n = 1; break; } //非uni-app环境,使用a标签下载 a = document.createElement('A'); url = URL.createObjectURL(data.blob); a.href = url; a.setAttribute('download', fileName); // 兼容:某些浏览器不支持HTML5的download属性 if (typeof a.download === "undefined") { a.setAttribute("target", "_blank"); } a.click(); a.remove(); URL.revokeObjectURL(url); _context3.n = 6; break; case 1: //如果plus属性不为空,说明在h5+环境下,直接调用plusAPI.实现图片保存到临时路径 filePath = '', code = 404; if (!(_typeof(window.plus) == 'object')) { _context3.n = 5; break; } _context3.p = 2; _context3.n = 3; return this.saveBase64ImageToAlbum(data.base64, fileName); case 3: filePath = _context3.v; code = 200; this.showToast('保存到相册成功'); _context3.n = 5; break; case 4: _context3.p = 4; _t = _context3.v; code = 401; this.showToast('保存到相册失败'); case 5: this.emit('capturesaved', { code: code, fileName: fileName, filePath: filePath, data: data }); case 6: return _context3.a(2); } }, _callee3, this, [[2, 4]]); })); function saveCapture(_x) { return _saveCapture.apply(this, arguments); } return saveCapture; }() /** * 保存base64图片到相册(仅限5+环境) * @param {String} base64 图片 * @param {String} fileName 图片名称 */ }, { key: "saveBase64ImageToAlbum", value: function saveBase64ImageToAlbum(base64, fileName) { return new Promise(function (resolve, reject) { var basePath = '_doc'; var dirPath = 'uniapp_temp'; var tempFilePath = basePath + '/' + dirPath + '/' + fileName; var bitmap = new plus.nativeObj.Bitmap(fileName); bitmap.loadBase64Data(base64, function () { bitmap.save(tempFilePath, {}, function () { bitmap.clear(); plus.gallery.save(tempFilePath, function (e) { resolve(e.path); }, function (error) { reject(error); }); }, function (error) { bitmap.clear(); reject(error); }); }, function (error) { bitmap.clear(); reject(error); }); }); } //展示loading }, { key: "showLoading", value: function showLoading() { this.hideCenter(); if (this.custom.disableLoading) return; //是否关闭了loading var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; var div = document.createElement('DIV'); div.setAttribute('class', 'yb-player-center yb-player-loading'); div.innerHTML = YbPlayer.loadIcon; wrapperEl.appendChild(div); } //关闭loading }, { key: "hideLoading", value: function hideLoading() { var div = this.container.getElementsByClassName('yb-player-loading')[0]; if (div) div.remove(); if (this.video.paused) this.showCenterPlay();else this.hideCenter(); } //展示中间播放按钮 }, { key: "showCenterPlay", value: function showCenterPlay() { var _this22 = this; this.hideCenter(); if (this.custom.disableCenterPlay) return; //是否关闭了中间按钮 var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; var div = document.createElement('DIV'); div.setAttribute('class', 'yb-player-center yb-player-center-play'); div.innerHTML = YbPlayer.playcenterIcon; YbPlayer.tap(div, function () { _this22.video.play(); div.onclick = null; div.remove(); div = null; }); // div.onclick = () => { // this.video.play() // div.onclick = null // div.remove() // div = null // } wrapperEl.appendChild(div); } //展示错误提示 }, { key: "showError", value: function showError(errorMsg) { var _this23 = this; this.initialTime = this.currentTime; //记录当前播放时间,重启视频后定位回来 this.hideCenter(); if (this.custom.disableError) return; //是否关闭错误提示 var wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; var div = document.createElement('DIV'); div.setAttribute('class', 'yb-player-center yb-player-error'); div.innerHTML = "\n\t\t\t".concat(YbPlayer.errorIcon, "\n\t\t\t").concat(errorMsg || '加载失败', "\n\t\t"); // div.onclick = () => { // this.unloadVideo() // this.loadVideo('error') // div.onclick = null // div.remove() // div = null // } YbPlayer.tap(div, function () { _this23.unloadVideo(); _this23.loadVideo('error'); div.onclick = null; div.remove(); div = null; }); wrapperEl.appendChild(div); } //关闭视频中间显示的任何内容 }, { key: "hideCenter", value: function hideCenter() { var divs = this.container.querySelectorAll('.yb-player-center'); divs.forEach(function (div) { return div.remove(); }); } //展示消息提示 }, { key: "showToast", value: function showToast(data) { var _this24 = this; this._clearToastTimer(); var options = typeof data == 'string' ? { message: data, duration: 2000 } : data; var toastEl = this.container.getElementsByClassName('yb-player-toast')[0]; if (toastEl) { toastEl.innerHTML = '' + options.message + ''; toastEl.classList.remove('yb-player-toast-hide'); toastEl.classList.add('yb-player-toast-show'); this._toastTimer = window.setTimeout(function () { _this24.hideToast(); }, options.duration); } } //关闭消息提示 }, { key: "hideToast", value: function hideToast() { this._clearToastTimer(); var toastEl = this.container.getElementsByClassName('yb-player-toast')[0]; if (toastEl) { toastEl.classList.remove('yb-player-toast-show'); toastEl.classList.add('yb-player-toast-hide'); } } //播放/暂停 }, { key: "toggle", value: function toggle() { this.video.paused ? this.video.play() : this.video.pause(); } /** * 跳转进度条 * @param {Number} time 进度位置(单位s) */ }, { key: "seek", value: function seek(time) { if (this.video) this.video.currentTime = time; } //播放上一个视频 }, { key: "prev", value: function prev() { var prevIndex = this.workIndex - 1; this.change(prevIndex < 0 ? 0 : prevIndex); } //播放下一个视频 }, { key: "next", value: function next() { var nextIndex = Number(this.workIndex) + 1; this.change(nextIndex > this.works.length - 1 ? this.works.length - 1 : nextIndex); } //切换视频播放 }, { key: "change", value: function change(index) { this.workIndex = index; this.setInnerHTML('yb-player-prev', index > 0 ? YbPlayer.prevIcon : ''); this.setInnerHTML('yb-player-next', index < this.works.length - 1 ? YbPlayer.nextIcon : ''); this.emit('workchange', { index: index, detail: this.works[index] }); } /** * 设置视频方向 * @param {Boolean} fullscreen 是否全屏 */ }, { key: "setDirection", value: function setDirection(fullscreen) { var _this25 = this; this._isDirection = true; return new Promise(/*#__PURE__*/function () { var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(resolve) { var direction, directionCode, directionMsg, width, height, _t2; return _regenerator().w(function (_context4) { while (1) switch (_context4.p = _context4.n) { case 0: direction = fullscreen ? _this25.openDirection : _this25.exitDirection; //如果打开全屏方向为auto,则自动根据视频尺寸计算屏幕方向 if (_this25.openDirection == 'auto' && fullscreen && _this25.video) { width = _this25.video.videoWidth; height = _this25.video.videoHeight; direction = width < height ? 'portrait' : 'landscape'; } //如果plus属性不为空,说明在h5+环境下,直接调用plusAPI.实现屏幕旋转和隐藏导航栏状态栏等 if (!(_typeof(window.plus) == 'object')) { _context4.n = 1; break; } if (direction) plus.screen.lockOrientation(direction); //锁定屏幕方向 else plus.screen.unlockOrientation(); //解除屏幕方向锁定 directionCode = 200; directionMsg = 'plus.screen.lockOrientation:ok'; //不支持全屏API,需要自行模拟全屏 if (!_this25.isSupportedFull()) { _this25.setSystemFullscreen(fullscreen); //退出全屏前调用setFullscreen(false),才会生效 if (fullscreen) { _this25._bindbackbutton = _this25.exitFullscreen.bind(_this25); plus.key.addEventListener("backbutton", _this25._bindbackbutton); //增加返回键监听,用于点击返回退出全屏 } else { _this25._removeBackbuttonListener(); //移除监听事件 } } _context4.n = 9; break; case 1: if (!('screen' in window && 'orientation' in screen && 'lock' in screen.orientation)) { _context4.n = 8; break; } _context4.p = 2; if (!direction) { _context4.n = 4; break; } _context4.n = 3; return screen.orientation.lock(direction); case 3: _context4.n = 5; break; case 4: screen.orientation.unlock(); case 5: //解除屏幕方向锁定 directionCode = 200; directionMsg = 'window.screen.orientation.lock:ok'; _context4.n = 7; break; case 6: _context4.p = 6; _t2 = _context4.v; directionCode = 403; //多半是权限问题导致的锁定屏幕失败,当前设备或目前的条件不允许调用 directionMsg = _t2.toString(); case 7: _context4.n = 9; break; case 8: directionCode = 404; //未找到相应的锁定屏幕函数 directionMsg = 'plus.screen.lockOrientation undefined;window.screen.orientation.lock undefined'; case 9: _this25.emit('directionchange', { to: direction, //预期的屏幕方向 code: directionCode, //锁定屏幕结果码 msg: directionMsg //锁定屏幕的结果消息 }); window.setTimeout(function () { resolve(); }, 200); case 10: return _context4.a(2); } }, _callee4, null, [[2, 6]]); })); return function (_x2) { return _ref2.apply(this, arguments); }; }())["catch"](function (err) { resolve(); }); } /** * 设置系统fullscreen * @param {Boolean} fullscreen 是否全屏 */ }, { key: "setSystemFullscreen", value: function setSystemFullscreen(fullscreen) { if (_typeof(window.plus) != 'object') return; if (fullscreen) { plus.navigator.setFullscreen(true); //调用系统全屏 plus.navigator.hideSystemNavigation(); //隐藏系统导航栏 } else { plus.navigator.setFullscreen(false); //退出系统全屏 window.setTimeout(function () { //不延迟,无法重新显示导航栏 plus.navigator.showSystemNavigation(); //隐藏系统导航栏 }, 200); } } //退出全屏 }, { key: "exitFullscreen", value: function exitFullscreen() { var _this26 = this; this.setDirection(false).then(function () { var cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.webkitExitFullscreen; if (typeof cfs != 'undefined' && cfs) { cfs.call(document); } else if (typeof window.ActiveXObject !== "undefined") { //IE浏览器,模拟按下F11键退出全屏 var wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } else { _this26.container.classList.remove('yb-player-openfull'); _this26._fullscreenchanged(); } }); } //开启全屏 }, { key: "openFullscreen", value: function openFullscreen(direction) { var _this27 = this; this.openDirection = direction || this.openDirection; this.setDirection(true).then(function () { var rfs = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen; if (typeof rfs != 'undefined' && rfs) { rfs.call(_this27.container); } else if (typeof window.ActiveXObject !== "undefined") { //IE浏览器,模拟按下F11全屏 var wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } else { _this27._fullscreenerror(); } }); } //是否支持全屏API }, { key: "isSupportedFull", value: function isSupportedFull() { if (document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen) { return true; } else if (typeof window.ActiveXObject !== "undefined") { return true; } else { return false; } } //展示控制栏 }, { key: "showControls", value: function showControls() { var _this28 = this; this._clearControlsTimer(); if (this.disabled) { //锁屏之后显示锁屏图标 this.container.getElementsByClassName('yb-player-locks')[0].classList.remove('yb-player-hide'); } else { //未锁屏则显示控制栏 this.container.getElementsByClassName('yb-player-controls')[0].classList.add('yb-player-controls-show'); var progressEl = this.container.getElementsByClassName('yb-player-progress')[0]; var progressCenterEl = this.container.getElementsByClassName('yb-player-progress-center')[0]; //如果开启了全屏或者非全屏显示头部控制器 if (this.getFullscreen() || this.header) { this.container.getElementsByClassName('yb-player-header')[0].classList.add('yb-player-header-show'); } if (this.getFullscreen()) { if (progressEl) progressEl.style.marginBottom = '15px'; if (progressCenterEl && progressCenterEl.previousElementSibling && progressCenterEl.previousElementSibling.classList.contains('yb-player-hide')) progressCenterEl.style.marginLeft = 0; } else { if (progressEl) progressEl.style.marginBottom = ''; if (progressCenterEl) progressCenterEl.style.marginLeft = '5px'; } var slotEl = this.container.getElementsByClassName('yb-player-slot')[0]; //找到跟随控制栏的插槽内容并显示 var children = slotEl ? slotEl.children : []; for (var i = 0; i < children.length; i++) { if (children[i].getAttribute('data-controls') == 1) { var isFull = children[i].classList.contains('yb-player-full'); //判断是否有全屏元素标记 var isUnFull = children[i].classList.contains('yb-player-unfull'); //判断是否有非全屏元素标记 if (isFull && this.getFullscreen() || isUnFull && !this.getFullscreen() || !isFull && !isUnFull) children[i].classList.remove('yb-player-hide'); } } //隐藏底部进度条 this.container.getElementsByClassName('yb-player-bottom-progress')[0].classList.add('yb-player-hide'); } this.emit('controlschange', { show: true }); this._controlsTimer = window.setTimeout(function () { _this28.hideControls(); }, 5000); } //关闭控制栏 }, { key: "hideControls", value: function hideControls(item, timer) { this._clearControlsTimer(); this.container.getElementsByClassName('yb-player-controls')[0].classList.remove('yb-player-controls-show'); this.container.getElementsByClassName('yb-player-header')[0].classList.remove('yb-player-header-show'); this.container.getElementsByClassName('yb-player-locks')[0].classList.add('yb-player-hide'); var slotEl = this.container.getElementsByClassName('yb-player-slot')[0]; //找到跟随控制栏的插槽内容并隐藏 var children = slotEl ? slotEl.children : []; for (var i = 0; i < children.length; i++) if (children[i].getAttribute('data-controls') == 1) children[i].classList.add('yb-player-hide'); //显示底部进度条 if (!this.custom.disableBottomProgress && !this.isLive) this.container.getElementsByClassName('yb-player-bottom-progress')[0].classList.remove('yb-player-hide'); this.emit('controlschange', { show: false }); } //全屏开启错误事件 }, { key: "_fullscreenerror", value: function _fullscreenerror() { this.container.classList.add('yb-player-openfull'); this._fullscreenchanged(); } //全屏改变事件 }, { key: "_fullscreenchanged", value: function () { var _fullscreenchanged2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() { var e, wrapperEl, _args5 = arguments; return _regenerator().w(function (_context5) { while (1) switch (_context5.n) { case 0: e = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : {}; this._setFullscreenStatus(); this._isDirection = false; wrapperEl = this.container.getElementsByClassName('yb-player-wrapper')[0]; if (this.getFullscreen()) { this.video.style.height = '100%'; wrapperEl.style.height = '100%'; this.emit('fullscreenchange', { fullscreen: true, videoWidth: this.video.videoWidth, videoHeight: this.video.videoHeight, type: this.getFullscreenType() }); } else { this.video.style.height = this.height; wrapperEl.style.height = this.height; this.emit('fullscreenchange', { fullscreen: false, type: e.isTrusted ? 'api' : 'css' }); } //如果没有调用过setDirection,说明是通过其它方式调用的打开全屏或退出全屏,需要去处理屏幕方向 if (!this._isDirection) this.setDirection(this.getFullscreen()); this.refreshDanmu(); this.refreshPano(); this._isDirection = false; case 1: return _context5.a(2); } }, _callee5, this); })); function _fullscreenchanged() { return _fullscreenchanged2.apply(this, arguments); } return _fullscreenchanged; }() //设置全屏改变状态 }, { key: "_setFullscreenStatus", value: function _setFullscreenStatus() { this.hidePopup(); this.hideToolbar(); var controlsEl = this.container.getElementsByClassName('yb-player-controls')[0]; var headerEl = this.container.getElementsByClassName('yb-player-header')[0]; var locksEl = this.container.getElementsByClassName('yb-player-locks')[0]; var unFullEls = this.container.getElementsByClassName('yb-player-unfull'); //获取标记了非全屏的元素 var fullEls = this.container.getElementsByClassName('yb-player-full'); //获取标记了全屏的元素 if (this.getFullscreen()) { //全屏时隐藏非全屏元素 for (var i = 0; i < unFullEls.length; i++) unFullEls[i].classList.add('yb-player-hide'); //全屏时显示全屏元素 for (var _i4 = 0; _i4 < fullEls.length; _i4++) fullEls[_i4].classList.remove('yb-player-hide'); controlsEl.classList.add('yb-player-controls-safearea'); headerEl.classList.add('yb-player-header-safearea'); locksEl && locksEl.classList.add('yb-player-locks-safearea'); this.setInnerHTML('yb-player-fullscreen', YbPlayer.exitfullIcon); if (this.controls) this.showControls(); } else { //非全屏时显示非全屏元素 for (var _i5 = 0; _i5 < unFullEls.length; _i5++) unFullEls[_i5].classList.remove('yb-player-hide'); //全屏时隐藏全屏元素 for (var _i6 = 0; _i6 < fullEls.length; _i6++) fullEls[_i6].classList.add('yb-player-hide'); //移除安全区域 controlsEl.classList.remove('yb-player-controls-safearea'); headerEl.classList.remove('yb-player-header-safearea'); locksEl && locksEl.classList.remove('yb-player-locks-safearea'); this.setInnerHTML('yb-player-fullscreen', YbPlayer.openfullIcon); this.hideControls(); } } /***** 清除定时器 *****/ }, { key: "_clearToastTimer", value: function _clearToastTimer() { if (this._toastTimer) { window.clearTimeout(this._toastTimer); this._toastTimer = null; } } }, { key: "_clearControlsTimer", value: function _clearControlsTimer() { if (this._controlsTimer) { window.clearTimeout(this._controlsTimer); this._controlsTimer = null; } } }, { key: "_clearDanmuTimer", value: function _clearDanmuTimer() { if (this._danmuTimer) { window.clearInterval(this._danmuTimer); this._danmuTimer = null; } } }, { key: "_clearSeizingTimer", value: function _clearSeizingTimer() { if (this._seizingTimer) { window.clearTimeout(this._seizingTimer); this._seizingTimer = null; } } }, { key: "_removeBackbuttonListener", value: function _removeBackbuttonListener() { if (this._bindbackbutton) { plus.key.removeEventListener("backbutton", this._bindbackbutton); this._bindbackbutton = null; } } }], [{ key: "tap", value: //无延迟点击事件 function tap(obj, callback) { //判断一下是否支持touchstart,看看是否是移动端设备 if ('ontouchstart' in window) { var isMove = false; //记录手指是否移动 var startTime = 0; //记录手指触摸的时间 obj.ontouchstart = function (e) { startTime = Date.now(); //记录触摸时间 }; obj.ontouchmove = function (e) { isMove = true; //查看手指是否滑动 }; obj.ontouchend = function (e) { if (!isMove && Date.now() - startTime < 150) { callback && callback(); } isMove = false; //取反 重置 startTime = 0; }; } else { obj.onclick = function (e) { callback && callback(); }; } } }, { key: "getDecodeType", value: function getDecodeType(decoder, src) { //根据后缀获取解码类型 if (src.startsWith('ws://') || src.startsWith('wss://') || src.includes('.ts')) return 'jsmpeg';else if (src.includes('.m3u8') && decoder.hls.loader.isSupported()) return 'hls';else if (src.includes('.flv') && decoder.flv.loader.isSupported()) return 'flv';else if (src.includes('.mp4') || src.includes('.webm') || src.includes('.ogg') || !decoder.hls.loader.isSupported() && src.includes('.m3u8') || !decoder.flv.loader.isSupported() && src.includes('.flv')) return 'video';else return ''; } //尝试加载hls }, { key: "checkWithHls", value: function checkWithHls(Hls, src) { return new Promise(function (resolve) { var hls = new Hls(); var timeout = setTimeout(function () { cleanup(); resolve(''); }, 10000); // 10秒超时 function cleanup() { clearTimeout(timeout); timeout = null; if (hls) { hls.destroy(); hls = null; } } hls.on(Hls.Events.ERROR, function (event, data) { if (data.fatal) { //加载失败返回false cleanup(); resolve(''); } }); hls.loadSource(src); hls.on(Hls.Events.MANIFEST_PARSED, function () { cleanup(); resolve('hls'); }); }); } //尝试加载flv }, { key: "checkWithFlv", value: function checkWithFlv(flvjs, src) { return new Promise(function (resolve) { // 创建一个临时的视频元素 var mediaElement = document.createElement('video'); mediaElement.style.display = 'none'; // 隐藏视频元素 document.body.appendChild(mediaElement); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: src }, { enableWorker: false, // 禁用Worker以提高兼容性 lazyLoad: false, lazyLoadMaxDuration: 3 * 60, seekType: 'range' // 使用range seek }); // 绑定到媒体元素 flvPlayer.attachMediaElement(mediaElement); var timeout = setTimeout(function () { cleanup(); resolve(''); }, 10000); // 10秒超时 function cleanup() { clearTimeout(timeout); timeout = null; if (flvPlayer) { flvPlayer.pause(); flvPlayer.unload(); flvPlayer.detachMediaElement(); flvPlayer.destroy(); flvPlayer = null; } if (mediaElement && mediaElement.parentNode) { mediaElement.parentNode.removeChild(mediaElement); } } flvPlayer.on(flvjs.Events.ERROR, function (e) { cleanup(); resolve(''); }); flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function () { cleanup(); resolve('flv'); }); // 添加更多事件监听 flvPlayer.on(flvjs.Events.METADATA_ARRIVED, function () { // 收到元数据也算成功 cleanup(); resolve('flv'); }); flvPlayer.on(flvjs.Events.STATISTICS_INFO, function () { // 有统计信息说明在正常工作 cleanup(); resolve('flv'); }); flvPlayer.load(); try { flvPlayer.load(); flvPlayer.play(); } catch (error) { cleanup(); resolve(''); } }); } //检测是否支持video播放 }, { key: "checkWithVideo", value: function checkWithVideo(src) { return new Promise(function (resolve, reject) { // 创建一个临时的视频元素 var mediaElement = document.createElement('video'); mediaElement.muted = true; //静音 mediaElement.playsInline = true; //避免被劫持 mediaElement.style.display = 'none'; //隐藏视频元素 var timeout = setTimeout(function () { cleanup(); resolve(''); }, 10000); // 10秒超时 function cleanup() { clearTimeout(timeout); timeout = null; if (mediaElement && mediaElement.parentNode) { mediaElement.parentNode.removeChild(mediaElement); } } mediaElement.onerror = function (e) { cleanup(); resolve(''); }; mediaElement.onloadedmetadata = function (e) { cleanup(); resolve('video'); }; mediaElement.src = src; }); } //时间格式化 }, { key: "timeFormat", value: function timeFormat(value) { var hours = Math.floor(value / 60 / 60 % 60) >= 10 ? Math.floor(value / 60 / 60 % 60) : '0' + Math.floor(value / 60 / 60 % 60); var minutes = Math.floor(value / 60 % 60) >= 10 ? Math.floor(value / 60 % 60) : '0' + Math.floor(value / 60 % 60); var seconds = Math.floor(value % 60) >= 10 ? Math.floor(value % 60) : '0' + Math.floor(value % 60); return hours == '00' ? minutes + ':' + seconds : hours + ':' + minutes + ':' + seconds; } //时分秒转换秒 }, { key: "timeToSeconds", value: function timeToSeconds(timeStr) { var timeRegex = /^(\d{1,2}):(\d{1,2}):(\d{1,2})\.(\d{1,3})$/; var match = timeStr.match(timeRegex); if (!match) { throw new Error("Invalid time format"); } // 提取匹配结果 var _match = _slicedToArray(match, 5), hours = _match[1], minutes = _match[2], seconds = _match[3], milliseconds = _match[4]; // 将时分秒毫秒转换为总秒数 var totalSeconds = +hours * 3600 + +minutes * 60 + +seconds + +milliseconds / 1000; return totalSeconds; } /** * 深度克隆 * @param { Object } obj 克隆对象 */ }, { key: "deepClone", value: function deepClone(obj) { if (_typeof(obj) !== "object" && typeof obj !== 'function') { //原始类型直接返回 return obj; } var o = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {}; for (var i in obj) { if (obj.hasOwnProperty(i)) { o[i] = i === 'loader' ? '' : Object.prototype.toString.call(obj[i]) === '[object XMLHttpRequest]' ? "" : _typeof(obj[i]) === "object" ? YbPlayer.deepClone(obj[i]) : obj[i]; } } return o; } }, { key: "isFlvFatalError", value: function isFlvFatalError(errorType, errorDetail, errorInfo) { // HTTP 状态码错误 return errorInfo && errorInfo.code && errorInfo.code >= 400; // 格式不支持错误 var fatalErrors = ['MEDIA_FORMAT_UNSUPPORTED', 'MEDIA_CODEC_UNSUPPORTED', 'NETWORK_STATUS_CODE_INVALID', 'DEMUXER_ERROR']; return fatalErrors.includes(errorDetail); } }]); }(); //兼容new Function,为了挂载到window对象上 _defineProperty(YbPlayer, "openfullIcon", "\n\t\t\n\t"); //退出全屏按钮 _defineProperty(YbPlayer, "exitfullIcon", "\n\t\t\n\t\t \n\t\t\n\t"); //中间播放按钮 _defineProperty(YbPlayer, "playcenterIcon", "\n\t\t\n\t\t \n\t\t \n\t\t\n\t"); //播放按钮 _defineProperty(YbPlayer, "playIcon", "\n\t\t\n\t"); //暂停按钮 _defineProperty(YbPlayer, "pauseIcon", "\n\t\t\n\t"); //上一个按钮 _defineProperty(YbPlayer, "prevIcon", "\n\t\t\n\t"); //下一个按钮 _defineProperty(YbPlayer, "nextIcon", "\n\t\t\n\t"); //加载图标 _defineProperty(YbPlayer, "loadIcon", "\n\t\t\n\t\t \n\t\t\n\t"); //音量图标 _defineProperty(YbPlayer, "voiceIcon", "\n\t\t\n\t\t \n\t\t\n\t"); //返回图标 _defineProperty(YbPlayer, "backIcon", "\n\t\t\n\t\t \n\t\t\n\t"); //重加载图标 _defineProperty(YbPlayer, "errorIcon", "\n\t\t\n\t\t\t\n\t\t\n\t"); //锁屏图标 _defineProperty(YbPlayer, "lockIcon", "\n\t\t\n\t"); //解开锁屏图标 _defineProperty(YbPlayer, "unlockIcon", "\n\t\t\n\t"); //更多图标 _defineProperty(YbPlayer, "moreIcon", "\n\t\t\n\t"); if (typeof window != 'undefined') { window.YbPlayer = YbPlayer; }