OneDrive VideoPlayer fix

OneDriveの動画プレイヤーのフルスクリーン再生を復活&細かい調整

  1. // ==UserScript==
  2. // @name OneDrive VideoPlayer fix
  3. // @namespace http://github.com/segabito/
  4. // @version 0.3.0
  5. // @description OneDriveの動画プレイヤーのフルスクリーン再生を復活&細かい調整
  6. // @author segabito
  7. // @match https://onedrive.live.com/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. var monkey = function() {
  13. var playerFrame = window, video;
  14. var ItemVideoPlayerRes;
  15.  
  16. // https://onedrive.live.com/handlers/clientstring.mvc?mkt=ja-JP&group=Files&v=19.8.1712.2000&useRequiresJs=False
  17. // var videoLoadErrorMessage = (function() {
  18. //
  19. // var XIEO = window.live = window.live || {};
  20. // var smgP = XIEO.shared = XIEO.shared || {};
  21. // var idJb = smgP.skydrive = smgP.skydrive || {};
  22. // var OLSZ = idJb.monaco = idJb.monaco || {};
  23. //// qQjl["loaderror"] = "問題が発生したため、動画を再生できません。";
  24. //// qQjl["loaderrordecode"] = "この動画には問題があります。動画をダウンロードして、ビデオ アプリによる再生を試してください。";
  25. //// qQjl["loaderrornetwork"] = "動画の再生中に問題が発生しました。インターネット接続を確認し、もう一度やり直してください。";
  26. //
  27. // var message =
  28. // qQjl["loaderror"] ||
  29. // jHBx["loaderror"] ||
  30. // "問題が発生したため、動画を再生できません。";
  31. // return message;
  32. // })();
  33.  
  34.  
  35. var config = (function() {
  36. var prefix = 'OV_';
  37. var conf = {
  38. slideshow: false,
  39. fitMode: '',
  40. };
  41. return {
  42. get: function(key) {
  43. try {
  44. if (window.sessionStorage.hasOwnProperty(prefix + key)) {
  45. return JSON.parse(window.sessionStorage.getItem(prefix + key));
  46. }
  47. return conf[key];
  48. } catch (e) {
  49. return conf[key];
  50. }
  51. },
  52. set: function(key, value) {
  53. window.sessionStorage.setItem(prefix + key, JSON.stringify(value));
  54. }
  55. };
  56. })();
  57.  
  58. var __css__ = (function() {/*
  59.  
  60. .fit16-9 .od-VideoCanvas-video {
  61. top: -16.666666% !important;
  62. height: 133.333333% !important;
  63. }
  64.  
  65. #ovPanel {
  66. display: none;
  67. position: fixed;
  68. z-index: 10000;
  69. top:32px;
  70. right: 0px;
  71. min-width: 100px;
  72. {*transition: opacity 0.5s ease;*}
  73. background-color: #888;
  74. border: 1px solid #000;
  75. box-shadow: 4px 4px 0 black;
  76. opacity: 0;
  77. }
  78.  
  79. .videoPlayer #ovPanel {
  80. display: block;
  81. }
  82.  
  83. #ovPanel:hover {
  84. opacity: 1;
  85. }
  86.  
  87. #ovPanel button {
  88. cursor: pointer;
  89. opacity: 1;
  90. }
  91.  
  92. .fit16-9 #ovPanel .fitMode {
  93. color: red;
  94. }
  95.  
  96. .slideshow #ovPanel .slideshow {
  97. color: red;
  98. }
  99.  
  100. {*
  101. .c-VideoPlayer.isPlaybackPanelVisible .c-PlaybackPanel {
  102. opacity: 0;
  103. }
  104. .c-VideoPlayer.isPlaybackPanelVisible .c-PlaybackPanel:hover {
  105. opacity: 1;
  106. }
  107. *}
  108.  
  109. .fullscreen .OneUp-commandBar, .fullscreen .OneUp-flipper {
  110. visibility: visible;
  111. }
  112. .fullscreen .OneUp-commandBar, .fullscreen .OneUp-flipper:hover {
  113. opacity: 0.85;
  114. }
  115. */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
  116.  
  117. var __panel__ = (function() {/*
  118. <div id="ovPanel">
  119. <button class="fitMode">fitMode</button>
  120. <button class="slideshow">slideshow</button>
  121. </div>
  122.  
  123. */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1].replace(/\{\*/g, '/*').replace(/\*\}/g, '*/');
  124.  
  125.  
  126. var addStyle = function(styles, targetWindow) {
  127. if (!targetWindow) { targetWindow = self; }
  128. var elm = targetWindow.document.createElement('style');
  129. elm.type = 'text/css';
  130.  
  131. var text = styles.toString();
  132. text = targetWindow.document.createTextNode(text);
  133. elm.appendChild(text);
  134. var head = targetWindow.document.getElementsByTagName('head');
  135. head = head[0];
  136. head.appendChild(elm);
  137. return elm;
  138. };
  139.  
  140. var FullScreen = {
  141. now: function() {
  142. if (top.document.fullScreenElement || top.document.mozFullScreen || top.document.webkitIsFullScreen) {
  143. return true;
  144. }
  145. return false;
  146. },
  147. request: function(target) {
  148. var elm = typeof target === 'string' ? top.document.getElementById(target) : target;
  149. if (!elm) { return; }
  150. if (elm.requestFullScreen) {
  151. elm.requestFullScreen();
  152. } else if (elm.webkitRequestFullScreen) {
  153. elm.webkitRequestFullScreen();
  154. } else if (elm.mozRequestFullScreen) {
  155. elm.mozRequestFullScreen();
  156. }
  157. },
  158. cancel: function() {
  159. if (!this.now()) { return; }
  160.  
  161. if (top.document.cancelFullScreen) {
  162. top.document.cancelFullScreen();
  163. } else if (top.document.webkitCancelFullScreen) {
  164. top.document.webkitCancelFullScreen();
  165. } else if (document.mozCancelFullScreen) {
  166. top.document.mozCancelFullScreen();
  167. }
  168. }
  169. };
  170.  
  171. var toggleMonitorFull = function(v) {
  172. console.log('toggleMonitorFull!');
  173. var now = FullScreen.now();
  174. if (now || v === false) {
  175. console.log('fullscreen cancel');
  176. FullScreen.cancel();
  177. } else if (!now || v === true) {
  178. console.log('fullscreen request!');
  179. FullScreen.request(top.document.body);
  180. }
  181. };
  182.  
  183. var isVideoFinished = function() {
  184. var vpos = $('.od-PlaybackPanel--hasDuration .od-PlaybackPanel-timePlayed').text();
  185. var duration = $('.od-PlaybackPanel--hasDuration .od-PlaybackPanel-totalTime').text();
  186. if (!vpos || !duration) { return false; }
  187. //console.log('isVideoFinished', vpos, duration, vpos === duration);
  188. return vpos === duration;
  189. //console.log('"%s","%s"', playerFrame.$('.duration').text(), playerFrame.$('.currentTime').text());
  190. //console.log(playerFrame.$('.duration').text() === playerFrame.$('.currentTime').text());
  191. //return playerFrame.$('.duration').text() === playerFrame.$('.currentTime').text();
  192. };
  193.  
  194. var isVideoPlayingError = function() {
  195. var vp = ItemVideoPlayerRes.strings;
  196. var message = $('.od-ItemVideoPlayer-statusText').text();
  197. if (!message) { return false; }
  198. console.log('statusText', message);
  199.  
  200. var isError =
  201. (message === vp.errorLoading) ||
  202. (message === vp.errorNetwork) ||
  203. false;
  204.  
  205. if (isError) {
  206. console.log('%cVideoPlayingError: %s', 'background: red;', message);
  207. }
  208. return isError;
  209. // return $('.errorMessage').text() === videoLoadErrorMessage ; // "問題が発生したため、動画を再生できません。";
  210. };
  211.  
  212. var togglePlay = function() {
  213. $('.od-PlaybackPanel .ms-Icon--play, .od-PlaybackPanel .ms-Icon--pause').click(); //$('.canvasOverlay').click();
  214. };
  215.  
  216. var playNext = function() {
  217. try {
  218. var $nextButton = $('.OneUp-flipper--next .OneUp-button'); //top.window.jQuery('.OneUp-button[data-automationid=nextButton]');
  219. window.$nextButton = $nextButton.click();
  220. } catch (e) {
  221. console.log('%cException: ', 'background: red;', e, $nextButton);
  222. }
  223. //window.parent.$('.OneUp-flipper--next').click();
  224. };
  225.  
  226. var toggleFitMode = function(v) {
  227. $('body').toggleClass('fit16-9', v);
  228. config.set('fitMode', $('body').hasClass('fit16-9') ? 'fit16-9' : '');
  229. };
  230.  
  231. var toggleSlideshow = function(v) {
  232. $('body').toggleClass('slideshow', v);
  233. config.set('slideshow', $('body').hasClass('slideshow'));
  234. };
  235.  
  236. var onFullscreenStatusChange = function() {
  237. var td = top.window.document;
  238. if (
  239. (td.webkitFullscreenElement && td.webkitFullscreenElement !== null) ||
  240. (td.mozFullscreenElement && td.mozFullscreenElement !== null) ||
  241. (td.msFullscreenElement && td.msFullscreenElement !== null) ||
  242. (td.fullscreenElement && td.fullscreenElement !== null)
  243. ) {
  244. top.$('body').addClass('fullscreen');
  245. } else {
  246. top.$('body').removeClass('fullscreen');
  247. }
  248. };
  249.  
  250.  
  251.  
  252.  
  253.  
  254. var video = null;
  255. var isVideoPlayerMode = false;
  256. var onVideoWatchTimer = function() {
  257. var $video = $('video');
  258. if ($video.length < 1) {
  259. if (isVideoPlayerMode) {
  260. onVideoPlayerClose();
  261. }
  262. isVideoPlayerMode = false;
  263. } else {
  264. if (!isVideoPlayerMode) {
  265. onVideoPlayerOpen($video);
  266. }
  267. isVideoPlayerMode = true;
  268. _onVideoWatchTimer();
  269. }
  270. };
  271.  
  272. var timer = null, count = 0;
  273. var _onVideoWatchTimer = function() {
  274. if (isVideoPlayingError()) {
  275. console.log('%cVideo Playing Error. count:%s', 'background: lightgreen;', count++);
  276. togglePlay();
  277. return;
  278. }
  279.  
  280. if (config.get('slideshow') && isVideoFinished()) {
  281. console.log('%cVideoFinish', 'background: lightgreen;');
  282. playNext();
  283. //window.clearInterval(timer);
  284. return;
  285. }
  286. };
  287. var onVideoPlayerOpen = function($video) {
  288. console.log('%cVideoPlayer Open', 'background: lightgreen;');
  289. video = $video[0];
  290. // for debug
  291. window.video = video;
  292. ItemVideoPlayerRes = require('local/controls/video/item/ItemVideoPlayer.resx');
  293. $('body').addClass('videoPlayer');
  294. };
  295. var onVideoPlayerClose = function() {
  296. console.log('%cVideoPlayer Close', 'background: lightgreen;');
  297. video = null;
  298. count = 0;
  299. $('body').removeClass('videoPlayer');
  300. };
  301. var videoWatchTimer = null;
  302.  
  303. var initializeEvents = function() {
  304. videoWatchTimer = window.setInterval(onVideoWatchTimer, 1000);
  305. var td = top.window.document;
  306. td.addEventListener('webkitfullscreenchange', onFullscreenStatusChange);
  307. td.addEventListener('mozfullscreenchange', onFullscreenStatusChange);
  308. td.addEventListener('msFullscreenChange', onFullscreenStatusChange);
  309. td.addEventListener('fullscreenchange', onFullscreenStatusChange);
  310. window.onbeforeunload = function() {
  311. td.removeEventListener('webkitfullscreenchange', onFullscreenStatusChange);
  312. td.removeEventListener('mozfullscreenchange', onFullscreenStatusChange);
  313. td.removeEventListener('msFullscreenChange', onFullscreenStatusChange);
  314. td.removeEventListener('fullscreenchange', onFullscreenStatusChange);
  315. };
  316. };
  317.  
  318. var initializePanel = function() {
  319. var $panel = $(__panel__);
  320.  
  321. $panel.find('.fitMode') .on('click', toggleFitMode);
  322. $panel.find('.slideshow').on('click', toggleSlideshow);
  323.  
  324. $('body').toggleClass('fit16-9', config.get('fitMode') === 'fit16-9');
  325. $('body').toggleClass('slideshow', config.get('slideshow'));
  326.  
  327. $('body').append($panel);
  328.  
  329. };
  330. var initialize = function() {
  331. console.log('%cinitialize start', 'background: lightgreen;');
  332.  
  333. addStyle(__css__);
  334.  
  335. initializeEvents();
  336. initializePanel();
  337.  
  338. console.log('%cinitialize end', 'background: lightgreen;');
  339. };
  340.  
  341.  
  342. console.log('%cOneDrive VideoPlayer-fix', 'background: lightgreen;');
  343.  
  344. var initTimer = window.setInterval(function() {
  345. if (window.$) {
  346. window.clearInterval(initTimer);
  347. window.setTimeout(initialize, 5000);
  348. }
  349. }, 1000);
  350. };
  351.  
  352. var script = document.createElement("script");
  353. script.id = "OneDriveVideoPlayerFix";
  354. script.setAttribute("type", "text/javascript");
  355. script.setAttribute("charset", "UTF-8");
  356. script.appendChild(document.createTextNode('(' + monkey + ')();'));
  357. document.body.appendChild(script);
  358. })();
  359.  

QingJ © 2025

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