HTML5 Video Player Enhance

To enhance the functionality of HTML5 Video Player (h5player) supporting all websites using shortcut keys similar to PotPlayer.

当前为 2021-06-16 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name HTML5 Video Player Enhance
  3. // @version 2.9.2a1
  4. // @description To enhance the functionality of HTML5 Video Player (h5player) supporting all websites using shortcut keys similar to PotPlayer.
  5. // @author CY Fung
  6. // @match http://*/*
  7. // @match https://*/*
  8. // @run-at document-start
  9. // @require https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.9.0/sha256.min.js
  10. // @require https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.3.2/math.js
  11. // @namespace https://gf.qytechs.cn/users/371179
  12. // @grant GM_getValue
  13. // @grant GM_setValue
  14. // ==/UserScript==
  15.  
  16.  
  17. /**
  18. * Remarks
  19. * This script support modern browser only with ES6+.
  20. * fullscreen and pointerLock buggy in shadowRoot
  21. * Space Pause not success
  22. * shift F key issue
  23. **/
  24. (function $$() {
  25. 'use strict';
  26.  
  27. if (!document || !document.documentElement) return window.requestAnimationFrame($$);
  28.  
  29. let _debug_h5p_logging_ = false;
  30.  
  31. try {
  32. _debug_h5p_logging_ = +window.localStorage.getItem('_h5_player_sLogging_') > 0
  33. } catch (e) {}
  34.  
  35.  
  36.  
  37. const SHIFT = 1;
  38. const CTRL = 2;
  39. const ALT = 4;
  40. const TERMINATE = 0x842;
  41. const _sVersion_ = 1817;
  42. const str_postMsgData = '__postMsgData__'
  43. const DOM_ACTIVE_FOUND = 1;
  44. const DOM_ACTIVE_SRC_LOADED = 2;
  45. const DOM_ACTIVE_ONCE_PLAYED = 4;
  46. const DOM_ACTIVE_MOUSE_CLICK = 8;
  47. const DOM_ACTIVE_MOUSE_IN = 16;
  48. const DOM_ACTIVE_DELAYED_PAUSED = 32;
  49. const DOM_ACTIVE_INVALID_PARENT = 2048;
  50.  
  51. let _endlessloop = null;
  52. const isIframe = (window.top !== window.self && window.top && window.self);
  53. const shadowRoots = [];
  54.  
  55. const getRoot = (elm) => elm.getRootNode instanceof Function ? elm.getRootNode() : (elm.ownerDocument || null);
  56.  
  57. const isShadowRoot = (elm) => (elm && ('host' in elm)) ? elm.nodeType == 11 && !!elm.host && elm.host.nodeType == 1 : null; //instanceof ShadowRoot
  58.  
  59. const playerConfs = {}
  60.  
  61. const hanlderResizeVideo=(entries) => {
  62. const detected_changes={};
  63. for (let entry of entries) {
  64. const player = entry.target.nodeName=="VIDEO"?entry.target:entry.target.querySelector("VIDEO[_h5ppid]");
  65. if(!player)continue;
  66. const vpid = player.getAttribute('_h5ppid');
  67. if(!vpid)continue;
  68. if(vpid in detected_changes) continue;
  69. detected_changes[vpid]=true;
  70. const wPlayer = $hs.getPlayerBlockElement(player)
  71. if(!wPlayer)continue;
  72. const layoutBox = wPlayer.parentNode
  73. if(!layoutBox)continue;
  74. const tipsDom=layoutBox.querySelector('[_potTips_]');
  75. if(!tipsDom)continue;
  76.  
  77. $hs.fixNonBoxingVideoTipsPosition(tipsDom, player);
  78. window.requestAnimationFrame(()=>$hs.fixNonBoxingVideoTipsPosition(tipsDom, player))
  79.  
  80. }
  81. };
  82.  
  83. const $mb={
  84.  
  85.  
  86. nightly_isSupportQueueMicrotask:function(){
  87.  
  88. if('_isSupportQueueMicrotask' in $mb)return $mb._isSupportQueueMicrotask;
  89.  
  90. $mb._isSupportQueueMicrotask= false;
  91. $mb.queueMicrotask=window.queueMicrotask;
  92. if(typeof $mb.queueMicrotask=='function'){
  93. $mb._isSupportQueueMicrotask= true;
  94. }
  95.  
  96. return $mb._isSupportQueueMicrotask;
  97.  
  98. },
  99.  
  100. stable_isSupportAdvancedEventListener:function(){
  101.  
  102. if ('_isSupportAdvancedEventListener' in $mb) return $mb._isSupportAdvancedEventListener
  103. let prop = 0;
  104. document.createAttribute('z').addEventListener('', null, {
  105. get passive() {
  106. prop++;
  107. },
  108. get once() {
  109. prop++;
  110. }
  111. });
  112. return ($mb._isSupportAdvancedEventListener = (prop == 2));
  113. }
  114.  
  115. }
  116.  
  117. const $ws = {
  118. requestAnimationFrame,
  119. cancelAnimationFrame,
  120. MutationObserver
  121. }
  122. //throw Error if your browser is too outdated. (eg ES6 script, no such window object)
  123.  
  124. Element.prototype.__matches__ = (Element.prototype.matches || Element.prototype.matchesSelector ||
  125. Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector ||
  126. Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector ||
  127. Element.prototype.matches()); // throw Error if not supported
  128.  
  129.  
  130. Element.prototype.__requestPointerLock__ = (Element.prototype.requestPointerLock ||
  131. Element.prototype.mozRequestPointerLock || Element.prototype.webkitRequestPointerLock || function() {});
  132.  
  133. // Ask the browser to release the pointer
  134. Document.prototype.__exitPointerLock__ = (Document.prototype.exitPointerLock ||
  135. Document.prototype.mozExitPointerLock || Document.prototype.webkitExitPointerLock || function() {});
  136.  
  137. // built-in hash - https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest
  138. async function digestMessage(message) {
  139. return window.sha256(message)
  140. }
  141.  
  142. const dround = (x) => ~~(x + .5);
  143.  
  144. const jsonStringify_replacer = function(key, val) {
  145. if (val && (val instanceof Element || val instanceof Document)) return val.toString();
  146. return val; // return as is
  147. };
  148.  
  149. const jsonParse = function() {
  150. try {
  151. return JSON.parse.apply(this, arguments)
  152. } catch (e) {}
  153. return null;
  154. }
  155. const jsonStringify = function(obj) {
  156. try {
  157. return JSON.stringify.call(this, obj, jsonStringify_replacer)
  158. } catch (e) {}
  159. return null;
  160. }
  161.  
  162. function _postMsg() {
  163. //async is needed. or error handling for postMessage
  164. const [win, tag, ...data] = arguments;
  165. if (typeof tag == 'string') {
  166. let postMsgObj = {
  167. tag,
  168. passing: true,
  169. winOrder: _postMsg.a
  170. }
  171. try {
  172. let k = 'msg-' + (+new Date)
  173. win.document[str_postMsgData] = win.document[str_postMsgData] || {}
  174. win.document[str_postMsgData][k] = data; //direct
  175. postMsgObj.str = k;
  176. postMsgObj.stype = 1;
  177. } catch (e) {}
  178. if (!postMsgObj.stype) {
  179. postMsgObj.str = jsonStringify({
  180. d: data
  181. })
  182. if (postMsgObj.str && postMsgObj.str.length) postMsgObj.stype = 2;
  183. }
  184. if (!postMsgObj.stype) {
  185. postMsgObj.str = "" + data;
  186. postMsgObj.stype = 0;
  187. }
  188. win.postMessage(postMsgObj, '*');
  189. }
  190.  
  191. }
  192.  
  193. function postMsg() {
  194. let win = window;
  195. let a = 0;
  196. while (win = win.parent) {
  197. _postMsg.a = ++a;
  198. _postMsg(win, ...arguments)
  199. if (win == top) break;
  200. }
  201. }
  202.  
  203.  
  204. function crossBrowserTransition(type) {
  205. if (crossBrowserTransition['_result_' + type]) return crossBrowserTransition['_result_' + type]
  206. let el = document.createElement("fakeelement");
  207.  
  208. const capital = (x) => x[0].toUpperCase() + x.substr(1);
  209. const capitalType = capital(type);
  210.  
  211. const transitions = {
  212. [type]: `${type}end`,
  213. [`O${capitalType}`]: `o${capitalType}End`,
  214. [`Moz${capitalType}`]: `${type}end`,
  215. [`Webkit${capitalType}`]: `webkit${capitalType}End`,
  216. [`MS${capitalType}`]: `MS${capitalType}End`
  217. }
  218.  
  219. for (let styleProp in transitions) {
  220. if (el.style[styleProp] !== undefined) {
  221. return (crossBrowserTransition['_result_' + type] = transitions[styleProp]);
  222. }
  223. }
  224. }
  225.  
  226. function isInOperation(elm) {
  227. let elmInFocus = elm || document.activeElement;
  228. if (!elmInFocus) return false;
  229. let res1 = elmInFocus.__matches__(
  230. 'a[href],link[href],button,input:not([type="hidden"]),select,textarea,iframe,frame,menuitem,[draggable],[contenteditable]'
  231. );
  232. return res1;
  233. }
  234.  
  235. const fn_toString = (f, n = 50) => {
  236. let s = (f + "");
  237. if (s.length > 2 * n + 5) {
  238. s = s.substr(0, n) + ' ... ' + s.substr(-n);
  239. }
  240. return s
  241. };
  242.  
  243. function consoleLog() {
  244. if (!_debug_h5p_logging_) return;
  245. if (isIframe) postMsg('consoleLog', ...arguments);
  246. else console.log.apply(console, arguments);
  247. }
  248.  
  249. function consoleLogF() {
  250. if (isIframe) postMsg('consoleLog', ...arguments);
  251. else console.log.apply(console, arguments);
  252. }
  253.  
  254. class AFLooperArray extends Array {
  255. constructor() {
  256. super();
  257. this.activeLoopsCount = 0;
  258. this.cid = 0;
  259. this.loopingFrame = this.loopingFrame.bind(this);
  260. }
  261.  
  262. loopingFrame() {
  263. if (!this.cid) return; //cancelled
  264. for (const opt of this) {
  265. if (opt.isFunctionLooping) opt.qn(opt.fn);
  266. }
  267. this.cid = $ws.requestAnimationFrame(this.loopingFrame);
  268. }
  269.  
  270. get isArrayLooping() {
  271. return this.cid > 0;
  272. }
  273.  
  274. loopStart() {
  275. this.cid = $ws.requestAnimationFrame(this.loopingFrame);
  276. }
  277. loopStop() {
  278. if (this.cid) $ws.cancelAnimationFrame(this.cid);
  279. this.cid = 0;
  280. }
  281. appendLoop(fn) {
  282. if (typeof fn != 'function' || !this) return;
  283. const opt = new AFLooperFunc(fn, this);
  284. super.push(opt);
  285. return opt;
  286. }
  287. }
  288.  
  289. class AFLooperFunc {
  290. constructor(fn, bind) {
  291. this._looping = false;
  292. this.fn = fn.bind(this);
  293. if($mb.nightly_isSupportQueueMicrotask()) this.qn=$mb.queueMicrotask; else this.qn=this.fn; //qn(fn) = qn() = fn()
  294. this.bind = bind;
  295. }
  296. get isFunctionLooping() {
  297. return this._looping;
  298. }
  299. loopingStart() {
  300. if (this._looping === false) {
  301. this._looping = true;
  302. if (++this.bind.activeLoopsCount == 1) this.bind.loopStart();
  303. }
  304. }
  305. loopingStop() {
  306. if (this._looping === true) {
  307. this._looping = false;
  308. if (--this.bind.activeLoopsCount == 0) this.bind.loopStop();
  309. }
  310. }
  311. }
  312.  
  313. function decimalEqual(a, b) {
  314. return Math.round(a * 100000000) == Math.round(b * 100000000)
  315. }
  316.  
  317. function nonZeroNum(a) {
  318. return a > 0 || a < 0;
  319. }
  320.  
  321. class PlayerConf {
  322.  
  323. get scaleFactor() {
  324. return this.mFactor * this.vFactor;
  325. }
  326.  
  327. cssTransform() {
  328.  
  329. const playerConf = this;
  330. const player = playerConf.domElement;
  331. if (!player) return;
  332. const videoScale = playerConf.scaleFactor;
  333. let {x,y}=playerConf.translate;
  334.  
  335. let [_x,_y]=((playerConf.rotate % 180) == 90)?[y,x]:[x,y];
  336.  
  337. if((playerConf.rotate % 360) == 270)_x = -_x;
  338. if((playerConf.rotate % 360) == 90)_y = -_y;
  339.  
  340. var s = [
  341. playerConf.rotate > 0 ? 'rotate(' + playerConf.rotate + 'deg)' : '',
  342. !decimalEqual(videoScale, 1.0) ? 'scale(' + videoScale + ')' : '',
  343. (nonZeroNum(_x) || nonZeroNum(_y)) ? `translate(${_x}px, ${_y}px)` : '',
  344. ];
  345.  
  346. player.style.transform = s.join(' ').trim()
  347.  
  348. }
  349.  
  350. constructor() {
  351.  
  352. this.translate = {
  353. x: 0,
  354. y: 0
  355. };
  356. this.rotate = 0;
  357. this.mFactor = 1.0;
  358. this.vFactor = 1.0;
  359. this.fps = 30;
  360. this.filter_key = {};
  361. this.filter_view_units = {
  362. 'hue-rotate': 'deg',
  363. 'blur': 'px'
  364. };
  365. this.filterReset();
  366.  
  367. }
  368.  
  369. setFilter(prop, f) {
  370.  
  371. let oldValue = this.filter_key[prop];
  372. if (typeof oldValue != 'number') return;
  373. let newValue = f(oldValue)
  374. if (oldValue != newValue) {
  375.  
  376. newValue = +newValue.toFixed(6); //javascript bug
  377.  
  378. }
  379.  
  380. this.filter_key[prop] = newValue
  381. this.filterSetup();
  382.  
  383. return newValue;
  384.  
  385.  
  386.  
  387. }
  388.  
  389. filterSetup(options) {
  390.  
  391. let ums = GM_getValue("unsharpen_mask")
  392. if (!ums) ums = ""
  393.  
  394. let view = []
  395. let playerElm = $hs.player();
  396. if (!playerElm) return;
  397. for (let view_key in this.filter_key) {
  398. let filter_value = +((+this.filter_key[view_key] || 0).toFixed(3))
  399. let addTo = true;
  400. switch(view_key){
  401. case 'brightness':
  402. /* fall through */
  403. case 'contrast':
  404. /* fall through */
  405. case 'saturate':
  406. if(decimalEqual(filter_value,1.0))addTo=false;
  407. break;
  408. case 'hue-rotate':
  409. /* fall through */
  410. case 'blur':
  411. if(decimalEqual(filter_value,0.0))addTo=false;
  412. break;
  413. }
  414. let view_unit = this.filter_view_units[view_key] || ''
  415. if(addTo) view.push(`${view_key}(${filter_value}${view_unit})`)
  416. this.filter_key[view_key] = Number(+this.filter_key[view_key] || 0)
  417. }
  418. if (ums) view .push(`url("#_h5p_${ums}")`);
  419. if (options && options.grey) view .push('url("#grey1")');
  420. playerElm.style.filter = view.join(' ').trim(); //performance in firefox is bad
  421. }
  422.  
  423. filterReset() {
  424. this.filter_key['brightness'] = 1.0
  425. this.filter_key['contrast'] = 1.0
  426. this.filter_key['saturate'] = 1.0
  427. this.filter_key['hue-rotate'] = 0.0
  428. this.filter_key['blur'] = 0.0
  429. this.filterSetup()
  430. }
  431.  
  432. }
  433.  
  434. const Store = {
  435. prefix: '_h5_player',
  436. save: function(k, v) {
  437. if (!Store.available()) return false;
  438. if (typeof v != 'string') return false;
  439. Store.LS.setItem(Store.prefix + k, v)
  440. let sk = fn_toString(k + "", 30);
  441. let sv = fn_toString(v + "", 30);
  442. consoleLog(`localStorage Saved "${sk}" = "${sv}"`)
  443. return true;
  444.  
  445. },
  446. read: function(k) {
  447. if (!Store.available()) return false;
  448. let v = Store.LS.getItem(Store.prefix + k)
  449. let sk = fn_toString(k + "", 30);
  450. let sv = fn_toString(v + "", 30);
  451. consoleLog(`localStorage Read "${sk}" = "${sv}"`);
  452. return v;
  453.  
  454. },
  455. remove: function(k) {
  456.  
  457. if (!Store.available()) return false;
  458. Store.LS.removeItem(Store.prefix + k)
  459. let sk = fn_toString(k + "", 30);
  460. consoleLog(`localStorage Removed "${sk}"`)
  461. return true;
  462. },
  463. clearInvalid: function(sVersion) {
  464. if (!Store.available()) return false;
  465.  
  466. //let sVersion=1814;
  467. if (+Store.read('_sVersion_') < sVersion) {
  468. Store._keys()
  469. .filter(s => s.indexOf(Store.prefix) === 0)
  470. .forEach(key => window.localStorage.removeItem(key))
  471. Store.save('_sVersion_', sVersion + '')
  472. return 2;
  473. }
  474. return 1;
  475.  
  476. },
  477. available: function() {
  478. if (Store.LS) return true;
  479. if (!window) return false;
  480. const localStorage = window.localStorage;
  481. if (!localStorage) return false;
  482. if (typeof localStorage != 'object') return false;
  483. if (!('getItem' in localStorage)) return false;
  484. if (!('setItem' in localStorage)) return false;
  485. Store.LS = localStorage;
  486. return true;
  487.  
  488. },
  489. _keys: function() {
  490. return Object.keys(localStorage);
  491. },
  492. _setItem: function(key, value) {
  493. return localStorage.setItem(key, value)
  494. },
  495. _getItem: function(key) {
  496. return localStorage.getItem(key)
  497. },
  498. _removeItem: function(key) {
  499. return localStorage.removeItem(key)
  500. }
  501.  
  502. }
  503.  
  504. const domTool = {
  505. nopx: (x) => +x.replace('px', ''),
  506. cssWH: function(m, r) {
  507. if (!r) r = getComputedStyle(m, null);
  508. let c = (x) => +x.replace('px', '');
  509. return {
  510. w: m.offsetWidth || c(r.width),
  511. h: m.offsetHeight || c(r.height)
  512. }
  513. },
  514. _isActionBox_1: function(vEl, pEl) {
  515.  
  516. let vElCSS = domTool.cssWH(vEl);
  517. let vElCSSw = vElCSS.w;
  518. let vElCSSh = vElCSS.h;
  519.  
  520. let vElx = vEl;
  521. let res = [];
  522. let mLevel = 0;
  523. if (vEl && pEl && vEl != pEl && pEl.contains(vEl)) {
  524. while (vElx && vElx != pEl) {
  525. vElx = vElx.parentNode;
  526. let vElx_css = null;
  527. if (isShadowRoot(vElx)) {} else {
  528. vElx_css = getComputedStyle(vElx, null);
  529. let vElx_wp = domTool.nopx(vElx_css.paddingLeft) + domTool.nopx(vElx_css.paddingRight)
  530. vElCSSw += vElx_wp
  531. let vElx_hp = domTool.nopx(vElx_css.paddingTop) + domTool.nopx(vElx_css.paddingBottom)
  532. vElCSSh += vElx_hp
  533. }
  534. res.push({
  535. level: ++mLevel,
  536. padW: vElCSSw,
  537. padH: vElCSSh,
  538. elm: vElx,
  539. css: vElx_css
  540. })
  541.  
  542. }
  543. }
  544.  
  545. // in the array, each item is the parent of video player
  546. res.vEl_cssWH = vElCSS
  547.  
  548. return res;
  549.  
  550. },
  551. _isActionBox: function(vEl, walkRes, pEl_idx) {
  552.  
  553. function absDiff(w1, w2, h1, h2) {
  554. let w = (w1 - w2),
  555. h = h1 - h2;
  556. return [(w > 0 ? w : -w), (h > 0 ? h : -h)]
  557. }
  558.  
  559. function midPoint(rect) {
  560. return {
  561. x: (rect.left + rect.right) / 2,
  562. y: (rect.top + rect.bottom) / 2
  563. }
  564. }
  565.  
  566. let parentCount = walkRes.length;
  567. if (pEl_idx >= 0 && pEl_idx < parentCount) {} else {
  568. return;
  569. }
  570. let pElr = walkRes[pEl_idx]
  571. if (!pElr.css) {
  572. //shadowRoot
  573. return true;
  574. }
  575.  
  576. let pEl = pElr.elm;
  577.  
  578. //prevent activeElement==body
  579. let pElCSS = domTool.cssWH(pEl, pElr.css);
  580.  
  581. //check prediction of parent dimension
  582. let d1v = absDiff(pElCSS.w, pElr.padW, pElCSS.h, pElr.padH)
  583.  
  584. let d1x = d1v[0] < 10
  585. let d1y = d1v[1] < 10;
  586.  
  587. if (d1x && d1y) return true; //both edge along the container - fit size
  588. if (!d1x && !d1y) return false; //no edge along the container - body contain the video element, fixed width&height
  589.  
  590. //case: youtube video fullscreen
  591.  
  592. //check centre point
  593.  
  594. let pEl_rect = pEl.getBoundingClientRect()
  595. let vEl_rect = vEl.getBoundingClientRect()
  596.  
  597. let pEl_center = midPoint(pEl_rect)
  598. let vEl_center = midPoint(vEl_rect)
  599.  
  600. let d2v = absDiff(pEl_center.x, vEl_center.x, pEl_center.y, vEl_center.y);
  601.  
  602. let d2x = d2v[0] < 10;
  603. let d2y = d2v[1] < 10;
  604.  
  605. return (d2x && d2y);
  606.  
  607. },
  608. getRect: function(element) {
  609. let rect = element.getBoundingClientRect();
  610. let scroll = domTool.getScroll();
  611. return {
  612. pageX: rect.left + scroll.left,
  613. pageY: rect.top + scroll.top,
  614. screenX: rect.left,
  615. screenY: rect.top
  616. };
  617. },
  618. getScroll: function() {
  619. return {
  620. left: document.documentElement.scrollLeft || document.body.scrollLeft,
  621. top: document.documentElement.scrollTop || document.body.scrollTop
  622. };
  623. },
  624. getClient: function() {
  625. return {
  626. width: document.compatMode == 'CSS1Compat' ? document.documentElement.clientWidth : document.body.clientWidth,
  627. height: document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight
  628. };
  629. },
  630. addStyle: //GM_addStyle,
  631. function(css, head) {
  632. if (!head) {
  633. let _doc = document.documentElement;
  634. head = _doc.querySelector('head') || _doc.querySelector('html') || _doc;
  635. }
  636. let doc = head.ownerDocument;
  637. let style = doc.createElement('style');
  638. style.type = 'text/css';
  639. let node = doc.createTextNode(css);
  640. style.appendChild(node);
  641. head.appendChild(style);
  642. //console.log(document.head,style,'add style')
  643. return style;
  644. },
  645. eachParentNode: function(dom, fn) {
  646. let parent = dom.parentNode
  647. while (parent) {
  648. let isEnd = fn(parent, dom)
  649. parent = parent.parentNode
  650. if (isEnd) {
  651. break
  652. }
  653. }
  654. },
  655.  
  656. hideDom: function hideDom(selector) {
  657. let dom = document.querySelector(selector)
  658. if (dom) {
  659. $ws.requestAnimationFrame(function() {
  660. dom.style.opacity = 0;
  661. dom.style.transform = 'translate(-9999px)';
  662. dom = null;
  663. })
  664. }
  665. }
  666. };
  667.  
  668. const handle = {
  669.  
  670.  
  671. afPlaybackRecording: async function() {
  672. const opts = this;
  673.  
  674. let qTime = +new Date;
  675. if (qTime >= opts.pTime) {
  676. opts.pTime = qTime + opts.timeDelta; //prediction of next Interval
  677. opts.savePlaybackProgress()
  678. }
  679.  
  680. },
  681. savePlaybackProgress: function() {
  682.  
  683. //this refer to endless's opts
  684. let player = this.player;
  685.  
  686. let _uid = this.player_uid; //_h5p_uid_encrypted
  687. if (!_uid) return;
  688.  
  689. let shallSave = true;
  690. let currentTimeToSave = ~~player.currentTime;
  691.  
  692. if (this._lastSave == currentTimeToSave) shallSave = false;
  693.  
  694. if (shallSave) {
  695.  
  696. this._lastSave = currentTimeToSave
  697.  
  698. //console.log('aasas',this.player_uid, shallSave, '_play_progress_'+_uid, currentTimeToSave)
  699.  
  700. Store.save('_play_progress_' + _uid, jsonStringify({
  701. 't': currentTimeToSave
  702. }))
  703.  
  704. }
  705.  
  706. },
  707. playingWithRecording: function() {
  708. let player = this.player;
  709. if (!player.paused && !this.isFunctionLooping){
  710. let player = this.player;
  711. let _uid = player.getAttribute('_h5p_uid_encrypted') || ''
  712. if (_uid) {
  713. this.player_uid = _uid;
  714. this.pTime = 0;
  715. this.loopingStart();
  716. }
  717. }
  718. }
  719.  
  720. };
  721.  
  722. class Momentary extends Map {
  723. act(uniqueId, fn_start, fn_end, delay) {
  724. if (!uniqueId) return;
  725. uniqueId = uniqueId + "";
  726. const last_cid = this.get(uniqueId);
  727. if (last_cid > 0) clearTimeout(last_cid);
  728. fn_start();
  729. const new_cid = setTimeout(fn_end, delay)
  730. this.set(uniqueId, new_cid)
  731. }
  732. }
  733.  
  734. const momentary = new Momentary();
  735.  
  736. const $hs = {
  737.  
  738. /* 提示文本的字號 */
  739. fontSize: 16,
  740. enable: true,
  741. playerInstance: null,
  742. playbackRate: 1,
  743. /* 快進快退步長 */
  744. skipStep: 5,
  745. trigger_actionBoxes: [],
  746.  
  747. /* 獲取當前播放器的實例 */
  748. player: function() {
  749. let res = $hs.playerInstance || null;
  750. if (res && res.parentNode == null) {
  751. $hs.playerInstance = null;
  752. res = null;
  753. }
  754.  
  755. if (res == null) {
  756. for (let k in playerConfs) {
  757. let playerConf = playerConfs[k];
  758. if (playerConf && playerConf.domElement && playerConf.domElement.parentNode) return playerConf.domElement;
  759. }
  760. }
  761. return res;
  762. },
  763.  
  764. pictureInPicture: function(videoElm) {
  765. if (document.pictureInPictureElement) {
  766. document.exitPictureInPicture();
  767. } else if ('requestPictureInPicture' in videoElm) {
  768. videoElm.requestPictureInPicture()
  769. } else {
  770. $hs.tips('PIP is not supported.');
  771. }
  772. },
  773.  
  774. getPlayerConf: function(video) {
  775.  
  776. if (!video) return null;
  777. let vpid = video.getAttribute('_h5ppid') || null;
  778. if (!vpid) return null;
  779. return playerConfs[vpid] || null;
  780.  
  781. },
  782.  
  783. handlerVideoPlaying: function(evt) {
  784. const videoElm = evt.target || this || null;
  785. const playerConf = $hs.getPlayerConf(videoElm)
  786.  
  787. $hs._actionBoxSet(videoElm);
  788. if (playerConf) {
  789. if (playerConf.timeout_pause > 0) playerConf.timeout_pause = clearTimeout(playerConf.timeout_pause);
  790. playerConf.lastPauseAt = 0
  791. playerConf.domActive |= DOM_ACTIVE_ONCE_PLAYED;
  792. playerConf.domActive &= ~DOM_ACTIVE_DELAYED_PAUSED;
  793. }
  794.  
  795. $hs.swtichPlayerInstance();
  796.  
  797.  
  798.  
  799. $hs.onVideoTriggering();
  800.  
  801. if (!$hs.enable) return $hs.tips(false);
  802.  
  803. if (videoElm._isThisPausedBefore_) consoleLog('resumed')
  804. let _pausedbefore_ = videoElm._isThisPausedBefore_
  805.  
  806. if (videoElm.playpause_cid) {
  807. clearTimeout(videoElm.playpause_cid);
  808. videoElm.playpause_cid = 0;
  809. }
  810. let _last_paused = videoElm._last_paused
  811. videoElm._last_paused = videoElm.paused
  812. if (_last_paused === !videoElm.paused) {
  813. videoElm.playpause_cid = setTimeout(() => {
  814. if (videoElm.paused === !_last_paused && !videoElm.paused && _pausedbefore_) {
  815. $hs.tips('Playback resumed', undefined, 2500)
  816. }
  817. }, 90)
  818. }
  819.  
  820. /* 播放的時候進行相關同步操作 */
  821.  
  822. if (!videoElm._record_continuous) {
  823.  
  824. /* 同步之前設定的播放速度 */
  825. $hs.setPlaybackRate()
  826.  
  827. if (!_endlessloop) _endlessloop = new AFLooperArray();
  828.  
  829. videoElm._record_continuous = _endlessloop.appendLoop(handle.afPlaybackRecording);
  830. videoElm._record_continuous._lastSave = -999;
  831.  
  832. videoElm._record_continuous.timeDelta = 2000;
  833. videoElm._record_continuous.player = videoElm
  834. videoElm._record_continuous.savePlaybackProgress = handle.savePlaybackProgress;
  835. videoElm._record_continuous.playingWithRecording = handle.playingWithRecording;
  836. }
  837.  
  838. videoElm._record_continuous.playingWithRecording(videoElm); //try to start recording
  839.  
  840. videoElm._isThisPausedBefore_ = false;
  841.  
  842. },
  843. handlerVideoPause: function(evt) {
  844.  
  845. const videoElm = evt.target || this || null;
  846.  
  847. const playerConf = $hs.getPlayerConf(videoElm)
  848. if (playerConf) {
  849. playerConf.lastPauseAt = +new Date;
  850. playerConf.timeout_pause = setTimeout(() => {
  851. if (playerConf.lastPauseAt > 0) playerConf.domActive |= DOM_ACTIVE_DELAYED_PAUSED;
  852. }, 600)
  853. }
  854.  
  855. if (!$hs.enable) return $hs.tips(false);
  856. consoleLog('pause')
  857. videoElm._isThisPausedBefore_ = true;
  858.  
  859. let _last_paused = videoElm._last_paused
  860. videoElm._last_paused = videoElm.paused
  861. if (videoElm.playpause_cid) {
  862. clearTimeout(videoElm.playpause_cid);
  863. videoElm.playpause_cid = 0;
  864. }
  865. if (_last_paused === !videoElm.paused) {
  866. videoElm.playpause_cid = setTimeout(() => {
  867. if (videoElm.paused === !_last_paused && videoElm.paused) {
  868. $hs._tips(videoElm, 'Playback paused', undefined, 2500)
  869. }
  870. }, 90)
  871. }
  872.  
  873.  
  874. if (videoElm._record_continuous && videoElm._record_continuous.isFunctionLooping) {
  875. videoElm._record_continuous.savePlaybackProgress(); //savePlaybackProgress once before stopping //handle.savePlaybackProgress;
  876. videoElm._record_continuous.loopingStop();
  877. }
  878.  
  879.  
  880. },
  881. handlerVideoVolumeChange: function(evt) {
  882.  
  883. const videoElm = evt.target || this || null;
  884.  
  885. if (videoElm.volume >= 0) {} else {
  886. return;
  887. }
  888. let cVol = videoElm.volume;
  889. let cMuted = videoElm.muted;
  890.  
  891. if (cVol === videoElm._volume_p && cMuted === videoElm._muted_p) {
  892. // nothing changed
  893. } else if (cVol === videoElm._volume_p && cMuted !== videoElm._muted_p) {
  894. // muted changed
  895. } else { // cVol != pVol
  896.  
  897. // only volume changed
  898.  
  899. let shallShowTips = videoElm._volume >= 0; //prevent initialization
  900.  
  901. if (!cVol) {
  902. videoElm.muted = true;
  903. } else if (cMuted) {
  904. videoElm.muted = false;
  905. videoElm._volume = cVol;
  906. } else if (!cMuted) {
  907. videoElm._volume = cVol;
  908. }
  909. consoleLog('volume changed')
  910.  
  911. if (shallShowTips)
  912. $hs._tips(videoElm, 'Volume: ' + dround(videoElm.volume * 100) + '%', undefined, 3000)
  913.  
  914. }
  915.  
  916. videoElm._volume_p = cVol
  917. videoElm._muted_p = cMuted
  918.  
  919. },
  920. handlerVideoLoadedMetaData: function(evt) {
  921. const videoElm = evt.target || this || null;
  922. consoleLog('video size', this.videoWidth + ' x ' + this.videoHeight);
  923.  
  924. let vpid = videoElm.getAttribute('_h5ppid') || null;
  925. if (!vpid || !videoElm.currentSrc) return;
  926.  
  927. if ($hs.varSrcList[vpid] != videoElm.currentSrc) {
  928. $hs.varSrcList[vpid] = videoElm.currentSrc;
  929. $hs.videoSrcFound(videoElm);
  930. $hs._actionBoxSet(videoElm);
  931. }
  932. if (!videoElm._onceVideoLoaded) {
  933. videoElm._onceVideoLoaded = true;
  934. playerConfs[vpid].domActive |= DOM_ACTIVE_SRC_LOADED;
  935. }
  936.  
  937. },
  938. handlerElementMouseEnter: function(evt) {
  939. if ($hs.intVideoInitCount > 0) {} else {
  940. return;
  941. }
  942.  
  943. const actionBox = $hs.trigger_actionBoxes.filter(actionBox => (evt.target === actionBox || actionBox.contains(evt.target)))[0]
  944. if (!actionBox) return;
  945. const vpid = actionBox.getAttribute('_h5p_actionbox_');
  946. const videoElm = getRoot(actionBox).querySelector(`VIDEO[_h5ppid="${vpid}"]`);
  947. if (!videoElm) return;
  948.  
  949. $hs._actionBoxSet(videoElm);
  950.  
  951. const playerConf = $hs.getPlayerConf(videoElm)
  952. if (playerConf) {
  953. momentary.act("actionBoxMouseEnter",
  954. () => {
  955. playerConf.domActive |= DOM_ACTIVE_MOUSE_IN;
  956. },
  957. () => {
  958. playerConf.domActive &= ~DOM_ACTIVE_MOUSE_IN;
  959. },
  960. 300)
  961. }
  962.  
  963. },
  964. handlerElementMouseDown: function(evt) {
  965.  
  966. if ($hs.intVideoInitCount > 0) {} else {
  967. return;
  968. }
  969.  
  970. const actionBox = $hs.trigger_actionBoxes.filter(actionBox => (evt.target === actionBox || actionBox.contains(evt.target)))[0]
  971. if (!actionBox) return;
  972. const vpid = actionBox.getAttribute('_h5p_actionbox_');
  973. const videoElm = getRoot(actionBox).querySelector(`VIDEO[_h5ppid="${vpid}"]`);
  974. if (!videoElm) return;
  975.  
  976. $hs._actionBoxSet(videoElm);
  977.  
  978. const playerConf = $hs.getPlayerConf(videoElm)
  979. if (playerConf) {
  980. momentary.act("actionBoxClicking",
  981. () => {
  982. playerConf.domActive |= DOM_ACTIVE_MOUSE_CLICK;
  983. },
  984. () => {
  985. playerConf.domActive &= ~DOM_ACTIVE_MOUSE_CLICK;
  986. },
  987. 300)
  988. }
  989. $hs.swtichPlayerInstance();
  990.  
  991. },
  992. handlerElementWheelTuneVolume: function(evt) { //shift + wheel
  993.  
  994. if ($hs.intVideoInitCount > 0) {} else {
  995. return;
  996. }
  997.  
  998. const actionBox = $hs.trigger_actionBoxes.filter(actionBox => (evt.target === actionBox || actionBox.contains(evt.target)))[0]
  999. if (!actionBox) return;
  1000. const vpid = actionBox.getAttribute('_h5p_actionbox_');
  1001. const videoElm = getRoot(actionBox).querySelector(`VIDEO[_h5ppid="${vpid}"]`);
  1002. if (!videoElm) return;
  1003.  
  1004. if (!evt.shiftKey) return;
  1005. if (evt.deltaY) {
  1006. let player = $hs.player();
  1007. if (!player || player != videoElm) return;
  1008.  
  1009. if (evt.deltaY > 0) {
  1010.  
  1011. if ((player.muted && player.volume === 0) && player._volume > 0) {
  1012.  
  1013. player.muted = false;
  1014. player.volume = player._volume;
  1015. } else if (player.muted && (player.volume > 0 || !player._volume)) {
  1016. player.muted = false;
  1017. }
  1018. $hs.tuneVolume(-0.05)
  1019.  
  1020. evt.stopPropagation()
  1021. evt.preventDefault()
  1022. return false
  1023.  
  1024. } else if (evt.deltaY < 0) {
  1025.  
  1026. if ((player.muted && player.volume === 0) && player._volume > 0) {
  1027. player.muted = false;
  1028. player.volume = player._volume;
  1029. } else if (player.muted && (player.volume > 0 || !player._volume)) {
  1030. player.muted = false;
  1031. }
  1032. $hs.tuneVolume(+0.05)
  1033.  
  1034. evt.stopPropagation()
  1035. evt.preventDefault()
  1036. return false
  1037.  
  1038. }
  1039. }
  1040. },
  1041. debug01: function(evt, videoActive) {
  1042.  
  1043. if (!$hs.eventHooks) {
  1044. document.__h5p_eventhooks = ($hs.eventHooks = {
  1045. _debug_: []
  1046. });
  1047. }
  1048. $hs.eventHooks._debug_.push([videoActive, evt.type]);
  1049. // console.log('h5p eventhooks = document.__h5p_eventhooks')
  1050. },
  1051.  
  1052. swtichPlayerInstance: function() {
  1053.  
  1054. let newPlayerInstance = null;
  1055. const ONLY_PLAYING_NONE = 0x4A00;
  1056. const ONLY_PLAYING_MORE_THAN_ONE = 0x5A00;
  1057. let onlyPlayingInstance = ONLY_PLAYING_NONE;
  1058. for (let k in playerConfs) {
  1059. let playerConf = playerConfs[k] || {};
  1060. let {
  1061. domElement,
  1062. domActive
  1063. } = playerConf;
  1064. if (domElement) {
  1065. if (domActive & DOM_ACTIVE_INVALID_PARENT) continue;
  1066. if (!domElement.parentNode) {
  1067. playerConf.domActive |= DOM_ACTIVE_INVALID_PARENT;
  1068. continue;
  1069. }
  1070. if (domActive & DOM_ACTIVE_MOUSE_CLICK) {
  1071. newPlayerInstance = domElement
  1072. break;
  1073. }
  1074. if (domActive & DOM_ACTIVE_ONCE_PLAYED && (domActive & DOM_ACTIVE_DELAYED_PAUSED) == 0) {
  1075. if (onlyPlayingInstance == ONLY_PLAYING_NONE) onlyPlayingInstance = domElement;
  1076. else onlyPlayingInstance = ONLY_PLAYING_MORE_THAN_ONE;
  1077. }
  1078. }
  1079. }
  1080. if (newPlayerInstance == null && onlyPlayingInstance.nodeType == 1) {
  1081. newPlayerInstance = onlyPlayingInstance;
  1082. }
  1083.  
  1084. $hs.playerInstance = newPlayerInstance
  1085.  
  1086.  
  1087. },
  1088. handlerElementDblClick: function(evt) {
  1089.  
  1090. if ($hs.intVideoInitCount > 0) {} else {
  1091. return;
  1092. }
  1093.  
  1094. if (document.readyState != "complete") return;
  1095.  
  1096. const actionBox = $hs.trigger_actionBoxes.filter(actionBox => (evt.target === actionBox || actionBox.contains(evt.target)))[0]
  1097. if (!actionBox) return;
  1098. const vpid = actionBox.getAttribute('_h5p_actionbox_');
  1099. const videoElm = getRoot(actionBox).querySelector(`VIDEO[_h5ppid="${vpid}"]`);
  1100. if (!videoElm) return;
  1101.  
  1102. $hs._actionBoxSet(videoElm);
  1103.  
  1104. const playerConf = $hs.getPlayerConf(videoElm)
  1105. if (playerConf) {
  1106. momentary.act("actionBoxClicking",
  1107. () => {
  1108. playerConf.domActive |= DOM_ACTIVE_MOUSE_CLICK;
  1109. },
  1110. () => {
  1111. playerConf.domActive &= ~DOM_ACTIVE_MOUSE_CLICK;
  1112. },
  1113. 600)
  1114. }
  1115. $hs.swtichPlayerInstance()
  1116.  
  1117. $hs.onVideoTriggering()
  1118.  
  1119. $hs.callFullScreenBtn();
  1120.  
  1121. evt.stopPropagation()
  1122. evt.preventDefault()
  1123. return false
  1124.  
  1125. },
  1126. handlerDocFocusOut: function(e) {
  1127. let doc = this;
  1128. $hs.focusFxLock = true;
  1129. $ws.requestAnimationFrame(function() {
  1130. $hs.focusFxLock = false;
  1131. if (!$hs.enable) $hs.tips(false);
  1132. else
  1133. if (!doc.hasFocus() && $hs.player() && !$hs.isLostFocus) {
  1134. $hs.isLostFocus = true;
  1135. consoleLog('doc.focusout')
  1136. //$hs.tips('focus is lost', -1);
  1137. }
  1138. });
  1139. },
  1140. handlerDocFocusIn: function(e) {
  1141. let doc = this;
  1142. if ($hs.focusFxLock) return;
  1143. $ws.requestAnimationFrame(function() {
  1144.  
  1145. if ($hs.focusFxLock) return;
  1146. if (!$hs.enable) $hs.tips(false);
  1147. else
  1148. if (doc.hasFocus() && $hs.player() && $hs.isLostFocus) {
  1149. $hs.isLostFocus = false;
  1150. consoleLog('doc.focusin')
  1151. $hs.tips(false);
  1152.  
  1153. }
  1154. });
  1155. },
  1156.  
  1157. handlerWinMessage: async function(e) {
  1158. let tag, ed;
  1159. if (typeof e.data == 'object' && typeof e.data.tag == 'string') {
  1160. tag = e.data.tag;
  1161. ed = e.data
  1162. } else {
  1163. return;
  1164. }
  1165. let msg = null,
  1166. success = 0;
  1167. switch (tag) {
  1168. case 'consoleLog':
  1169. let msg_str = ed.str;
  1170. let msg_stype = ed.stype;
  1171. if (msg_stype === 1) {
  1172. msg = (document[str_postMsgData] || {})[msg_str] || [];
  1173. success = 1;
  1174. } else if (msg_stype === 2) {
  1175. msg = jsonParse(msg_str);
  1176. if (msg && msg.d) {
  1177. success = 2;
  1178. msg = msg.d;
  1179. }
  1180. } else {
  1181. msg = msg_str
  1182. }
  1183. let p = (ed.passing && ed.winOrder) ? [' | from win-' + ed.winOrder] : [];
  1184. if (success) {
  1185. console.log(...msg, ...p)
  1186. //document[ed.data]=null; // also delete the information
  1187. } else {
  1188. console.log('msg--', msg, ...p, ed);
  1189. }
  1190. break;
  1191.  
  1192. }
  1193. },
  1194.  
  1195. isInActiveMode: function(activeElm, player) {
  1196.  
  1197. if (activeElm == player) {
  1198. return true;
  1199. }
  1200.  
  1201. if ($hs.trigger_actionBoxes[0]) {
  1202. let actionBox = $hs.trigger_actionBoxes[0];
  1203. if (activeElm == actionBox || actionBox.contains(activeElm)) {
  1204. return true;
  1205. }
  1206.  
  1207. }
  1208.  
  1209. let _checkingPass = false;
  1210.  
  1211. if (!player) return;
  1212. let layoutBox = $hs.getPlayerBlockElement(player).parentNode;
  1213. if (layoutBox && layoutBox.parentNode && layoutBox.contains(activeElm)) {
  1214. let rpid = player.getAttribute('_h5ppid') || "NULL";
  1215. let actionBox = layoutBox.parentNode.querySelector(`[_h5p_actionbox_="${rpid}"]`); //the box can be layoutBox
  1216. if (actionBox && actionBox.contains(activeElm)) _checkingPass = true;
  1217. }
  1218.  
  1219. return _checkingPass
  1220. },
  1221.  
  1222.  
  1223. toolCheckFullScreen: function(doc) {
  1224. if (typeof doc.fullScreen == 'boolean') return doc.fullScreen;
  1225. if (typeof doc.webkitIsFullScreen == 'boolean') return doc.webkitIsFullScreen;
  1226. if (typeof doc.mozFullScreen == 'boolean') return doc.mozFullScreen;
  1227. return null;
  1228. },
  1229.  
  1230. toolFormatCT: function(u) {
  1231.  
  1232. let w = Math.round(u, 0)
  1233. let a = w % 60
  1234. w = (w - a) / 60
  1235. let b = w % 60
  1236. w = (w - b) / 60
  1237. let str = ("0" + b).substr(-2) + ":" + ("0" + a).substr(-2);
  1238. if (w) str = w + ":" + str
  1239.  
  1240. return str
  1241.  
  1242. },
  1243.  
  1244. makeFocus: function(player, evt) {
  1245. setTimeout(function() {
  1246. let rpid = player.getAttribute('_h5ppid');
  1247. let actionBox = getRoot(player).querySelector(`[_h5p_actionbox_="${rpid}"]`);
  1248.  
  1249. //console.log('p',rpid, player,actionBox,document.activeElement)
  1250. if (actionBox && actionBox != document.activeElement && !actionBox.contains(document.activeElement)) {
  1251. consoleLog('make focus on', actionBox)
  1252. actionBox.focus();
  1253.  
  1254. }
  1255.  
  1256. }, 300)
  1257. },
  1258.  
  1259. getActionBlockElement: function(player, layoutBox) {
  1260.  
  1261. if (!player || !layoutBox) return null;
  1262.  
  1263.  
  1264. let walkRes = domTool._isActionBox_1(player, layoutBox);
  1265. let parentCount = walkRes.length;
  1266. let actionBox = null;
  1267. if (parentCount - 1 >= 0 && domTool._isActionBox(player, walkRes, parentCount - 1)) {
  1268. actionBox = walkRes[parentCount - 1].elm;
  1269. } else if (parentCount - 2 >= 0 && domTool._isActionBox(player, walkRes, parentCount - 2)) {
  1270. actionBox = walkRes[parentCount - 2].elm;
  1271. } else {
  1272. actionBox = player;
  1273. }
  1274.  
  1275.  
  1276. let search = $hs.videoFullscreenBtns(actionBox, 4);
  1277. if (search && search.elements.length > 0) actionBox = search.container;
  1278.  
  1279. return actionBox;
  1280.  
  1281.  
  1282. },
  1283.  
  1284. _actionBoxSet: function(player) {
  1285.  
  1286. if (!player) return null;
  1287. let vpid = player.getAttribute('_h5ppid');
  1288. if (!vpid) return null;
  1289.  
  1290. let layoutBox = $hs.getPlayerBlockElement(player).parentNode;
  1291. let actionBox = $hs.getActionBlockElement(player, layoutBox);
  1292.  
  1293.  
  1294. //console.log('actionbox search:', actionBox)
  1295.  
  1296. if (actionBox && actionBox.getAttribute('_h5p_actionbox_') != vpid) {
  1297. consoleLog('D-1', actionBox);
  1298. for (const previousActionboxes of getRoot(player).querySelectorAll(`[_h5p_actionbox_="${vpid}"]`)) {
  1299. //change of parentNode
  1300. previousActionboxes.removeAttribute('_h5p_actionbox_');
  1301. }
  1302. actionBox.setAttribute('_h5p_actionbox_', vpid);
  1303. $hs.trigger_actionBoxes = [actionBox];
  1304.  
  1305. if (!actionBox.hasAttribute('tabindex')) actionBox.setAttribute('tabindex', '-1');
  1306.  
  1307.  
  1308.  
  1309. }
  1310. return actionBox;
  1311. },
  1312.  
  1313. videoSrcFound: function(player) {
  1314.  
  1315. // src loaded
  1316.  
  1317. if (!player) return;
  1318. let vpid = player.getAttribute('_h5ppid') || null;
  1319. if (!vpid || !player.currentSrc) return;
  1320.  
  1321. player._isThisPausedBefore_ = false;
  1322.  
  1323. player.removeAttribute('_h5p_uid_encrypted');
  1324.  
  1325. if (player._record_continuous) player._record_continuous._lastSave = -999; //first time must save
  1326.  
  1327. let uid_A = location.pathname.replace(/[^\d+]/g, '') + '.' + location.search.replace(/[^\d+]/g, '');
  1328. let _uid = location.hostname.replace('www.', '').toLowerCase() + '!' + location.pathname.toLowerCase() + 'A' + uid_A + 'W' + player.videoWidth + 'H' + player.videoHeight + 'L' + (player.duration << 0);
  1329.  
  1330. digestMessage(_uid).then(function(_uid_encrypted) {
  1331.  
  1332. let d = +new Date;
  1333.  
  1334. let recordedTime = null;
  1335.  
  1336. ;
  1337. (function() {
  1338. //read the last record only;
  1339.  
  1340. let k1 = '_h5_player_play_progress_';
  1341. let k1n = '_play_progress_';
  1342. let k2 = _uid_encrypted;
  1343. let k3 = k1 + k2;
  1344. let k3n = k1n + k2;
  1345. let m2 = Store._keys().filter(key => key.substr(0, k3.length) == k3); //all progress records for this video
  1346. let m2v = m2.map(keyName => +(keyName.split('+')[1] || '0'))
  1347. let m2vMax = Math.max(0, ...m2v)
  1348. if (!m2vMax) recordedTime = null;
  1349. else {
  1350. let _json_recordedTime = null;
  1351. _json_recordedTime = Store.read(k3n + '+' + m2vMax);
  1352. if (!_json_recordedTime) _json_recordedTime = {};
  1353. else _json_recordedTime = jsonParse(_json_recordedTime);
  1354. if (typeof _json_recordedTime == 'object') recordedTime = _json_recordedTime;
  1355. else recordedTime = null;
  1356. recordedTime = typeof recordedTime == 'object' ? recordedTime.t : recordedTime;
  1357. if (typeof recordedTime == 'number' && (+recordedTime >= 0 || +recordedTime <= 0)) {
  1358.  
  1359. } else if (typeof recordedTime == 'string' && recordedTime.length > 0 && (+recordedTime >= 0 || +recordedTime <= 0)) {
  1360. recordedTime = +recordedTime
  1361. } else {
  1362. recordedTime = null
  1363. }
  1364. }
  1365. if (recordedTime !== null) {
  1366. player._h5player_lastrecord_ = recordedTime;
  1367. } else {
  1368. player._h5player_lastrecord_ = null;
  1369. }
  1370. if (player._h5player_lastrecord_ > 5) {
  1371. consoleLog('last record playing', player._h5player_lastrecord_);
  1372. setTimeout(function() {
  1373. $hs._tips(player, `Press Shift-R to restore Last Playback: ${$hs.toolFormatCT(player._h5player_lastrecord_)}`, 5000, 4000)
  1374. }, 1000)
  1375. }
  1376.  
  1377. })();
  1378. // delay the recording by 5.4s => prevent ads or mis operation
  1379. setTimeout(function() {
  1380.  
  1381. let k1 = '_h5_player_play_progress_';
  1382. let k1n = '_play_progress_';
  1383. let k2 = _uid_encrypted;
  1384. let k3 = k1 + k2;
  1385. let k3n = k1n + k2;
  1386.  
  1387. //re-read all the localStorage keys
  1388. let m1 = Store._keys().filter(key => key.substr(0, k1.length) == k1); //all progress records in this site
  1389. let p = m1.length + 1;
  1390.  
  1391. for (const key of m1) { //all progress records for this video
  1392. if (key.substr(0, k3.length) == k3) {
  1393. Store._removeItem(key); //remove previous record for the current video
  1394. p--;
  1395. }
  1396. }
  1397.  
  1398. if (recordedTime !== null) {
  1399. Store.save(k3n + '+' + d, jsonStringify({
  1400. 't': recordedTime
  1401. })) //prevent loss of last record
  1402. }
  1403.  
  1404. const _record_max_ = 48;
  1405. const _record_keep_ = 26;
  1406.  
  1407. if (p > _record_max_) {
  1408. //exisiting 48 records for one site;
  1409. //keep only 26 records
  1410.  
  1411. const comparator = (a, b) => (a.t < b.t ? -1 : a.t > b.t ? 1 : 0);
  1412.  
  1413. m1
  1414. .map(keyName => ({
  1415. keyName,
  1416. t: +(keyName.split('+')[1] || '0')
  1417. }))
  1418. .sort(comparator)
  1419. .slice(0, -_record_keep_)
  1420. .forEach((item) => localStorage.removeItem(item.keyName));
  1421.  
  1422. consoleLog(`stored progress: reduced to ${_record_keep_}`)
  1423. }
  1424.  
  1425. player.setAttribute('_h5p_uid_encrypted', _uid_encrypted + '+' + d);
  1426.  
  1427. //try to start recording
  1428. if (player._record_continuous) player._record_continuous.playingWithRecording();
  1429.  
  1430. }, 5400);
  1431.  
  1432. })
  1433.  
  1434. },
  1435. bindDocEvents: function(rootNode) {
  1436. if (!rootNode._onceBindedDocEvents) {
  1437.  
  1438. rootNode._onceBindedDocEvents = true;
  1439. rootNode.addEventListener('keydown', $hs.handlerRootKeyDownEvent, true)
  1440. document._debug_rootNode_ = rootNode;
  1441.  
  1442. rootNode.addEventListener('mouseenter', $hs.handlerElementMouseEnter, true)
  1443. rootNode.addEventListener('mousedown', $hs.handlerElementMouseDown, true)
  1444. rootNode.addEventListener('dblclick', $hs.handlerElementDblClick, true)
  1445. rootNode.addEventListener('wheel', $hs.handlerElementWheelTuneVolume, {
  1446. passive: false
  1447. });
  1448. // wheel - bubble events to keep it simple (i.e. it must be passive:false & capture:false)
  1449.  
  1450. }
  1451. },
  1452. fireGlobalInit: function() {
  1453. if ($hs.intVideoInitCount != 1) return;
  1454. if (!$hs.varSrcList) $hs.varSrcList = {};
  1455. $hs.isLostFocus = null;
  1456. try {
  1457. //iframe may not be able to control top window
  1458. //error; just ignore with async
  1459. let topDoc = window.top && window.top.document ? window.top.document : null;
  1460. if (topDoc) {
  1461. topDoc.addEventListener('focusout', $hs.handlerDocFocusOut, true)
  1462. topDoc.addEventListener('focusin', $hs.handlerDocFocusIn, true)
  1463. }
  1464.  
  1465. } catch (e) {}
  1466. Store.clearInvalid(_sVersion_)
  1467. },
  1468. onVideoTriggering: function() {
  1469.  
  1470.  
  1471. // initialize a single video player - h5Player.playerInstance
  1472.  
  1473. /**
  1474. * 初始化播放器實例
  1475. */
  1476. let player = $hs.playerInstance
  1477. if (!player) return
  1478.  
  1479. let vpid = player.getAttribute('_h5ppid');
  1480.  
  1481. if (!vpid) return;
  1482.  
  1483. let firstTime = !!$hs.initTips()
  1484. if (firstTime) {
  1485. // first time to trigger this player
  1486. if (!player.hasAttribute('playsinline')) player.setAttribute('playsinline', 'playsinline');
  1487. if (!player.hasAttribute('x-webkit-airplay')) player.setAttribute('x-webkit-airplay', 'deny');
  1488. if (!player.hasAttribute('preload')) player.setAttribute('preload', 'auto');
  1489. //player.style['image-rendering'] = 'crisp-edges';
  1490. $hs.playbackRate = $hs.getPlaybackRate()
  1491. }
  1492.  
  1493. },
  1494. getPlaybackRate: function() {
  1495. let playbackRate = Store.read('_playback_rate_') || $hs.playbackRate
  1496. return Number(Number(playbackRate).toFixed(1))
  1497. },
  1498. getPlayerBlockElement: function(player) {
  1499. //without checkActiveBox, just a DOM for you to append tipsDom
  1500.  
  1501. let layoutBox = null,
  1502. wPlayer = null
  1503.  
  1504. if (!player || !player.offsetHeight || !player.offsetWidth || !player.parentNode) {
  1505. return null;
  1506. }
  1507.  
  1508. function search_nodes() {
  1509.  
  1510. wPlayer = player; // NOT NULL
  1511. layoutBox = wPlayer.parentNode; // NOT NULL
  1512.  
  1513. while (layoutBox.parentNode && layoutBox.nodeType == 1 && layoutBox.offsetHeight == 0) {
  1514. wPlayer = layoutBox; // NOT NULL
  1515. layoutBox = layoutBox.parentNode; // NOT NULL
  1516. }
  1517. //container must be with offsetHeight
  1518.  
  1519. while (layoutBox.parentNode && layoutBox.nodeType == 1 && layoutBox.offsetHeight < player.offsetHeight) {
  1520. wPlayer = layoutBox; // NOT NULL
  1521. layoutBox = layoutBox.parentNode; // NOT NULL
  1522. }
  1523. //container must have height >= player height
  1524.  
  1525. }
  1526.  
  1527. search_nodes();
  1528.  
  1529. if (layoutBox.nodeType == 11) {
  1530.  
  1531.  
  1532. //shadowRoot without html and body
  1533. let shadowChild, shadowElm_container, shadowElm_head, shadowElm_html;
  1534. let rootNode = getRoot(player);
  1535. if (rootNode.querySelectorAll('html,body').length < 2) {
  1536.  
  1537. shadowElm_container = player.ownerDocument.createElement('BODY')
  1538. rootNode.insertBefore(shadowElm_container, rootNode.firstChild)
  1539.  
  1540. while (shadowChild = shadowElm_container.nextSibling) shadowElm_container.appendChild(shadowChild);
  1541.  
  1542. shadowElm_head = rootNode.insertBefore(player.ownerDocument.createElement('HEAD'), shadowElm_container)
  1543.  
  1544. shadowElm_html = rootNode.insertBefore(player.ownerDocument.createElement('HTML'), shadowElm_head)
  1545.  
  1546. shadowElm_container.setAttribute('style', 'padding:0;margin:0;border:0; box-sizing: border-box;')
  1547. shadowElm_html.setAttribute('style', 'padding:0;margin:0;border:0; box-sizing: border-box;')
  1548.  
  1549. shadowElm_html.appendChild(shadowElm_head)
  1550. shadowElm_html.appendChild(shadowElm_container)
  1551.  
  1552. }
  1553.  
  1554. search_nodes();
  1555.  
  1556. }
  1557.  
  1558. //condition:
  1559. //!layoutBox.parentNode || layoutBox.nodeType != 1 || layoutBox.offsetHeight > player.offsetHeight
  1560.  
  1561. // layoutBox is a node contains <video> and offsetHeight>=video.offsetHeight
  1562. // wPlayer is a HTML Element (nodeType==1)
  1563. // you can insert the DOM element into the layoutBox
  1564.  
  1565. if (layoutBox && wPlayer && layoutBox.nodeType === 1 && wPlayer.parentNode == layoutBox) return wPlayer;
  1566. throw 'unknown error';
  1567.  
  1568. },
  1569. getCommonContainer: function(elm1, elm2) {
  1570.  
  1571. let box1 = elm1;
  1572. let box2 = elm2;
  1573.  
  1574. while (box1 && box2) {
  1575. if (box1.contains(box2) || box2.contains(box1)) {
  1576. break;
  1577. }
  1578. box1 = box1.parentNode;
  1579. box2 = box2.parentNode;
  1580. }
  1581.  
  1582. let layoutBox = null;
  1583.  
  1584. box1 = (box1 && box1.contains(elm2)) ? box1 : null;
  1585. box2 = (box2 && box2.contains(elm1)) ? box2 : null;
  1586.  
  1587. if (box1 && box2) layoutBox = box1.contains(box2) ? box2 : box1;
  1588. else layoutBox = box1 || box2 || null;
  1589.  
  1590. return layoutBox
  1591.  
  1592. },
  1593. change_layoutBox: function(tipsDom) {
  1594. let player = $hs.player()
  1595. if (!player) return;
  1596. let wPlayer = $hs.getPlayerBlockElement(player);
  1597. let layoutBox = wPlayer.parentNode;
  1598.  
  1599. if ((layoutBox && layoutBox.nodeType == 1) && (!tipsDom.parentNode || tipsDom.parentNode !== layoutBox)) {
  1600.  
  1601. consoleLog('changed_layoutBox')
  1602. layoutBox.insertBefore(tipsDom, wPlayer);
  1603.  
  1604. }
  1605. },
  1606.  
  1607. queryFullscreenBtnsIndependant: function(parentNode, returnElementsOnly) {
  1608.  
  1609. let btns = [];
  1610. for (const elm of parentNode.querySelectorAll('[class*="full"][class*="screen"]')) {
  1611. let className = (elm.getAttribute('class') || "");
  1612. if (/\b(fullscreen|full-screen)\b/i.test(className.replace(/([A-Z][a-z]+)/g, '-$1-').replace(/[\_\-]+/g, '-'))) {
  1613.  
  1614. let hasClickListeners = null,
  1615. childElementCount = null,
  1616. isVisible = null;
  1617.  
  1618.  
  1619. if ('_listeners' in elm) {
  1620.  
  1621. hasClickListeners = elm._listeners && elm._listeners.click && elm._listeners.click.funcCount > 0
  1622.  
  1623. }
  1624.  
  1625. if ('childElementCount' in elm) {
  1626.  
  1627. childElementCount = elm.childElementCount;
  1628.  
  1629. }
  1630. if ('offsetParent' in elm) {
  1631. isVisible = !!elm.offsetParent; //works with parent/self display none; not work with visiblity hidden / opacity0
  1632.  
  1633. }
  1634.  
  1635. if (hasClickListeners) {
  1636. let btn = {
  1637. elm,
  1638. isVisible,
  1639. hasClickListeners,
  1640. childElementCount,
  1641. isContained: null
  1642. };
  1643.  
  1644.  
  1645. btns.push(returnElementsOnly ? elm : btn)
  1646.  
  1647. }
  1648.  
  1649. }
  1650. }
  1651. return btns;
  1652.  
  1653. },
  1654. exclusiveElements: function(elms) {
  1655.  
  1656. //not containing others
  1657. let res = [];
  1658.  
  1659. for (const roleElm of elms) {
  1660.  
  1661. let isContained = false;
  1662. for (const testElm of elms) {
  1663. if (testElm != roleElm && roleElm.contains(testElm)) {
  1664. isContained = true;
  1665. break;
  1666. }
  1667. }
  1668. if (!isContained) res.push(roleElm)
  1669. }
  1670. return res;
  1671.  
  1672. },
  1673. videoFullscreenBtns: function(startPoint, searchCount) {
  1674.  
  1675.  
  1676. let c = 0,
  1677. p = startPoint,
  1678. q = null;
  1679. while (p && (++c <= searchCount)) {
  1680.  
  1681. if (p.querySelectorAll('video').length !== 1) break;
  1682.  
  1683. let elmFullscreenBtns = $hs.queryFullscreenBtnsIndependant(p, true);
  1684. if (elmFullscreenBtns.length > 0) {
  1685.  
  1686. let exclusiveFullscreenBtns = $hs.exclusiveElements(elmFullscreenBtns)
  1687. if (exclusiveFullscreenBtns.length > 0) {
  1688. return {
  1689. container: p,
  1690. elements: exclusiveFullscreenBtns
  1691. };
  1692.  
  1693. }
  1694. }
  1695.  
  1696.  
  1697. q = p;
  1698. p = p.parentNode;
  1699. }
  1700.  
  1701. return null;
  1702.  
  1703.  
  1704.  
  1705.  
  1706. },
  1707. callFullScreenBtn: function() {
  1708.  
  1709. let player = $hs.player()
  1710. if (!player || !player.ownerDocument || !('exitFullscreen' in player.ownerDocument)) return;
  1711.  
  1712. let btnElement = null;
  1713.  
  1714. let vpid = player.getAttribute('_h5ppid') || null;
  1715.  
  1716. if (!vpid) return;
  1717.  
  1718.  
  1719. const chFull = $hs.toolCheckFullScreen(player.ownerDocument);
  1720.  
  1721.  
  1722.  
  1723.  
  1724. if (chFull === true) {
  1725. player.ownerDocument.exitFullscreen();
  1726. } else if (chFull === false) {
  1727.  
  1728.  
  1729. let actionBox = getRoot(player).querySelector(`[_h5p_actionbox_="${vpid}"]`);
  1730.  
  1731. if (actionBox) {
  1732.  
  1733. let exclusiveFullscreenBtns = $hs.videoFullscreenBtns(actionBox, 1);
  1734. let btnElements = exclusiveFullscreenBtns ? exclusiveFullscreenBtns.elements : null;
  1735. if (btnElements && btnElements.length > 0) {
  1736.  
  1737. //consoleLog('fullscreen btn', btnElements)
  1738.  
  1739. const lens_elemsClassName = btnElements.map(elm => elm.className.length)
  1740. const j_elemsClassName = Math.min(...lens_elemsClassName)
  1741. let btnElement_idx = lens_elemsClassName.lastIndexOf(j_elemsClassName)
  1742. // pick the last btn if there is more than one
  1743. btnElement = btnElements[btnElement_idx];
  1744. window.requestAnimationFrame(() => btnElement.click());
  1745. //consoleLog('original fullscreen')
  1746.  
  1747. }
  1748. }
  1749.  
  1750.  
  1751. }
  1752.  
  1753. if (chFull === null || (chFull === false && !btnElement)) {
  1754.  
  1755. let layoutBox = $hs.getPlayerBlockElement(player).parentNode;
  1756.  
  1757. let gPlayer = null;
  1758. if (!layoutBox || !layoutBox.parentNode) {
  1759. consoleLog('the container for DOM fullscreen cannot be found')
  1760. return;
  1761. }
  1762. gPlayer = layoutBox.parentNode.querySelector(`[_h5p_actionbox_="${vpid}"]`); //the box can be layoutBox
  1763.  
  1764. consoleLog('DOM fullscreen', gPlayer)
  1765. try {
  1766. gPlayer.requestFullscreen() //known bugs : TypeError: fullscreen error
  1767. } catch (e) {
  1768. consoleLogF('fullscreen error', e)
  1769. }
  1770.  
  1771.  
  1772. }
  1773.  
  1774.  
  1775.  
  1776.  
  1777. },
  1778. /* 設置播放速度 */
  1779. setPlaybackRate: function(num, flagTips) {
  1780. let player = $hs.player()
  1781. let curPlaybackRate
  1782. if (num) {
  1783. num = +num
  1784. if (num > 0) { // also checking the type of variable
  1785. curPlaybackRate = num < 0.1 ? 0.1 : +(num.toFixed(1))
  1786. } else {
  1787. console.error('h5player: 播放速度轉換出錯')
  1788. return false
  1789. }
  1790. } else {
  1791. curPlaybackRate = $hs.getPlaybackRate()
  1792. }
  1793. /* 記錄播放速度的信息 */
  1794.  
  1795. let changed = curPlaybackRate !== player.playbackRate;
  1796.  
  1797. if (curPlaybackRate !== player.playbackRate) {
  1798.  
  1799. Store.save('_playback_rate_', curPlaybackRate + '')
  1800. $hs.playbackRate = curPlaybackRate
  1801. player.playbackRate = curPlaybackRate
  1802. /* 本身處於1被播放速度的時候不再提示 */
  1803. //if (!num && curPlaybackRate === 1) return;
  1804.  
  1805. }
  1806.  
  1807. flagTips = (flagTips < 0) ? false : (flagTips > 0) ? true : changed;
  1808. if (flagTips) $hs.tips('Playback speed: ' + player.playbackRate + 'x')
  1809. },
  1810. tuneCurrentTime: function(amount, flagTips) {
  1811. let _amount = +(+amount).toFixed(1);
  1812. let player = $hs.player();
  1813. if (_amount >= 0 || _amount < 0) {} else {
  1814. return;
  1815. }
  1816.  
  1817. let newCurrentTime = player.currentTime + _amount;
  1818. if (newCurrentTime < 0) newCurrentTime = 0;
  1819. if (newCurrentTime > player.duration) newCurrentTime = player.duration;
  1820.  
  1821. let changed = newCurrentTime != player.currentTime && newCurrentTime >= 0 && newCurrentTime <= player.duration;
  1822.  
  1823. if (changed) {
  1824. //player.currentTime = newCurrentTime;
  1825. player.pause();
  1826. let t_ch = (Math.random() / 5 + .75);
  1827. player.currentTime = newCurrentTime * t_ch + player.currentTime * (1.0 - t_ch);
  1828. setTimeout(() => {
  1829. player.play();
  1830. player.currentTime = newCurrentTime;
  1831. }, 33);
  1832. flagTips = (flagTips < 0) ? false : (flagTips > 0) ? true : changed;
  1833. $hs.tips(false);
  1834. if (flagTips) {
  1835. if (_amount > 0) $hs.tips(_amount + ' Sec. Forward', undefined, 3000);
  1836. else $hs.tips(-_amount + ' Sec. Backward', undefined, 3000)
  1837. }
  1838. }
  1839.  
  1840. },
  1841. tuneVolume: function(amount) {
  1842. let _amount = +(+amount).toFixed(2);
  1843.  
  1844. let player = $hs.player()
  1845.  
  1846. let newVol = player.volume + _amount;
  1847. if (newVol < 0) newVol = 0;
  1848. if (newVol > 1) newVol = 1;
  1849. let chVol = player.volume !== newVol && newVol >= 0 && newVol <= 1;
  1850.  
  1851. if (chVol) {
  1852.  
  1853. if (_amount > 0 && player.volume < 1) {
  1854. player.volume = newVol // positive
  1855. } else if (_amount < 0 && player.volume > 0) {
  1856. player.volume = newVol // negative
  1857. }
  1858. $hs.tips(false);
  1859. $hs.tips('Volume: ' + dround(player.volume * 100) + '%', undefined)
  1860. }
  1861. },
  1862. switchPlayStatus: function() {
  1863. let player = $hs.player()
  1864. if (player.paused) {
  1865. player.play()
  1866. if (player._isThisPausedBefore_) {
  1867. $hs.tips(false);
  1868. $hs.tips('Playback resumed', undefined, 2500)
  1869. }
  1870. } else {
  1871. player.pause()
  1872. $hs.tips(false);
  1873. $hs.tips('Playback paused', undefined, 2500)
  1874. }
  1875. },
  1876. tipsClassName: 'html_player_enhance_tips',
  1877. _tips: function(player, str, duration, order) {
  1878.  
  1879.  
  1880. if (!player.getAttribute('_h5player_tips')) $hs.initTips();
  1881.  
  1882. let tipsSelector = '#' + (player.getAttribute('_h5player_tips') || $hs.tipsClassName) //if this attribute still doesnt exist, set it to the base cls name
  1883. let tipsDom = getRoot(player).querySelector(tipsSelector)
  1884. if (!tipsDom) {
  1885. consoleLog('init h5player tips dom error...')
  1886. return false
  1887. }
  1888. $hs.change_layoutBox(tipsDom);
  1889.  
  1890.  
  1891. if (str === false) {
  1892. tipsDom.textContent = '';
  1893. tipsDom.setAttribute('_potTips_', '0')
  1894. } else {
  1895. order = order || 1000
  1896. tipsDom.tipsOrder = tipsDom.tipsOrder || 0;
  1897.  
  1898. let shallDisplay = true
  1899. if (order < tipsDom.tipsOrder && getComputedStyle(tipsDom).opacity > 0) shallDisplay = false
  1900.  
  1901. if (shallDisplay) {
  1902. tipsDom._playerElement = player;
  1903. tipsDom._playerVPID = player.getAttribute('_h5ppid');
  1904. tipsDom._playerBlockElm = $hs.getPlayerBlockElement(player)
  1905.  
  1906. if (duration === undefined) duration = 2000
  1907. tipsDom.textContent = str
  1908. tipsDom.setAttribute('_potTips_', '2')
  1909.  
  1910. if (duration > 0) {
  1911. $ws.requestAnimationFrame(() => tipsDom.setAttribute('_potTips_', '1'))
  1912. } else {
  1913. order = -1;
  1914. }
  1915.  
  1916. tipsDom.tipsOrder = order
  1917.  
  1918. }
  1919.  
  1920. }
  1921.  
  1922. if(window.ResizeObserver){
  1923. //observe not fire twice for the same element.
  1924. if(!$hs.observer_resizeVideos) $hs.observer_resizeVideos=new ResizeObserver(hanlderResizeVideo)
  1925. $hs.observer_resizeVideos.observe(tipsDom._playerBlockElm.parentNode)
  1926. $hs.observer_resizeVideos.observe(tipsDom._playerBlockElm)
  1927. $hs.observer_resizeVideos.observe(player)
  1928. }
  1929. //ensure function called
  1930. window.requestAnimationFrame(()=>$hs.fixNonBoxingVideoTipsPosition(tipsDom, player))
  1931.  
  1932. },
  1933. tips: function(str, duration, order) {
  1934. let player = $hs.player()
  1935. if (!player) {
  1936. consoleLog('h5Player Tips:', str)
  1937. return true
  1938. }
  1939.  
  1940. return $hs._tips(player, str, duration, order)
  1941.  
  1942. },
  1943. listOfTipsDom: [],
  1944. getPotTips: function(arr) {
  1945. const res = [];
  1946. for (const tipsDom of $hs.listOfTipsDom) {
  1947. if (tipsDom && tipsDom.nodeType > 0 && tipsDom.parentNode && tipsDom.ownerDocument) {
  1948. if (tipsDom._playerBlockElm && tipsDom._playerBlockElm.parentNode) {
  1949. const potTipsAttr = tipsDom.getAttribute('_potTips_')
  1950. if (arr.indexOf(potTipsAttr) >= 0) res.push(tipsDom)
  1951. }
  1952. }
  1953. }
  1954. return res;
  1955. },
  1956. initTips: function() {
  1957. /* 設置提示DOM的樣式 */
  1958. let player = $hs.player()
  1959. let shadowRoot = getRoot(player);
  1960. let doc = player.ownerDocument;
  1961. //console.log((document.documentElement.qq=player),shadowRoot,'xax')
  1962. let parentNode = player.parentNode
  1963. let tcn = player.getAttribute('_h5player_tips') || ($hs.tipsClassName + '_' + (+new Date));
  1964. player.setAttribute('_h5player_tips', tcn)
  1965. if (shadowRoot.querySelector('#' + tcn)) return false;
  1966.  
  1967. if (!shadowRoot._onceAddedCSS) {
  1968. shadowRoot._onceAddedCSS = true;
  1969.  
  1970. let cssStyle = `
  1971. [_potTips_="1"]{
  1972. animation: 2s linear 0s normal forwards 1 delayHide;
  1973. }
  1974. [_potTips_="0"]{
  1975. opacity:0; transform:translate(-9999px);
  1976. }
  1977. [_potTips_="2"]{
  1978. opacity:.95; transform: translate(0,0);
  1979. }
  1980.  
  1981. @keyframes delayHide{
  1982. 0%, 99% { opacity:0.95; transform: translate(0,0); }
  1983. 100% { opacity:0; transform:translate(-9999px); }
  1984. }
  1985. ` + `
  1986. [_potTips_]{
  1987. font-weight: bold !important;
  1988. position: absolute !important;
  1989. z-index: 999 !important;
  1990. font-size: ${$hs.fontSize || 16}px !important;
  1991. padding: 0px !important;
  1992. border:none !important;
  1993. background: rgba(0,0,0,0) !important;
  1994. color:#738CE6 !important;
  1995. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  1996. top: 50%;
  1997. left: 50%;
  1998. max-width:500px;max-height:50px;
  1999. border-radius:3px;
  2000. font-family: 'microsoft yahei', Verdana, Geneva, sans-serif;
  2001. pointer-events: none;
  2002. }
  2003. body div[_potTips_]{
  2004. -webkit-user-select: none !important;
  2005. -moz-user-select: none !important;
  2006. -ms-user-select: none !important;
  2007. user-select: none !important;
  2008. -webkit-touch-callout: none !important;
  2009. -webkit-user-select: none !important;
  2010. -khtml-user-drag: none !important;
  2011. -khtml-user-select: none !important;
  2012. -moz-user-select: none !important;
  2013. -moz-user-select: -moz-none !important;
  2014. -ms-user-select: none !important;
  2015. user-select: none !important;
  2016. }
  2017. `.replace(/\r\n/g, '');
  2018.  
  2019. let cssContainer = (shadowRoot.querySelector('head') || shadowRoot.querySelector('html') || document.documentElement);
  2020.  
  2021. domTool.addStyle(cssStyle, cssContainer);
  2022.  
  2023. }
  2024.  
  2025. let tipsDom = doc.createElement('div')
  2026.  
  2027. tipsDom.addEventListener(crossBrowserTransition('animation'), function(e) {
  2028. if (this.getAttribute('_potTips_') == '1') {
  2029. this.setAttribute('_potTips_', '0')
  2030. }
  2031. })
  2032.  
  2033. tipsDom.id = tcn;
  2034. tipsDom.setAttribute('_potTips_', '0');
  2035. $hs.listOfTipsDom.push(tipsDom);
  2036. $hs.change_layoutBox(tipsDom);
  2037.  
  2038. return true;
  2039. },
  2040.  
  2041. responsiveSizing: function(container, elm) {
  2042.  
  2043. let gcssP = getComputedStyle(container);
  2044.  
  2045. let gcssE = getComputedStyle(elm);
  2046.  
  2047. //console.log(gcssE.left,gcssP.width)
  2048. let elmBound = {
  2049. left: parseFloat(gcssE.left) / parseFloat(gcssP.width),
  2050. width: parseFloat(gcssE.width) / parseFloat(gcssP.width),
  2051. top: parseFloat(gcssE.top) / parseFloat(gcssP.height),
  2052. height: parseFloat(gcssE.height) / parseFloat(gcssP.height)
  2053. };
  2054.  
  2055. let elm00 = [elmBound.left, elmBound.top];
  2056. let elm01 = [elmBound.left + elmBound.width, elmBound.top];
  2057. let elm10 = [elmBound.left, elmBound.top + elmBound.height];
  2058. let elm11 = [elmBound.left + elmBound.width, elmBound.top + elmBound.height];
  2059.  
  2060. return {
  2061. elm00,
  2062. elm01,
  2063. elm10,
  2064. elm11,
  2065. plw: elmBound.width,
  2066. plh: elmBound.height
  2067. };
  2068.  
  2069. },
  2070.  
  2071. fixNonBoxingVideoTipsPosition: function(tipsDom, player) {
  2072.  
  2073. if (!tipsDom || !player) return;
  2074.  
  2075. let ct = $hs.getCommonContainer(tipsDom, player)
  2076.  
  2077. if (!ct) return;
  2078.  
  2079. //relative
  2080.  
  2081. let elm00 = $hs.responsiveSizing(ct, player).elm00;
  2082.  
  2083. if (isNaN(elm00[0]) || isNaN(elm00[1])) {
  2084.  
  2085. [tipsDom.style.left, tipsDom.style.top] = [player.style.left, player.style.top];
  2086. //eg auto
  2087. } else {
  2088.  
  2089. let rlm00 = elm00.map(t => (t * 100).toFixed(2) + '%');
  2090. [tipsDom.style.left, tipsDom.style.top] = rlm00;
  2091.  
  2092. }
  2093.  
  2094. // absolute
  2095.  
  2096. let _offset = {
  2097. left: 10,
  2098. top: 15
  2099. };
  2100.  
  2101. let customOffset = {
  2102. left: _offset.left,
  2103. top: _offset.top
  2104. };
  2105. let p = tipsDom.getBoundingClientRect();
  2106. let q = player.getBoundingClientRect();
  2107. let currentPos = [p.left, p.top];
  2108.  
  2109. let targetPos = [q.left + player.offsetWidth * 0 + customOffset.left, q.top + player.offsetHeight * 0 + customOffset.top];
  2110.  
  2111. let mL = +tipsDom.style.marginLeft.replace('px', '') || 0;
  2112. if (isNaN(mL)) mL = 0;
  2113. let mT = +tipsDom.style.marginTop.replace('px', '') || 0;
  2114. if (isNaN(mT)) mT = 0;
  2115.  
  2116. let z1 = -(currentPos[0] - targetPos[0]);
  2117. let z2 = -(currentPos[1] - targetPos[1]);
  2118.  
  2119. if (z1 || z2) {
  2120.  
  2121. let y1 = z1 + mL;
  2122. let y2 = z2 + mT;
  2123.  
  2124. tipsDom.style.marginLeft = y1 + 'px';
  2125. tipsDom.style.marginTop = y2 + 'px';
  2126.  
  2127. }
  2128. },
  2129.  
  2130. playerTrigger: function(player, event) {
  2131. if (!player || !event) return
  2132. const pCode = event.code;
  2133. let keyAsm = (event.shiftKey ? SHIFT : 0) | ((event.ctrlKey || event.metaKey) ? CTRL : 0) | (event.altKey ? ALT : 0);
  2134.  
  2135.  
  2136. let vpid = player.getAttribute('_h5ppid') || null;
  2137. if (!vpid) return;
  2138. let playerConf = playerConfs[vpid]
  2139. if (!playerConf) return;
  2140.  
  2141. //shift + key
  2142. if (keyAsm == SHIFT) {
  2143. // 網頁FULLSCREEN
  2144. if (pCode === 'Enter') {
  2145. $hs.callFullScreenBtn()
  2146. return TERMINATE
  2147. } else if (pCode == 'KeyF') {
  2148. //change unsharpen filter
  2149.  
  2150. let resList = ["unsharpen3_05", "unsharpen3_10", "unsharpen5_05", "unsharpen5_10", "unsharpen9_05", "unsharpen9_10"]
  2151. let res = (prompt("Enter the unsharpen mask\n(" + resList.map(x => '"' + x + '"').join(', ') + ")", "unsharpen9_05") || "").toLowerCase();
  2152. if (resList.indexOf(res) < 0) res = ""
  2153. GM_setValue("unsharpen_mask", res)
  2154. for (const el of document.querySelectorAll('video[_h5p_uid_encrypted]')) {
  2155. if (el.style.filter == "" || el.style.filter) {
  2156. let filterStr1 = el.style.filter.replace(/\s*url\(\"#_h5p_unsharpen[\d\_]+\"\)/, '');
  2157. let filterStr2 = (res.length > 0 ? ' url("#_h5p_' + res + '")' : '')
  2158. el.style.filter = filterStr1 + filterStr2;
  2159. }
  2160. }
  2161. return TERMINATE
  2162.  
  2163. }
  2164. // 進入或退出畫中畫模式
  2165. else if (pCode == 'KeyP') {
  2166. $hs.pictureInPicture(player)
  2167.  
  2168. return TERMINATE
  2169. } else if (pCode == 'KeyR') {
  2170. if (player._h5player_lastrecord_ !== null && (player._h5player_lastrecord_ >= 0 || player._h5player_lastrecord_ <= 0)) {
  2171. $hs.setPlayProgress(player, player._h5player_lastrecord_)
  2172.  
  2173. return TERMINATE
  2174. }
  2175.  
  2176. } else if (pCode == 'KeyO') {
  2177. let _debug_h5p_logging_ch = false;
  2178. try {
  2179. Store._setItem('_h5_player_sLogging_', 1 - Store._getItem('_h5_player_sLogging_'))
  2180. _debug_h5p_logging_ = +Store._getItem('_h5_player_sLogging_') > 0;
  2181. _debug_h5p_logging_ch = true;
  2182. } catch (e) {
  2183.  
  2184. }
  2185. consoleLogF('_debug_h5p_logging_', !!_debug_h5p_logging_, 'changed', _debug_h5p_logging_ch)
  2186.  
  2187. if (_debug_h5p_logging_ch) {
  2188.  
  2189. return TERMINATE
  2190. }
  2191. } else if (pCode == 'KeyT') {
  2192. if (/^blob/i.test(player.currentSrc)) {
  2193. alert(`The current video is ${player.currentSrc}\nSorry, it cannot be opened in PotPlayer.`);
  2194. } else {
  2195. let confirm_res = confirm(`The current video is ${player.currentSrc}\nDo you want to open it in PotPlayer?`);
  2196. if (confirm_res) window.open('potplayer://' + player.currentSrc, '_blank');
  2197. }
  2198. return TERMINATE
  2199. }
  2200.  
  2201.  
  2202.  
  2203. let videoScale = playerConf.vFactor;
  2204.  
  2205. function tipsForVideoScaling() {
  2206.  
  2207. playerConf.vFactor = +videoScale.toFixed(1);
  2208.  
  2209. playerConf.cssTransform();
  2210. let tipsMsg = `視頻縮放率:${ +(videoScale * 100).toFixed(2) }%`
  2211. if (playerConf.translate.x) {
  2212. tipsMsg += `,水平位移:${playerConf.translate.x}px`
  2213. }
  2214. if (playerConf.translate.y) {
  2215. tipsMsg += `,垂直位移:${playerConf.translate.y}px`
  2216. }
  2217. $hs.tips(false);
  2218. $hs.tips(tipsMsg)
  2219.  
  2220.  
  2221. }
  2222.  
  2223. // 視頻畫面縮放相關事件
  2224.  
  2225. switch (pCode) {
  2226. // shift+X:視頻縮小 -0.1
  2227. case 'KeyX':
  2228. videoScale -= 0.1
  2229. if (videoScale < 0.1) videoScale = 0.1;
  2230. tipsForVideoScaling();
  2231. return TERMINATE
  2232. break
  2233. // shift+C:視頻放大 +0.1
  2234. case 'KeyC':
  2235. videoScale += 0.1
  2236. if (videoScale > 16) videoScale = 16;
  2237. tipsForVideoScaling();
  2238. return TERMINATE
  2239. break
  2240. // shift+Z:視頻恢復正常大小
  2241. case 'KeyZ':
  2242. videoScale = 1.0
  2243. playerConf.translate.x=0;
  2244. playerConf.translate.y=0;
  2245. tipsForVideoScaling();
  2246. return TERMINATE
  2247. break
  2248. case 'ArrowRight':
  2249. playerConf.translate.x += 10
  2250. tipsForVideoScaling();
  2251. return TERMINATE
  2252. break
  2253. case 'ArrowLeft':
  2254. playerConf.translate.x -= 10
  2255. tipsForVideoScaling();
  2256. return TERMINATE
  2257. break
  2258. case 'ArrowUp':
  2259. playerConf.translate.y -= 10
  2260. tipsForVideoScaling();
  2261. return TERMINATE
  2262. break
  2263. case 'ArrowDown':
  2264. playerConf.translate.y += 10
  2265. tipsForVideoScaling();
  2266. return TERMINATE
  2267. break
  2268.  
  2269. }
  2270.  
  2271. }
  2272. // 防止其它無關組合鍵衝突
  2273. if (!keyAsm) {
  2274. let kControl = null
  2275. let newPBR, oldPBR, nv;
  2276. switch (pCode) {
  2277. // 方向鍵右→:快進3秒
  2278. case 'ArrowRight':
  2279. $hs.tuneCurrentTime($hs.skipStep);
  2280. return TERMINATE;
  2281. break;
  2282. // 方向鍵左←:後退3秒
  2283. case 'ArrowLeft':
  2284. $hs.tuneCurrentTime(-$hs.skipStep);
  2285. return TERMINATE;
  2286. break;
  2287. // 方向鍵上↑:音量升高 1%
  2288. case 'ArrowUp':
  2289. if ((player.muted && player.volume === 0) && player._volume > 0) {
  2290.  
  2291. player.muted = false;
  2292. player.volume = player._volume;
  2293. } else if (player.muted && (player.volume > 0 || !player._volume)) {
  2294. player.muted = false;
  2295. }
  2296. $hs.tuneVolume(0.01);
  2297. return TERMINATE;
  2298. break;
  2299. // 方向鍵下↓:音量降低 1%
  2300. case 'ArrowDown':
  2301.  
  2302. if ((player.muted && player.volume === 0) && player._volume > 0) {
  2303.  
  2304. player.muted = false;
  2305. player.volume = player._volume;
  2306. } else if (player.muted && (player.volume > 0 || !player._volume)) {
  2307. player.muted = false;
  2308. }
  2309. $hs.tuneVolume(-0.01);
  2310. return TERMINATE;
  2311. break;
  2312. // 空格鍵:暫停/播放
  2313. case 'Space':
  2314. $hs.switchPlayStatus();
  2315. return TERMINATE;
  2316. break;
  2317. // 按鍵X:減速播放 -0.1
  2318. case 'KeyX':
  2319. if (player.playbackRate > 0) {
  2320. $hs.tips(false);
  2321. $hs.setPlaybackRate(player.playbackRate - 0.1);
  2322. return TERMINATE
  2323. }
  2324. break;
  2325. // 按鍵C:加速播放 +0.1
  2326. case 'KeyC':
  2327. if (player.playbackRate < 16) {
  2328. $hs.tips(false);
  2329. $hs.setPlaybackRate(player.playbackRate + 0.1);
  2330. return TERMINATE
  2331. }
  2332.  
  2333. break;
  2334. // 按鍵Z:正常速度播放
  2335. case 'KeyZ':
  2336. $hs.tips(false);
  2337. oldPBR = player.playbackRate;
  2338. if (oldPBR != 1.0) {
  2339. player._playbackRate_z = oldPBR;
  2340. newPBR = 1.0;
  2341. } else if (player._playbackRate_z != 1.0) {
  2342. newPBR = player._playbackRate_z || 1.0;
  2343. player._playbackRate_z = 1.0;
  2344. } else {
  2345. newPBR = 1.0
  2346. player._playbackRate_z = 1.0;
  2347. }
  2348. $hs.setPlaybackRate(newPBR, 1)
  2349. return TERMINATE
  2350. break;
  2351. // 按鍵F:下一幀
  2352. case 'KeyF':
  2353. if (window.location.hostname === 'www.netflix.com') return /* netflix 的F鍵是FULLSCREEN的意思 */
  2354. $hs.tips(false);
  2355. if (!player.paused) player.pause()
  2356. player.currentTime += +(1 / playerConf.fps)
  2357. $hs.tips('Jump to: Next frame')
  2358. return TERMINATE
  2359. break;
  2360. // 按鍵D:上一幀
  2361. case 'KeyD':
  2362. $hs.tips(false);
  2363. if (!player.paused) player.pause()
  2364. player.currentTime -= +(1 / playerConf.fps)
  2365. $hs.tips('Jump to: Previous frame')
  2366. return TERMINATE
  2367. break;
  2368. // 按鍵E:亮度增加%
  2369. case 'KeyE':
  2370. $hs.tips(false);
  2371. nv = playerConf.setFilter('brightness', (v) => v + 0.1);
  2372. $hs.tips('Brightness: ' + dround(nv * 100) + '%')
  2373. return TERMINATE
  2374. break;
  2375. // 按鍵W:亮度減少%
  2376. case 'KeyW':
  2377. $hs.tips(false);
  2378. nv = playerConf.setFilter('brightness', (v) => v > 0.1 ? v - 0.1 : 0);
  2379. $hs.tips('Brightness: ' + dround(nv * 100) + '%')
  2380. return TERMINATE
  2381. break;
  2382. // 按鍵T:對比度增加%
  2383. case 'KeyT':
  2384. $hs.tips(false);
  2385. nv = playerConf.setFilter('contrast', (v) => v + 0.1);
  2386. $hs.tips('Contrast: ' + dround(nv * 100) + '%')
  2387. return TERMINATE
  2388. break;
  2389. // 按鍵R:對比度減少%
  2390. case 'KeyR':
  2391. $hs.tips(false);
  2392. nv = playerConf.setFilter('contrast', (v) => v > 0.1 ? v - 0.1 : 0);
  2393. $hs.tips('Contrast: ' + dround(nv * 100) + '%')
  2394. return TERMINATE
  2395. break;
  2396. // 按鍵U:飽和度增加%
  2397. case 'KeyU':
  2398. $hs.tips(false);
  2399. nv = playerConf.setFilter('saturate', (v) => v + 0.1);
  2400. $hs.tips('Saturate: ' + dround(nv * 100) + '%')
  2401. return TERMINATE
  2402. break;
  2403. // 按鍵Y:飽和度減少%
  2404. case 'KeyY':
  2405. $hs.tips(false);
  2406. nv = playerConf.setFilter('saturate', (v) => v > 0.1 ? v - 0.1 : 0);
  2407. $hs.tips('Saturate: ' + dround(nv * 100) + '%')
  2408. return TERMINATE
  2409. break;
  2410. // 按鍵O:色相增加 1 度
  2411. case 'KeyO':
  2412. $hs.tips(false);
  2413. nv = playerConf.setFilter('hue-rotate', (v) => v + 1);
  2414. $hs.tips('Hue: ' + nv + ' deg')
  2415. return TERMINATE
  2416. break;
  2417. // 按鍵I:色相減少 1 度
  2418. case 'KeyI':
  2419. $hs.tips(false);
  2420. nv = playerConf.setFilter('hue-rotate', (v) => v - 1);
  2421. $hs.tips('Hue: ' + nv + ' deg')
  2422. return TERMINATE
  2423. break;
  2424. // 按鍵K:模糊增加 0.1 px
  2425. case 'KeyK':
  2426. $hs.tips(false);
  2427. nv = playerConf.setFilter('blur', (v) => v + 0.1);
  2428. $hs.tips('Blur: ' + nv + ' px')
  2429. return TERMINATE
  2430. break;
  2431. // 按鍵J:模糊減少 0.1 px
  2432. case 'KeyJ':
  2433. $hs.tips(false);
  2434. nv = playerConf.setFilter('blur', (v) => v > 0.1 ? v - 0.1 : 0);
  2435. $hs.tips('Blur: ' + nv + ' px')
  2436. return TERMINATE
  2437. break;
  2438. // 按鍵Q:圖像復位
  2439. case 'KeyQ':
  2440. $hs.tips(false);
  2441. playerConf.filterReset();
  2442. $hs.tips('Video Filter Reset')
  2443. return TERMINATE
  2444. break;
  2445. // 按鍵S:畫面旋轉 90 度
  2446. case 'KeyS':
  2447. $hs.tips(false);
  2448. playerConf.rotate += 90
  2449. if (playerConf.rotate % 360 === 0) playerConf.rotate = 0;
  2450. if(!playerConf.videoHeight||!playerConf.videoWidth){
  2451. playerConf.videoWidth = playerConf.domElement.videoWidth;
  2452. playerConf.videoHeight = playerConf.domElement.videoHeight;
  2453. }
  2454. if (playerConf.videoWidth>0 && playerConf.videoHeight>0) {
  2455.  
  2456.  
  2457. if ((playerConf.rotate % 180) == 90) {
  2458. playerConf.mFactor = playerConf.videoHeight / playerConf.videoWidth;
  2459. } else {
  2460. playerConf.mFactor = 1.0;
  2461. }
  2462.  
  2463.  
  2464. playerConf.cssTransform();
  2465.  
  2466. $hs.tips('Rotation:' + playerConf.rotate + ' deg')
  2467.  
  2468. }
  2469.  
  2470. return TERMINATE
  2471. break;
  2472. // 按鍵迴車,進入FULLSCREEN
  2473. case 'Enter':
  2474. //t.callFullScreenBtn();
  2475. break;
  2476. case 'KeyN':
  2477. $hs.pictureInPicture(player);
  2478. return TERMINATE
  2479. break;
  2480. case 'KeyM':
  2481. //console.log('m!', player.volume,player._volume)
  2482.  
  2483. if (player.volume >= 0) {
  2484.  
  2485. if (!player.volume || player.muted) {
  2486.  
  2487. let newVol = player.volume || player._volume || 0.5;
  2488. if (player.volume !== newVol) {
  2489. player.volume = newVol;
  2490. }
  2491. player.muted = false;
  2492. $hs.tips(false);
  2493. $hs.tips('Mute: Off', undefined);
  2494.  
  2495. } else {
  2496.  
  2497. player._volume = player.volume;
  2498. player._volume_p = player.volume;
  2499. //player.volume = 0;
  2500. player.muted = true;
  2501. $hs.tips(false);
  2502. $hs.tips('Mute: On', undefined);
  2503.  
  2504. }
  2505.  
  2506. }
  2507.  
  2508. return TERMINATE
  2509. break;
  2510. default:
  2511. // 按1-4設置播放速度 49-52;97-100
  2512. let numKey = +(event.key)
  2513.  
  2514. if (numKey >= 1 && numKey <= 4) {
  2515. $hs.tips(false);
  2516. $hs.setPlaybackRate(numKey, 1)
  2517. return TERMINATE
  2518. }
  2519. }
  2520.  
  2521. }
  2522. },
  2523.  
  2524. handlerPlayerMouseMove: function(e) {
  2525. let player = $hs.player();
  2526. let rootNode = getRoot(player);
  2527.  
  2528. if (rootNode.pointerLockElement != player) {
  2529. player.removeEventListener('mousemove', $hs.handlerPlayerMouseMove)
  2530. return;
  2531. }
  2532.  
  2533. let movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0,
  2534. movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
  2535.  
  2536. player.__xyOffset.x += movementX
  2537. player.__xyOffset.y += movementY
  2538. let ld = Math.sqrt(screen.width * screen.width + screen.height * screen.height) * .1
  2539. let md = Math.sqrt(player.__xyOffset.x * player.__xyOffset.x + player.__xyOffset.y * player.__xyOffset.y);
  2540. if (md > ld) $hs.playerActionLeave();
  2541.  
  2542. },
  2543.  
  2544. playerActionEnter: function() {
  2545. let player = $hs.player();
  2546.  
  2547. if (player) {
  2548. player.__requestPointerLock__();
  2549. player.__xyOffset = {
  2550. x: 0,
  2551. y: 0
  2552. };
  2553. player.addEventListener('mousemove', $hs.handlerPlayerMouseMove)
  2554. }
  2555. },
  2556.  
  2557. playerActionLeave: function() {
  2558. let player = $hs.player();
  2559. if (player) player.removeEventListener('mousemove', $hs.handlerPlayerMouseMove)
  2560. document.__exitPointerLock__();
  2561. },
  2562.  
  2563. /* 按鍵響應方法 */
  2564. handlerRootKeyDownEvent: function(event) {
  2565. if ($hs.intVideoInitCount > 0) {} else {
  2566. return;
  2567. }
  2568. // DOM Standard - either .key or .code
  2569. // Here we adopt .code (physical layout)
  2570.  
  2571. let pCode = event.code;
  2572. if (typeof pCode != 'string') return;
  2573.  
  2574. let player = $hs.player()
  2575.  
  2576. if (!player) return; // no video tag
  2577.  
  2578. let rootNode = getRoot(player);
  2579.  
  2580. let keyAsm = (event.shiftKey ? SHIFT : 0) | ((event.ctrlKey || event.metaKey) ? CTRL : 0) | (event.altKey ? ALT : 0);
  2581.  
  2582. if (!keyAsm && pCode == 'Escape' && (document.fullscreenElement || rootNode.pointerLockElement)) {
  2583. setTimeout(() => {
  2584. if (document.fullscreenElement) {
  2585. document.exitFullscreen();
  2586. } else if (document.pointerLockElement) {
  2587. $hs.playerActionLeave();
  2588. }
  2589. }, 700);
  2590. return;
  2591. }
  2592.  
  2593. if (isInOperation(event.target)) return;
  2594.  
  2595. //console.log('K01')
  2596.  
  2597. /* 切換插件的可用狀態 */
  2598. // Shift-`
  2599. if (keyAsm == SHIFT && pCode == 'Backquote') {
  2600. $hs.enable = !$hs.enable;
  2601. $hs.tips(false);
  2602. if ($hs.enable) {
  2603. $hs.tips('啟用h5Player插件')
  2604. } else {
  2605. $hs.tips('禁用h5Player插件')
  2606. }
  2607. // 阻止事件冒泡
  2608. event.stopPropagation()
  2609. event.preventDefault()
  2610. return false
  2611. }
  2612. if (!$hs.enable) {
  2613. consoleLog('h5Player 已禁用~')
  2614. return false
  2615. }
  2616.  
  2617. /* 非全局模式下,不聚焦則不執行快捷鍵的操作 */
  2618.  
  2619. if (!keyAsm && pCode == 'Enter' && !isInOperation()) { //not NumberpadEnter
  2620. if (!rootNode.pointerLockElement && !document.fullscreenElement) {
  2621. if (rootNode.pointerLockElement != player) {
  2622. $hs.playerActionEnter();
  2623.  
  2624. // 阻止事件冒泡
  2625. event.stopPropagation()
  2626. event.preventDefault()
  2627. return false
  2628. }
  2629. } else if (rootNode.pointerLockElement && !document.fullscreenElement) {
  2630. $hs.playerActionLeave();
  2631.  
  2632. // 阻止事件冒泡
  2633. event.stopPropagation()
  2634. event.preventDefault()
  2635. return false
  2636. } else if (document.fullscreenElement) {
  2637. document.exitFullscreen();
  2638.  
  2639. // 阻止事件冒泡
  2640. event.stopPropagation()
  2641. event.preventDefault()
  2642. return false
  2643. }
  2644. }
  2645.  
  2646. let hv = (elm) => (elm && (elm == player || elm.contains(player)) ? elm : null);
  2647.  
  2648. let _checkingPass;
  2649.  
  2650. let plm = null;
  2651. if (rootNode.activeElement && !rootNode.pointerLockElement && !document.fullscreenElement) {
  2652. // the active element may or may not contains the player
  2653. // but the player box (player->parent->parent->...) shall contains the active element (and the player)
  2654. // so if the active element is inside the layoutbox, okay!
  2655. // ps. layoutbox may be much larger than the activeelement, then it is not overlapping case.
  2656.  
  2657. plm = rootNode.activeElement
  2658.  
  2659. //console.log('activeElement', plm)
  2660. _checkingPass = $hs.isInActiveMode(rootNode.activeElement, player);
  2661. } else {
  2662. plm = hv(rootNode.pointerLockElement) || hv(document.fullscreenElement)
  2663. _checkingPass = !!plm
  2664. }
  2665.  
  2666.  
  2667. if (_checkingPass) {
  2668.  
  2669. if (isInOperation()) return;
  2670.  
  2671.  
  2672. let res = $hs.playerTrigger(player, event)
  2673. if (res == TERMINATE) {
  2674. event.stopPropagation()
  2675. event.preventDefault()
  2676. return false
  2677. }
  2678.  
  2679. }
  2680. },
  2681. /* 設置播放進度 */
  2682. setPlayProgress: function(player, curTime) {
  2683. if (!player) return
  2684. if (!curTime || Number.isNaN(curTime)) return
  2685. player.currentTime = curTime
  2686. if (curTime > 3) {
  2687. $hs.tips(false);
  2688. $hs.tips(`Playback Jumps to ${$hs.toolFormatCT(curTime)}`)
  2689. if (player.paused) player.play();
  2690. }
  2691. }
  2692. }
  2693.  
  2694. function makeFilter(arr, k) {
  2695. let res = ""
  2696. for (const e of arr) {
  2697. for (const d of e) {
  2698. res += " " + (1.0 * d * k).toFixed(9)
  2699. }
  2700. }
  2701. return res.trim()
  2702. }
  2703.  
  2704. function _add_filter(rootElm) {
  2705. let rootView = null;
  2706. if (rootElm && rootElm.nodeType > 0) {
  2707. while (rootElm.parentNode && rootElm.parentNode.nodeType === 1) rootElm = rootElm.parentNode;
  2708. rootView = rootElm.querySelector('body') || rootElm;
  2709. } else {
  2710. return;
  2711. }
  2712.  
  2713. if (rootView && rootView.querySelector && !rootView.querySelector('#_h5player_section_')) {
  2714.  
  2715. let svgFilterElm = document.createElement('section')
  2716. svgFilterElm.style.position = 'fixed';
  2717. svgFilterElm.style.left = '-999px';
  2718. svgFilterElm.style.width = '1px';
  2719. svgFilterElm.style.top = '-999px';
  2720. svgFilterElm.style.height = '1px';
  2721. svgFilterElm.id = '_h5player_section_'
  2722. let svgXML = `
  2723. <svg id='_h5p_image' version="1.1" xmlns="http://www.w3.org/2000/svg">
  2724. <defs>
  2725. <filter id="_h5p_sharpen1">
  2726. <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" order="3" kernelMatrix="` + `
  2727. -0.3 -0.3 -0.3
  2728. -0.3 3.4 -0.3
  2729. -0.3 -0.3 -0.3`.replace(/[\n\r]+/g, ' ').trim() + `" preserveAlpha="true"/>
  2730. </filter>
  2731. <filter id="_h5p_unsharpen1">
  2732. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="5" kernelMatrix="` +
  2733. makeFilter([
  2734. [1, 4, 6, 4, 1],
  2735. [4, 16, 24, 16, 4],
  2736. [6, 24, -476, 24, 6],
  2737. [4, 16, 24, 16, 4],
  2738. [1, 4, 6, 4, 1]
  2739. ], -1 / 256) + `" preserveAlpha="false"/>
  2740. </filter>
  2741. <filter id="_h5p_unsharpen3_05">
  2742. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="3" kernelMatrix="` +
  2743. makeFilter(
  2744. [
  2745. [0.025, 0.05, 0.025],
  2746. [0.05, -1.1, 0.05],
  2747. [0.025, 0.05, 0.025]
  2748. ], -1 / .8) + `" preserveAlpha="false"/>
  2749. </filter>
  2750. <filter id="_h5p_unsharpen3_10">
  2751. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="3" kernelMatrix="` +
  2752. makeFilter(
  2753. [
  2754. [0.05, 0.1, 0.05],
  2755. [0.1, -1.4, 0.1],
  2756. [0.05, 0.1, 0.05]
  2757. ], -1 / .8) + `" preserveAlpha="false"/>
  2758. </filter>
  2759. <filter id="_h5p_unsharpen5_05">
  2760. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="5" kernelMatrix="` +
  2761. makeFilter(
  2762. [
  2763. [0.025, 0.1, 0.15, 0.1, 0.025],
  2764. [0.1, 0.4, 0.6, 0.4, 0.1],
  2765. [0.15, 0.6, -18.3, 0.6, 0.15],
  2766. [0.1, 0.4, 0.6, 0.4, 0.1],
  2767. [0.025, 0.1, 0.15, 0.1, 0.025]
  2768. ], -1 / 12.8) + `" preserveAlpha="false"/>
  2769. </filter>
  2770. <filter id="_h5p_unsharpen5_10">
  2771. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="5" kernelMatrix="` +
  2772. makeFilter(
  2773. [
  2774. [0.05, 0.2, 0.3, 0.2, 0.05],
  2775. [0.2, 0.8, 1.2, 0.8, 0.2],
  2776. [0.3, 1.2, -23.8, 1.2, 0.3],
  2777. [0.2, 0.8, 1.2, 0.8, 0.2],
  2778. [0.05, 0.2, 0.3, 0.2, 0.05]
  2779. ], -1 / 12.8) + `" preserveAlpha="false"/>
  2780. </filter>
  2781. <filter id="_h5p_unsharpen9_05">
  2782. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="9" kernelMatrix="` +
  2783. makeFilter(
  2784. [
  2785. [0.025, 0.2, 0.7, 1.4, 1.75, 1.4, 0.7, 0.2, 0.025],
  2786. [0.2, 1.6, 5.6, 11.2, 14, 11.2, 5.6, 1.6, 0.2],
  2787. [0.7, 5.6, 19.6, 39.2, 49, 39.2, 19.6, 5.6, 0.7],
  2788. [1.4, 11.2, 39.2, 78.4, 98, 78.4, 39.2, 11.2, 1.4],
  2789. [1.75, 14, 49, 98, -4792.7, 98, 49, 14, 1.75],
  2790. [1.4, 11.2, 39.2, 78.4, 98, 78.4, 39.2, 11.2, 1.4],
  2791. [0.7, 5.6, 19.6, 39.2, 49, 39.2, 19.6, 5.6, 0.7],
  2792. [0.2, 1.6, 5.6, 11.2, 14, 11.2, 5.6, 1.6, 0.2],
  2793. [0.025, 0.2, 0.7, 1.4, 1.75, 1.4, 0.7, 0.2, 0.025]
  2794. ], -1 / 3276.8) + `" preserveAlpha="false"/>
  2795. </filter>
  2796. <filter id="_h5p_unsharpen9_10">
  2797. <feConvolveMatrix style="color-interpolation-filters:sRGB;color-interpolation: sRGB;" order="9" kernelMatrix="` +
  2798. makeFilter(
  2799. [
  2800. [0.05, 0.4, 1.4, 2.8, 3.5, 2.8, 1.4, 0.4, 0.05],
  2801. [0.4, 3.2, 11.2, 22.4, 28, 22.4, 11.2, 3.2, 0.4],
  2802. [1.4, 11.2, 39.2, 78.4, 98, 78.4, 39.2, 11.2, 1.4],
  2803. [2.8, 22.4, 78.4, 156.8, 196, 156.8, 78.4, 22.4, 2.8],
  2804. [3.5, 28, 98, 196, -6308.6, 196, 98, 28, 3.5],
  2805. [2.8, 22.4, 78.4, 156.8, 196, 156.8, 78.4, 22.4, 2.8],
  2806. [1.4, 11.2, 39.2, 78.4, 98, 78.4, 39.2, 11.2, 1.4],
  2807. [0.4, 3.2, 11.2, 22.4, 28, 22.4, 11.2, 3.2, 0.4],
  2808. [0.05, 0.4, 1.4, 2.8, 3.5, 2.8, 1.4, 0.4, 0.05]
  2809. ], -1 / 3276.8) + `" preserveAlpha="false"/>
  2810. </filter>
  2811. <filter id="_h5p_grey1">
  2812. <feColorMatrix values="0.3333 0.3333 0.3333 0 0
  2813. 0.3333 0.3333 0.3333 0 0
  2814. 0.3333 0.3333 0.3333 0 0
  2815. 0 0 0 1 0"/>
  2816. <feColorMatrix type="saturate" values="0" />
  2817. </filter>
  2818. </defs>
  2819. </svg>
  2820. `;
  2821.  
  2822. svgFilterElm.innerHTML = svgXML.replace(/[\r\n\s]+/g, ' ').trim();
  2823.  
  2824. rootView.appendChild(svgFilterElm);
  2825. }
  2826.  
  2827. }
  2828.  
  2829. /**
  2830. * 某些網頁用了attachShadow closed mode,需要open才能獲取video標籤,例如百度雲盤
  2831. * 解決參考:
  2832. * https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn#closed
  2833. * https://stackoverflow.com/questions/54954383/override-element-prototype-attachshadow-using-chrome-extension
  2834. */
  2835.  
  2836. const initForShadowRoot = async (shadowRoot) => {
  2837. try {
  2838. if (shadowRoot && shadowRoot.nodeType > 0 && 'querySelectorAll' in shadowRoot) {
  2839. $hs.bindDocEvents(shadowRoot);
  2840.  
  2841. captureVideoEvents(shadowRoot);
  2842. shadowRoots.push(shadowRoot)
  2843. }
  2844. } catch (e) {
  2845. console.log('h5Player: initForShadowRoot failed')
  2846. }
  2847. }
  2848.  
  2849. function hackAttachShadow() { // attachShadow - DOM Standard
  2850.  
  2851. let _prototype_ = window && window.HTMLElement ? window.HTMLElement.prototype : null;
  2852. if (_prototype_ && typeof _prototype_.attachShadow == 'function') {
  2853.  
  2854. let _attachShadow = _prototype_.attachShadow
  2855.  
  2856. hackAttachShadow = null
  2857. _prototype_.attachShadow = function() {
  2858. let arg = [...arguments];
  2859. if (arg[0] && arg[0].mode) arg[0].mode = 'open';
  2860. let shadowRoot = _attachShadow.apply(this, arg);
  2861. initForShadowRoot(shadowRoot);
  2862. return shadowRoot
  2863. };
  2864.  
  2865. _prototype_.attachShadow.toString = () => _attachShadow.toString();
  2866.  
  2867. }
  2868.  
  2869. }
  2870.  
  2871. function hackCreateShadowRoot() { // createShadowRoot - Deprecated
  2872.  
  2873. let _prototype_ = window && window.HTMLElement ? window.HTMLElement.prototype : null;
  2874. if (_prototype_ && typeof _prototype_.createShadowRoot == 'function') {
  2875.  
  2876. let _createShadowRoot = _prototype_.createShadowRoot;
  2877.  
  2878. hackCreateShadowRoot = null
  2879. _prototype_.createShadowRoot = function() {
  2880. const shadowRoot = _createShadowRoot.apply(this, arguments);
  2881. initForShadowRoot(shadowRoot);
  2882. return shadowRoot;
  2883. };
  2884. _prototype_.createShadowRoot.toString = () => _createShadowRoot.toString();
  2885.  
  2886. }
  2887. }
  2888.  
  2889. /* 事件偵聽hack */
  2890. function hackEventListener() {
  2891. if (!window.EventTarget) return;
  2892. const eventTargetPrototype = window.EventTarget.prototype;
  2893. let _addEventListener = eventTargetPrototype.addEventListener;
  2894. let _removeEventListener = eventTargetPrototype.removeEventListener;
  2895. if (typeof _addEventListener == 'function' && typeof _removeEventListener == 'function') {} else return;
  2896. hackEventListener = null;
  2897.  
  2898. class Listeners {
  2899.  
  2900. constructor(dom, type) {
  2901. this._dom = dom;
  2902. this._type = type;
  2903. this.listenersCount = 0;
  2904. this.hashList = {};
  2905. }
  2906. get baseFunc() {
  2907. if (this._dom && this._type) {
  2908. return this._dom['on' + this._type];
  2909. }
  2910. }
  2911. get funcCount() {
  2912. if (this._dom && this._type) {
  2913. return (typeof this.baseFunc == 'function') * 1 + (this.listenersCount || 0)
  2914. }
  2915. }
  2916.  
  2917.  
  2918. }
  2919.  
  2920.  
  2921.  
  2922. let hackedEvtCount = 0;
  2923.  
  2924.  
  2925. let watchList = ['click'];
  2926.  
  2927. eventTargetPrototype.addEventListener = function() {
  2928.  
  2929. let arg = arguments
  2930. let type = arg[0]
  2931. let listener = arg[1]
  2932.  
  2933. if (!this || !(this instanceof EventTarget) || typeof type != 'string' || typeof listener != 'function') {
  2934. return _addEventListener.apply(this, arguments)
  2935. //unknown bug?
  2936. }
  2937.  
  2938. if (watchList.indexOf(type) < 0) return _addEventListener.apply(this, arguments);
  2939.  
  2940.  
  2941. let res;
  2942. res = _addEventListener.apply(this, arg)
  2943.  
  2944.  
  2945. let boolCapture = (arg[2] && typeof arg[2] == 'object') ? (arg[2].capture === true) : (arg[2] === true)
  2946.  
  2947. this._listeners = this._listeners || {}
  2948. this._listeners[type] = this._listeners[type] || new Listeners(this, type)
  2949. let uid = 100000 + (++hackedEvtCount);
  2950. let listenerObj = {
  2951. listener,
  2952. options: arg[2],
  2953. uid: uid,
  2954. useCapture: boolCapture
  2955. }
  2956. this._listeners[type].hashList[uid + ''] = listenerObj;
  2957. this._listeners[type].listenersCount++;
  2958. return res;
  2959. }
  2960. // hack removeEventListener
  2961. eventTargetPrototype.removeEventListener = function() {
  2962.  
  2963. let arg = arguments
  2964. let type = arg[0]
  2965. let listener = arg[1]
  2966.  
  2967. if (!this || !(this instanceof EventTarget) || typeof type != 'string' || typeof listener != 'function') {
  2968. return _removeEventListener.apply(this, arguments)
  2969. //unknown bug?
  2970. }
  2971.  
  2972. if (watchList.indexOf(type) < 0) return _removeEventListener.apply(this, arguments);
  2973.  
  2974. let boolCapture = (arg[2] && typeof arg[2] == 'object') ? (arg[2].capture === true) : (arg[2] === true)
  2975.  
  2976. let defaultRemoval = true;
  2977. if (this._listeners && this._listeners[type] && this._listeners[type].hashList) {
  2978. let hashList = this._listeners[type].hashList
  2979. for (let k in hashList) {
  2980. if (hashList[k].listener === listener && hashList[k].useCapture == boolCapture) {
  2981. delete hashList[k];
  2982. this._listeners[type].listenersCount--;
  2983. break;
  2984. }
  2985. }
  2986. }
  2987. if (defaultRemoval) return _removeEventListener.apply(this, arg);
  2988. }
  2989. eventTargetPrototype.addEventListener.toString = () => _addEventListener.toString();
  2990. eventTargetPrototype.removeEventListener.toString = () => _removeEventListener.toString();
  2991.  
  2992.  
  2993. }
  2994. function captureVideoEvents(rootDoc){
  2995.  
  2996. var g=function(evt){
  2997.  
  2998. var domElement = evt.target || this || null
  2999. if(domElement && domElement.nodeType==1 && domElement.nodeName=="VIDEO"){
  3000. var video=domElement
  3001. if (!domElement.getAttribute('_h5ppid')) handlerVideoFound(video);
  3002. if(domElement.getAttribute('_h5ppid')){
  3003. switch(evt.type){
  3004. case 'loadedmetadata':
  3005. return $hs.handlerVideoLoadedMetaData.call(video, evt);
  3006. // case 'playing':
  3007. // return $hs.handlerVideoPlaying.call(video, evt);
  3008. // case 'pause':
  3009. // return $hs.handlerVideoPause.call(video, evt);
  3010. // case 'volumechange':
  3011. // return $hs.handlerVideoVolumeChange.call(video, evt);
  3012. }
  3013. }
  3014. }
  3015.  
  3016.  
  3017. }
  3018.  
  3019. // using capture phase
  3020. rootDoc.addEventListener('loadedmetadata',g,true);
  3021.  
  3022. }
  3023.  
  3024. function handlerVideoFound(video) {
  3025.  
  3026. if (!video) return;
  3027. if (video.getAttribute('_h5ppid')) return;
  3028. let alabel = video.getAttribute('aria-label')
  3029. if (alabel && typeof alabel == "string" && alabel.toUpperCase() == "GIF") return;
  3030.  
  3031.  
  3032. consoleLog('handlerVideoFound', video)
  3033.  
  3034. $hs.intVideoInitCount = ($hs.intVideoInitCount || 0) + 1;
  3035. let vpid = 'h5p-' + $hs.intVideoInitCount
  3036. consoleLog(' - HTML5 Video is detected -', `Number of Videos: ${$hs.intVideoInitCount}`)
  3037. if ($hs.intVideoInitCount === 1) $hs.fireGlobalInit();
  3038. video.setAttribute('_h5ppid', vpid)
  3039.  
  3040.  
  3041. playerConfs[vpid] = new PlayerConf();
  3042. playerConfs[vpid].domElement = video;
  3043. playerConfs[vpid].domActive = DOM_ACTIVE_FOUND;
  3044.  
  3045. let rootNode = getRoot(video);
  3046.  
  3047. if (rootNode.host) $hs.getPlayerBlockElement(video); // shadowing
  3048. let rootElm = rootNode.querySelector('head') || rootNode.querySelector('html') || document.documentElement //48763
  3049. _add_filter(rootElm) // either main document or shadow node
  3050.  
  3051.  
  3052.  
  3053. video.addEventListener('playing',$hs.handlerVideoPlaying,true);
  3054. video.addEventListener('pause',$hs.handlerVideoPause,true);
  3055. video.addEventListener('volumechange',$hs.handlerVideoVolumeChange,true);
  3056.  
  3057.  
  3058.  
  3059. }
  3060.  
  3061.  
  3062.  
  3063. hackAttachShadow()
  3064. hackCreateShadowRoot()
  3065. hackEventListener()
  3066.  
  3067.  
  3068. window.addEventListener('message', $hs.handlerWinMessage, false);
  3069. $hs.bindDocEvents(document);
  3070. captureVideoEvents(document);
  3071.  
  3072. let windowsLD = (function() {
  3073. let ls_res = [];
  3074. try {
  3075. ls_res = [!!window.localStorage, !!window.top.localStorage];
  3076. } catch (e) {}
  3077. try {
  3078. let winp = window;
  3079. let winc = 0;
  3080. while (winp !== window.top && winp && ++winc) winp = winp.parentNode;
  3081. ls_res.push(winc);
  3082. } catch (e) {}
  3083. return ls_res;
  3084. })();
  3085.  
  3086. consoleLogF('- h5Player Plugin Loaded -', ...windowsLD)
  3087.  
  3088. function isInCrossOriginFrame() {
  3089. let result = true;
  3090. try {
  3091. if (window.top.localStorage || window.top.location.href) result = false;
  3092. } catch (e) {}
  3093. return result
  3094. }
  3095.  
  3096. if (isInCrossOriginFrame()) consoleLog('cross origin frame detected');
  3097.  
  3098.  
  3099. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址