-
Notifications
You must be signed in to change notification settings - Fork 0
/
html5-video-enhancer.user.js
7110 lines (6254 loc) · 218 KB
/
html5-video-enhancer.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
// ==UserScript==
// @name HTML5视频播放器增强脚本
// @name:en HTML5 video player enhanced script
// @name:zh HTML5视频播放器增强脚本
// @name:zh-TW HTML5視頻播放器增強腳本
// @name:ja HTML5ビデオプレーヤーの拡張スクリプト
// @name:ko HTML5 비디오 플레이어 고급 스크립트
// @name:ru HTML5 видео плеер улучшенный скрипт
// @name:de HTML5 Video Player erweitertes Skript
// @namespace https://github.com/xxxily/h5player
// @homepage https://github.com/xxxily/h5player
// @version 3.6.3
// @updateURL https://raw.githubusercontent.com/0x7C2f/UserScripts/main/html5-video-enhancer.user.js
// @downloadURL https://raw.githubusercontent.com/0x7C2f/UserScripts/main/html5-video-enhancer.user.js
// @description 视频增强脚本,支持所有H5视频网站,例如:B站、抖音、腾讯视频、优酷、爱奇艺、西瓜视频、油管(YouTube)、微博视频、知乎视频、搜狐视频、网易公开课、百度网盘、阿里云盘、ted、instagram、twitter等。全程快捷键控制,支持:倍速播放/加速播放、视频画面截图、画中画、网页全屏、调节亮度、饱和度、对比度、自定义配置功能增强等功能,为你提供愉悦的在线视频播放体验。还有视频广告快进、在线教程/教育视频倍速快学、视频文件下载等能力
// @description:en Video enhancement script, supports all H5 video websites, such as: Bilibili, Douyin, Tencent Video, Youku, iQiyi, Xigua Video, YouTube, Weibo Video, Zhihu Video, Sohu Video, NetEase Open Course, Baidu network disk, Alibaba cloud disk, ted, instagram, twitter, etc. Full shortcut key control, support: double-speed playback/accelerated playback, video screenshots, picture-in-picture, full-screen web pages, adjusting brightness, saturation, contrast
// @description:zh 视频增强脚本,支持所有H5视频网站,例如:B站、抖音、腾讯视频、优酷、爱奇艺、西瓜视频、油管(YouTube)、微博视频、知乎视频、搜狐视频、网易公开课、百度网盘、阿里云盘、ted、instagram、twitter等。全程快捷键控制,支持:倍速播放/加速播放、视频画面截图、画中画、网页全屏、调节亮度、饱和度、对比度、自定义配置功能增强等功能,为你提供愉悦的在线视频播放体验。还有视频广告快进、在线教程/教育视频倍速快学、视频文件下载等能力
// @description:zh-TW 視頻增強腳本,支持所有H5視頻網站,例如:B站、抖音、騰訊視頻、優酷、愛奇藝、西瓜視頻、油管(YouTube)、微博視頻、知乎視頻、搜狐視頻、網易公開課、百度網盤、阿里雲盤、ted、instagram、twitter等。全程快捷鍵控制,支持:倍速播放/加速播放、視頻畫面截圖、畫中畫、網頁全屏、調節亮度、飽和度、對比度、自定義配置功能增強等功能,為你提供愉悅的在線視頻播放體驗。還有視頻廣告快進、在線教程/教育視頻倍速快學、視頻文件下載等能力
// @description:ja ビデオ拡張スクリプトは、Bilibili、Douyin、Tencent Video、Youku、iQiyi、Xigua Video、YouTube、Weibo Video、Zhihu Video、Sohu Video、NetEase Open Course、Baidu ネットワーク ディスク、Alibaba クラウド ディスクなど、すべての H5 ビデオ Web サイトをサポートします。テッド、インスタグラム、ツイッターなど 完全なショートカット キー コントロール、サポート: 倍速再生/加速再生、ビデオ スクリーンショット、ピクチャー イン ピクチャー、フルスクリーン Web ページ、明るさ、彩度、コントラストの調整、カスタム構成の強化、その他の機能により、快適なオンラインを提供します。ビデオ再生体験。 ビデオ広告、オンライン チュートリアル/教育ビデオなどを早送りする機能もあります。
// @description:ko 비디오 향상 스크립트는 Bilibili, Douyin, Tencent Video, Youku, iQiyi, Xigua Video, YouTube, Weibo Video, Zhihu Video, Sohu Video, NetEase Open Course, Baidu 네트워크 디스크, Alibaba 클라우드 디스크와 같은 모든 H5 비디오 웹사이트를 지원합니다. 테드, 인스타그램, 트위터 등 전체 바로 1가기 키 제어, 지원: 배속 재생/가속 재생, 비디오 스크린샷, PIP(Picture-in-Picture), 전체 화면 웹 페이지, 밝기, 채도, 대비, 사용자 정의 구성 향상 및 기타 기능 조정, 쾌적한 온라인 환경 제공 비디오 재생 경험. 비디오 광고, 온라인 자습서/교육 비디오 등을 빨리 감기하는 기능도 있습니다.
// @description:ru Сценарий улучшения видео поддерживает все видео-сайты H5, такие как: Bilibili, Douyin, Tencent Video, Youku, iQiyi, Xigua Video, YouTube, Weibo Video, Zhihu Video, Sohu Video, NetEase Open Course, сетевой диск Baidu, облачный диск Alibaba, Тед, инстаграм, твиттер и т.д. Полное управление клавишами быстрого доступа, поддержка: воспроизведение с удвоенной скоростью/ускоренное воспроизведение, скриншоты видео, картинка в картинке, полноэкранные веб-страницы
// @description:de Videoverbesserungsskript, unterstützt alle H5-Videowebsites, wie z. ted, instagram, twitter usw. Vollständige Tastenkombinationssteuerung, Unterstützung: Wiedergabe mit doppelter Geschwindigkeit/beschleunigte Wiedergabe, Video-Screenshots, Bild-in-Bild, Vollbild-Webseiten, Anpassung von Helligkeit, Sättigung, Kontrast, benutzerdefinierte Konfigurationsverbesserungen und andere Funktionen
// @author ankvps
// @icon https://cdn.jsdelivr.net/gh/xxxily/h5player@master/logo.png
// @match *://*/*
// @grant unsafeWindow
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant GM_listValues
// @grant GM_addValueChangeListener
// @grant GM_removeValueChangeListener
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_getTab
// @grant GM_saveTab
// @grant GM_getTabs
// @grant GM_openInTab
// @grant GM_download
// @grant GM_xmlhttpRequest
// @grant GM_setClipboard
// @run-at document-start
// @require https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.js
// @connect 127.0.0.1
// @license GPL
// ==/UserScript==
(function (w) { if (w) { w.name = 'h5player'; } })();
/**
* 元素监听器
* @param selector -必选
* @param fn -必选,元素存在时的回调
* @param shadowRoot -可选 指定监听某个shadowRoot下面的DOM元素
* 参考:https://javascript.ruanyifeng.com/dom/mutationobserver.html
*/
function ready (selector, fn, shadowRoot) {
const win = window;
const docRoot = shadowRoot || win.document.documentElement;
if (!docRoot) return false
const MutationObserver = win.MutationObserver || win.WebKitMutationObserver;
const listeners = docRoot._MutationListeners || [];
function $ready (selector, fn) {
// 储存选择器和回调函数
listeners.push({
selector: selector,
fn: fn
});
/* 增加监听对象 */
if (!docRoot._MutationListeners || !docRoot._MutationObserver) {
docRoot._MutationListeners = listeners;
docRoot._MutationObserver = new MutationObserver(() => {
for (let i = 0; i < docRoot._MutationListeners.length; i++) {
const item = docRoot._MutationListeners[i];
check(item.selector, item.fn);
}
});
docRoot._MutationObserver.observe(docRoot, {
childList: true,
subtree: true
});
}
// 检查节点是否已经在DOM中
check(selector, fn);
}
function check (selector, fn) {
const elements = docRoot.querySelectorAll(selector);
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
element._MutationReadyList_ = element._MutationReadyList_ || [];
if (!element._MutationReadyList_.includes(fn)) {
element._MutationReadyList_.push(fn);
fn.call(element, element);
}
}
}
const selectorArr = Array.isArray(selector) ? selector : [selector];
selectorArr.forEach(selector => $ready(selector, fn));
}
/**
* 某些网页用了attachShadow closed mode,需要open才能获取video标签,例如百度云盘
* 解决参考:
* https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn#closed
* https://stackoverflow.com/questions/54954383/override-element-prototype-attachshadow-using-chrome-extension
*/
function hackAttachShadow () {
if (window._hasHackAttachShadow_) return
try {
window._shadowDomList_ = [];
window.Element.prototype._attachShadow = window.Element.prototype.attachShadow;
window.Element.prototype.attachShadow = function () {
const arg = arguments;
if (arg[0] && arg[0].mode) {
// 强制使用 open mode
arg[0].mode = 'open';
}
const shadowRoot = this._attachShadow.apply(this, arg);
// 存一份shadowDomList
window._shadowDomList_.push(shadowRoot);
/* 让shadowRoot里面的元素有机会访问shadowHost */
shadowRoot._shadowHost = this;
// 在document下面添加 addShadowRoot 自定义事件
const shadowEvent = new window.CustomEvent('addShadowRoot', {
shadowRoot,
detail: {
shadowRoot,
message: 'addShadowRoot',
time: new Date()
},
bubbles: true,
cancelable: true
});
document.dispatchEvent(shadowEvent);
return shadowRoot
};
window._hasHackAttachShadow_ = true;
} catch (e) {
console.error('hackAttachShadow error by h5player plug-in', e);
}
}
/*!
* @name original.js
* @description 存储部分重要的原生函数,防止被外部污染,此逻辑应尽可能前置,否则存储的将是污染后的函数
* @version 0.0.1
* @author xxxily
* @date 2022/10/16 10:32
* @github https://github.com/xxxily
*/
const original = {
// 防止defineProperty和defineProperties被AOP脚本重写
Object: {
defineProperty: Object.defineProperty,
defineProperties: Object.defineProperties
},
// 防止此类玩法:https://juejin.cn/post/6865910564817010702
Proxy,
Map,
map: {
clear: Map.prototype.clear,
set: Map.prototype.set,
has: Map.prototype.has,
get: Map.prototype.get
},
console: {
log: console.log,
info: console.info,
error: console.error,
warn: console.warn,
table: console.table
},
ShadowRoot,
HTMLMediaElement,
CustomEvent,
// appendChild: Node.prototype.appendChild,
JSON: {
parse: JSON.parse,
stringify: JSON.stringify
},
alert,
confirm,
prompt
};
/**
* 媒体标签检测,可以检测出viode、audio、以及其它标签名经过改造后的媒体Element
* @param {Function} handler -必选 检出后要执行的回调函数
* @returns mediaElementList
*/
const mediaCore = (function () {
let hasMediaCoreInit = false;
let hasProxyHTMLMediaElement = false;
let originDescriptors = {};
const originMethods = {};
const mediaElementList = [];
const mediaElementHandler = [];
const mediaMap = new original.Map();
const firstUpperCase = str => str.replace(/^\S/, s => s.toUpperCase());
function isHTMLMediaElement (el) {
return el instanceof original.HTMLMediaElement
}
/**
* 根据HTMLMediaElement的实例对象创建增强控制的相关API函数,从而实现锁定播放倍速,锁定暂停和播放等增强功能
* @param {*} mediaElement - 必选,HTMLMediaElement的具体实例,例如网页上的video标签或new Audio()等
* @returns mediaPlusApi
*/
function createMediaPlusApi (mediaElement) {
if (!isHTMLMediaElement(mediaElement)) { return false }
let mediaPlusApi = original.map.get.call(mediaMap, mediaElement);
if (mediaPlusApi) {
return mediaPlusApi
}
/* 创建MediaPlusApi对象 */
mediaPlusApi = {};
const mediaPlusBaseApi = {
/**
* 创建锁,阻止外部逻辑操作mediaElement相关的属性或函数
* 这里的锁逻辑只是数据状态标注和切换,具体的锁功能需在
* proxyPrototypeMethod和hijackPrototypeProperty里实现
*/
lock (keyName, duration) {
const infoKey = `__${keyName}_info__`;
mediaPlusApi[infoKey] = mediaPlusApi[infoKey] || {};
mediaPlusApi[infoKey].lock = true;
/* 解锁时间信息 */
duration = Number(duration);
if (!Number.isNaN(duration) && duration > 0) {
mediaPlusApi[infoKey].unLockTime = Date.now() + duration;
}
// original.console.log(`[mediaPlusApi][lock][${keyName}] ${duration}`)
},
unLock (keyName) {
const infoKey = `__${keyName}_info__`;
mediaPlusApi[infoKey] = mediaPlusApi[infoKey] || {};
mediaPlusApi[infoKey].lock = false;
mediaPlusApi[infoKey].unLockTime = Date.now() - 100;
// original.console.log(`[mediaPlusApi][unLock][${keyName}]`)
},
isLock (keyName) {
const info = mediaPlusApi[`__${keyName}_info__`] || {};
if (info.unLockTime) {
/* 延时锁根据当前时间计算是否还处于锁状态 */
return Date.now() < info.unLockTime
} else {
return info.lock || false
}
},
/* 注意:调用此处的get和set和apply不受锁的限制 */
get (keyName) {
if (originDescriptors[keyName] && originDescriptors[keyName].get && !originMethods[keyName]) {
return originDescriptors[keyName].get.apply(mediaElement)
}
},
set (keyName, val) {
if (originDescriptors[keyName] && originDescriptors[keyName].set && !originMethods[keyName] && typeof val !== 'undefined') {
// original.console.log(`[mediaPlusApi][${keyName}] 执行原生set操作`)
return originDescriptors[keyName].set.apply(mediaElement, [val])
}
},
apply (keyName) {
if (originMethods[keyName] instanceof Function) {
const args = Array.from(arguments);
args.shift();
// original.console.log(`[mediaPlusApi][${keyName}] 执行原生apply操作`)
return originMethods[keyName].apply(mediaElement, args)
}
}
};
mediaPlusApi = { ...mediaPlusApi, ...mediaPlusBaseApi };
/**
* 扩展api列表。实现'playbackRate', 'volume', 'currentTime', 'play', 'pause'的纯api调用效果,具体可用API如下:
* mediaPlusApi.lockPlaybackRate()
* mediaPlusApi.unLockPlaybackRate()
* mediaPlusApi.isLockPlaybackRate()
* mediaPlusApi.getPlaybackRate()
* mediaPlusApi.setPlaybackRate(val)
*
* mediaPlusApi.lockVolume()
* mediaPlusApi.unLockVolume()
* mediaPlusApi.isLockVolume()
* mediaPlusApi.getVolume()
* mediaPlusApi.setVolume(val)
*
* mediaPlusApi.lockCurrentTime()
* mediaPlusApi.unLockCurrentTime()
* mediaPlusApi.isLockCurrentTime()
* mediaPlusApi.getCurrentTime()
* mediaPlusApi.setCurrentTime(val)
*
* mediaPlusApi.lockPlay()
* mediaPlusApi.unLockPlay()
* mediaPlusApi.isLockPlay()
* mediaPlusApi.applyPlay()
*
* mediaPlusApi.lockPause()
* mediaPlusApi.unLockPause()
* mediaPlusApi.isLockPause()
* mediaPlusApi.applyPause()
*/
const extApiKeys = ['playbackRate', 'volume', 'currentTime', 'play', 'pause'];
const baseApiKeys = Object.keys(mediaPlusBaseApi);
extApiKeys.forEach(key => {
baseApiKeys.forEach(baseKey => {
/* 当key对应的是函数时,不应该有get、set的api,而应该有apply的api */
if (originMethods[key] instanceof Function) {
if (baseKey === 'get' || baseKey === 'set') {
return true
}
} else if (baseKey === 'apply') {
return true
}
mediaPlusApi[`${baseKey}${firstUpperCase(key)}`] = function () {
return mediaPlusBaseApi[baseKey].apply(null, [key, ...arguments])
};
});
});
original.map.set.call(mediaMap, mediaElement, mediaPlusApi);
return mediaPlusApi
}
/* 检测到media对象的处理逻辑,依赖Proxy对media函数的代理 */
function mediaDetectHandler (ctx) {
if (isHTMLMediaElement(ctx) && !mediaElementList.includes(ctx)) {
// console.log(`[mediaDetectHandler]`, ctx)
mediaElementList.push(ctx);
createMediaPlusApi(ctx);
try {
mediaElementHandler.forEach(handler => {
(handler instanceof Function) && handler(ctx);
});
} catch (e) {}
}
}
/* 代理方法play和pause方法,确保能正确暂停和播放 */
function proxyPrototypeMethod (element, methodName) {
const originFunc = element && element.prototype[methodName];
if (!originFunc) return
element.prototype[methodName] = new original.Proxy(originFunc, {
apply (target, ctx, args) {
mediaDetectHandler(ctx);
// original.console.log(`[mediaElementMethodProxy] 执行代理后的${methodName}函数`)
/* 对播放暂停逻辑进行增强处理,例如允许通过mediaPlusApi进行锁定 */
if (['play', 'pause'].includes(methodName)) {
const mediaPlusApi = createMediaPlusApi(ctx);
if (mediaPlusApi && mediaPlusApi.isLock(methodName)) {
// original.console.log(`[mediaElementMethodProxy] ${methodName}已被锁定,无法执行相关操作`)
return
}
}
const result = target.apply(ctx, args);
// TODO 对函数执行结果进行观察判断
return result
}
});
// 不建议对HTMLMediaElement的原型链进行扩展,这样容易让网页检测到mediaCore增强逻辑的存在
// if (originMethods[methodName]) {
// element.prototype[`__${methodName}__`] = originMethods[methodName]
// }
}
/**
* 劫持 playbackRate、volume、currentTime 属性,并增加锁定的逻辑,从而实现更强的抗干扰能力
*/
function hijackPrototypeProperty (element, property) {
if (!element || !element.prototype || !originDescriptors[property]) {
return false
}
original.Object.defineProperty.call(Object, element.prototype, property, {
configurable: true,
enumerable: true,
get: function () {
const val = originDescriptors[property].get.apply(this, arguments);
// original.console.log(`[mediaElementPropertyHijack][${property}][get]`, val)
const mediaPlusApi = createMediaPlusApi(this);
if (mediaPlusApi && mediaPlusApi.isLock(property)) {
if (property === 'playbackRate') {
return +!+[]
}
}
return val
},
set: function (value) {
// original.console.log(`[mediaElementPropertyHijack][${property}][set]`, value)
if (property === 'src') {
mediaDetectHandler(this);
}
/* 对调速、调音和进度控制逻辑进行增强处理,例如允许通过mediaPlusApi这些功能进行锁定 */
if (['playbackRate', 'volume', 'currentTime'].includes(property)) {
const mediaPlusApi = createMediaPlusApi(this);
if (mediaPlusApi && mediaPlusApi.isLock(property)) {
// original.console.log(`[mediaElementPropertyHijack] ${property}已被锁定,无法执行相关操作`)
return
}
}
return originDescriptors[property].set.apply(this, arguments)
}
});
}
function mediaPlus (mediaElement) {
return createMediaPlusApi(mediaElement)
}
function mediaProxy () {
if (!hasProxyHTMLMediaElement) {
const proxyMethods = ['play', 'pause', 'load', 'addEventListener'];
proxyMethods.forEach(methodName => { proxyPrototypeMethod(HTMLMediaElement, methodName); });
const hijackProperty = ['playbackRate', 'volume', 'currentTime', 'src'];
hijackProperty.forEach(property => { hijackPrototypeProperty(HTMLMediaElement, property); });
hasProxyHTMLMediaElement = true;
}
return hasProxyHTMLMediaElement
}
/**
* 媒体标签检测,可以检测出viode、audio、以及其它标签名经过改造后的媒体Element
* @param {Function} handler -必选 检出后要执行的回调函数
* @returns mediaElementList
*/
function mediaChecker (handler) {
if (!(handler instanceof Function) || mediaElementHandler.includes(handler)) {
return mediaElementList
} else {
mediaElementHandler.push(handler);
}
if (!hasProxyHTMLMediaElement) {
mediaProxy();
}
return mediaElementList
}
/**
* 初始化mediaCore相关功能
*/
function init (mediaCheckerHandler) {
if (hasMediaCoreInit) { return false }
originDescriptors = Object.getOwnPropertyDescriptors(HTMLMediaElement.prototype);
Object.keys(HTMLMediaElement.prototype).forEach(key => {
try {
if (HTMLMediaElement.prototype[key] instanceof Function) {
originMethods[key] = HTMLMediaElement.prototype[key];
}
} catch (e) {}
});
mediaCheckerHandler = mediaCheckerHandler instanceof Function ? mediaCheckerHandler : function () {};
mediaChecker(mediaCheckerHandler);
hasMediaCoreInit = true;
return true
}
return {
init,
mediaPlus,
mediaChecker,
originDescriptors,
originMethods,
mediaElementList
}
})();
const mediaSource = (function () {
let hasMediaSourceInit = false;
const originMethods = {};
const originURLMethods = {};
const mediaSourceMap = new original.Map();
const objectURLMap = new original.Map();
function proxyMediaSourceMethod () {
if (!originMethods.addSourceBuffer || !originMethods.endOfStream) {
return false
}
// TODO 该代理在上层调用生效可能存在延迟,原因待研究
originURLMethods.createObjectURL = originURLMethods.createObjectURL || URL.prototype.constructor.createObjectURL;
URL.prototype.constructor.createObjectURL = new original.Proxy(originURLMethods.createObjectURL, {
apply (target, ctx, args) {
const objectURL = target.apply(ctx, args);
original.map.set.call(objectURLMap, args[0], objectURL);
return objectURL
}
});
MediaSource.prototype.addSourceBuffer = new original.Proxy(originMethods.addSourceBuffer, {
apply (target, ctx, args) {
if (!original.map.has.call(mediaSourceMap, ctx)) {
original.map.set.call(mediaSourceMap, ctx, {
mediaSource: ctx,
createTime: Date.now(),
sourceBuffer: [],
endOfStream: false
});
}
original.console.log('[addSourceBuffer]', ctx, args);
const mediaSourceInfo = original.map.get.call(mediaSourceMap, ctx);
const mimeCodecs = args[0] || '';
const sourceBuffer = target.apply(ctx, args);
const sourceBufferItem = {
mimeCodecs,
originAppendBuffer: sourceBuffer.appendBuffer,
bufferData: [],
mediaInfo: {}
};
try {
// mimeCodecs字符串示例:'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
const mediaInfo = sourceBufferItem.mediaInfo;
const tmpArr = sourceBufferItem.mimeCodecs.split(';');
mediaInfo.type = tmpArr[0].split('/')[0];
mediaInfo.format = tmpArr[0].split('/')[1];
mediaInfo.codecs = tmpArr[1].trim().replace('codecs=', '').replace(/["']/g, '');
} catch (e) {
original.console.error('[addSourceBuffer][mediaInfo] 媒体信息解析出错', sourceBufferItem, e);
}
mediaSourceInfo.sourceBuffer.push(sourceBufferItem);
/* 代理sourceBuffer.appendBuffer函数,并将buffer存一份到mediaSourceInfo里 */
sourceBuffer.appendBuffer = new original.Proxy(sourceBufferItem.originAppendBuffer, {
apply (bufTarget, bufCtx, bufArgs) {
const buffer = bufArgs[0];
sourceBufferItem.bufferData.push(buffer);
/* 确保mediaUrl的存在和对应 */
if (original.map.get.call(objectURLMap, ctx)) {
mediaSourceInfo.mediaUrl = original.map.get.call(objectURLMap, ctx);
}
return bufTarget.apply(bufCtx, bufArgs)
}
});
return sourceBuffer
}
});
MediaSource.prototype.endOfStream = new original.Proxy(originMethods.endOfStream, {
apply (target, ctx, args) {
/* 标识当前媒体流已加载完成 */
const mediaSourceInfo = original.map.get.call(mediaSourceMap, ctx);
if (mediaSourceInfo) {
mediaSourceInfo.endOfStream = true;
}
return target.apply(ctx, args)
}
});
}
/**
* 下载媒体资源,下载代码参考:https://juejin.cn/post/6873267073674379277
*/
function downloadMediaSource () {
mediaSourceMap.forEach(mediaSourceInfo => {
if (mediaSourceInfo.hasDownload) {
const confirm = original.confirm('该媒体文件已经下载过了,确定需要再次下载?');
if (!confirm) {
return false
}
}
if (!mediaSourceInfo.hasDownload && !mediaSourceInfo.endOfStream) {
const confirm = original.confirm('媒体数据还没完全就绪,确定要执行下载操作?');
if (!confirm) {
return false
}
original.console.log('[downloadMediaSource] 媒体数据还没完全就绪', mediaSourceInfo);
}
mediaSourceInfo.hasDownload = true;
mediaSourceInfo.sourceBuffer.forEach(sourceBufferItem => {
if (!sourceBufferItem.mimeCodecs || sourceBufferItem.mimeCodecs.toString().indexOf(';') === -1) {
const msg = '[downloadMediaSource][mimeCodecs][error] mimeCodecs不存在或信息异常,无法下载';
original.console.error(msg, sourceBufferItem);
original.alert(msg);
return false
}
try {
let mediaTitle = sourceBufferItem.mediaInfo.title || `${document.title || Date.now()}_${sourceBufferItem.mediaInfo.type}.${sourceBufferItem.mediaInfo.format}`;
if (!sourceBufferItem.mediaInfo.title) {
mediaTitle = original.prompt('请确认文件标题:', mediaTitle) || mediaTitle;
sourceBufferItem.mediaInfo.title = mediaTitle;
}
if (!mediaTitle.endsWith(sourceBufferItem.mediaInfo.format)) {
mediaTitle = mediaTitle + '.' + sourceBufferItem.mediaInfo.format;
}
const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob(sourceBufferItem.bufferData));
a.download = mediaTitle;
a.click();
URL.revokeObjectURL(a.href);
} catch (e) {
mediaSourceInfo.hasDownload = false;
const msg = '[downloadMediaSource][error]';
original.console.error(msg, e);
original.alert(msg);
}
});
});
}
function hasInit () {
return hasMediaSourceInit
}
function init () {
if (hasMediaSourceInit) {
return false
}
if (!window.MediaSource) {
return false
}
Object.keys(MediaSource.prototype).forEach(key => {
try {
if (MediaSource.prototype[key] instanceof Function) {
originMethods[key] = MediaSource.prototype[key];
}
} catch (e) {}
});
proxyMediaSourceMethod();
hasMediaSourceInit = true;
}
return {
init,
hasInit,
originMethods,
originURLMethods,
mediaSourceMap,
objectURLMap,
downloadMediaSource
}
})();
/*!
* @name utils.js
* @description 数据类型相关的方法
* @version 0.0.1
* @author Blaze
* @date 22/03/2019 22:46
* @github https://github.com/xxxily
*/
/**
* 准确地获取对象的具体类型 参见:https://www.talkingcoder.com/article/6333557442705696719
* @param obj { all } -必选 要判断的对象
* @returns {*} 返回判断的具体类型
*/
function getType (obj) {
if (obj == null) {
return String(obj)
}
return typeof obj === 'object' || typeof obj === 'function'
? (obj.constructor && obj.constructor.name && obj.constructor.name.toLowerCase()) ||
/function\s(.+?)\(/.exec(obj.constructor)[1].toLowerCase()
: typeof obj
}
const isType = (obj, typeName) => getType(obj) === typeName;
const isObj = obj => isType(obj, 'object');
/*!
* @name object.js
* @description 对象操作的相关方法
* @version 0.0.1
* @author Blaze
* @date 21/03/2019 23:10
* @github https://github.com/xxxily
*/
/**
* 对一个对象进行深度拷贝
* @source -必选(Object|Array)需拷贝的对象或数组
*/
function clone (source) {
var result = {};
if (typeof source !== 'object') {
return source
}
if (Object.prototype.toString.call(source) === '[object Array]') {
result = [];
}
if (Object.prototype.toString.call(source) === '[object Null]') {
result = null;
}
for (var key in source) {
result[key] = (typeof source[key] === 'object') ? clone(source[key]) : source[key];
}
return result
}
/**
* 根据文本路径获取对象里面的值,如需支持数组请使用lodash的get方法
* @param obj {Object} -必选 要操作的对象
* @param path {String} -必选 路径信息
* @returns {*}
*/
function getValByPath (obj, path) {
path = path || '';
const pathArr = path.split('.');
let result = obj;
/* 递归提取结果值 */
for (let i = 0; i < pathArr.length; i++) {
if (!result) break
result = result[pathArr[i]];
}
return result
}
/**
* 根据文本路径设置对象里面的值,如需支持数组请使用lodash的set方法
* @param obj {Object} -必选 要操作的对象
* @param path {String} -必选 路径信息
* @param val {Any} -必选 如果不传该参,最终结果会被设置为undefined
* @returns {Boolean} 返回true表示设置成功,否则设置失败
*/
function setValByPath (obj, path, val) {
if (!obj || !path || typeof path !== 'string') {
return false
}
let result = obj;
const pathArr = path.split('.');
for (let i = 0; i < pathArr.length; i++) {
if (!result) break
if (i === pathArr.length - 1) {
result[pathArr[i]] = val;
return Number.isNaN(val) ? Number.isNaN(result[pathArr[i]]) : result[pathArr[i]] === val
}
result = result[pathArr[i]];
}
return false
}
const quickSort = function (arr) {
if (arr.length <= 1) { return arr }
var pivotIndex = Math.floor(arr.length / 2);
var pivot = arr.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right))
};
function hideDom (selector, delay) {
setTimeout(function () {
const dom = document.querySelector(selector);
if (dom) {
dom.style.opacity = 0;
}
}, delay || 1000 * 5);
}
/**
* 向上查找操作
* @param dom {Element} -必选 初始dom元素
* @param fn {function} -必选 每一级ParentNode的回调操作
* 如果函数返回true则表示停止向上查找动作
*/
function eachParentNode (dom, fn) {
let parent = dom.parentNode;
while (parent) {
const isEnd = fn(parent, dom);
parent = parent.parentNode;
if (isEnd) {
break
}
}
}
/**
* 动态加载css内容
* @param cssText {String} -必选 样式的文本内容
* @param id {String} -可选 指定样式文本的id号,如果已存在对应id号则不会再次插入
* @param insetTo {Dom} -可选 指定插入到哪
* @returns {HTMLStyleElement}
*/
function loadCSSText (cssText, id, insetTo) {
if (id && document.getElementById(id)) {
return false
}
const style = document.createElement('style');
const head = insetTo || document.head || document.getElementsByTagName('head')[0];
style.appendChild(document.createTextNode(cssText));
head.appendChild(style);
if (id) {
style.setAttribute('id', id);
}
return style
}
/**
* 判断当前元素是否为可编辑元素
* @param target
* @returns Boolean
*/
function isEditableTarget (target) {
const isEditable = target.getAttribute && target.getAttribute('contenteditable') === 'true';
const isInputDom = /INPUT|TEXTAREA|SELECT/.test(target.nodeName);
return isEditable || isInputDom
}
/**
* 判断某个元素是否处于shadowDom里面
* 参考:https://www.coder.work/article/299700
* @param node
* @returns {boolean}
*/
function isInShadow (node, returnShadowRoot) {
for (; node; node = node.parentNode) {
if (node.toString() === '[object ShadowRoot]') {
if (returnShadowRoot) {
return node
} else {
return true
}
}
}
return false
}
/**
* 判断某个元素是否处于可视区域,适用于被动调用情况,需要高性能,请使用IntersectionObserver
* 参考:https://github.com/febobo/web-interview/issues/84
* @param element
* @returns {boolean}
*/
function isInViewPort (element) {
const viewWidth = window.innerWidth || document.documentElement.clientWidth;
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
const {
top,
right,
bottom,
left
} = element.getBoundingClientRect();
return (
top >= 0 &&
left >= 0 &&
right <= viewWidth &&
bottom <= viewHeight
)
}
/**
* 将行内样式转换成对象的形式
* @param {string} inlineStyle -必选,例如: position: relative; opacity: 1; visibility: hidden; transform: scale(0.1) rotate(180deg);
* @returns {Object}
*/
function inlineStyleToObj (inlineStyle) {
if (typeof inlineStyle !== 'string') {
return {}
}
const result = {};
const styArr = inlineStyle.split(';');
styArr.forEach(item => {
const tmpArr = item.split(':');
if (tmpArr.length === 2) {
result[tmpArr[0].trim()] = tmpArr[1].trim();
}
});
return result
}
function objToInlineStyle (obj) {
if (Object.prototype.toString.call(obj) !== '[object Object]') {
return ''
}
const styleArr = [];
Object.keys(obj).forEach(key => {
styleArr.push(`${key}: ${obj[key]}`);
});
return styleArr.join('; ')
}
/* ua信息伪装 */
function fakeUA (ua) {
Object.defineProperty(navigator, 'userAgent', {
value: ua,
writable: false,
configurable: false,
enumerable: true
});
}
/* ua信息来源:https://developers.whatismybrowser.com */
const userAgentMap = {
android: {
chrome: 'Mozilla/5.0 (Linux; Android 9; SM-G960F Build/PPR1.180610.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.157 Mobile Safari/537.36',
firefox: 'Mozilla/5.0 (Android 7.0; Mobile; rv:57.0) Gecko/57.0 Firefox/57.0'
},
iPhone: {
safari: 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1',
chrome: 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/74.0.3729.121 Mobile/15E148 Safari/605.1'
},
iPad: {
safari: 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1 Mobile/15E148 Safari/604.1',
chrome: 'Mozilla/5.0 (iPad; CPU OS 12_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/74.0.3729.155 Mobile/15E148 Safari/605.1'
}
};
/**
* 判断是否处于Iframe中
* @returns {boolean}
*/
function isInIframe () {
return window !== window.top
}
/**