☰

futaba WebM inline player

WebMをページ内で再生しちゃう

  1. // ==UserScript==
  2. // @name        futaba WebM inline player
  3. // @namespace   https://github.com/himuro-majika
  4. // @description WebMをページ内で再生しちゃう
  5. // @author      himuro_majika
  6. // @include     http://*.2chan.net/*/*
  7. // @include     https://*.2chan.net/*/*
  8. // @exclude     http://*.2chan.net/*/futaba.php?mode=cat*
  9. // @exclude     https://*.2chan.net/*/futaba.php?mode=cat*
  10. // @exclude     http://*.2chan.net/bin/*
  11. // @exclude     https://*.2chan.net/bin/*
  12. // @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  13. // @require     https://greasyfork.org/scripts/1884-gm-config/code/GM_config.js?version=4836
  14. // @version     1.10.1
  15. // @grant       none
  16. // @run-at      document-idle
  17. // @license     MIT
  18. // @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPUExURYv4i2PQYy2aLUe0R////zorx9oAAAAFdFJOU/////8A+7YOUwAAAElJREFUeNqUj1EOwDAIQoHn/c88bX+2fq0kRsAoUXVAfwzCttWsDWzw0kNVWd2tZ5K9gqmMZB8libt4pSg6YlO3RnTzyxePAAMAzqMDgTX8hYYAAAAASUVORK5CYII=
  19. // ==/UserScript==
  20. this.$ = this.jQuery = jQuery.noConflict(true);
  21.  
  22. (function ($) {
  23. 	/**
  24. 	 * 設定
  25. 	 */
  26. 	// フルサイズプレーヤーを有効にする(4chanライクな表示)
  27. 	var USE_FULLPLAYER = true;
  28. 	// ループ再生を有効にする
  29. 	var USE_LOOP = true;
  30. 	// 自動再生を有効にする(ミニサイズプレーヤー使用時)
  31. 	var USE_AUTOPLAY = false;
  32. 	// コントロールを表示する(ミニサイズプレーヤー使用時)
  33. 	var USE_CONTROLS = true;
  34. 	// 動画のサイズをサムネ画像と同サイズに制限する
  35. 	var USE_LIMIT_SIZE = false;
  36. 	// 動画の外側をクリックして動画を閉じる
  37. 	var USE_CLOSE_ON_CLICK_OUTSIDE = true;
  38. 	// デフォルトの音量
  39. 	var DEFAULT_VOLUME = 50;
  40. 	// ミュート状態で再生する
  41. 	var USE_MUTED = false;
  42. 	// フルサイズプレーヤーに時間を表示する
  43. 	var USE_TIME_DISPLAY = true;
  44. 	// 再生速度変更を有効にする
  45. 	var USE_PLAYBACK_RATE_CONTROL = true;
  46. 	// 赤福のオートリンクにも反応する
  47. 	var USE_AUTOLINK = true;
  48.  
  49. 	init();
  50. 	function init() {
  51. 		config();
  52. 		getImgNodeThread();
  53. 		getImgNodeRes();
  54. 		if (USE_CLOSE_ON_CLICK_OUTSIDE) {
  55. 			closeOnClick();
  56. 		}
  57. 		if ((isAkahukuEnabled() || isFutakuroEnabled()) && USE_AUTOLINK) {
  58. 			getAutoLinkURL();
  59. 		}
  60. 		observeInserted();
  61. 		getResPopup();
  62. 	}
  63. 	// 赤福が有効か
  64. 	function isAkahukuEnabled() {
  65. 		return $("#akahuku_thumbnail").length > 0;
  66. 	}
  67. 	// ふたクロが有効か
  68. 	function isFutakuroEnabled() {
  69. 		return $("#master").length > 0;
  70. 	}
  71. 	// スレ画
  72. 	function getImgNodeThread() {
  73. 		var $sure_a = $(".thre").length ?
  74. 			$(".thre > a > img") :
  75. 			$("body > form > a > img");
  76. 		if (isFutakuroEnabled()) { // ふたクロ
  77. 			$sure_a = $("#master > a > img");
  78. 		}
  79. 		$sure_a.each(function() {
  80. 			replaceNode($(this));
  81. 		});
  82. 	}
  83. 	// レス画像
  84. 	function getImgNodeRes() {
  85. 		var $res_a = $(".rtd > a > img");
  86. 		$res_a.each(function() {
  87. 			replaceNode($(this));
  88. 		});
  89. 	}
  90. 	// オートリンクURL
  91. 	function getAutoLinkURL() {
  92. 		var $link = $("blockquote > a");
  93. 		$link.each(function() {
  94. 			replaceNode($(this));
  95. 		});
  96. 	}
  97. 	// 続きを読むで挿入される要素を監視
  98. 	function observeInserted() {
  99. 		var target = $(".thre").length ?
  100. 			$(".thre").get(0) :
  101. 			$("html > body > form[action]:not([enctype])").get(0);
  102. 		var observer = new MutationObserver(function(mutations) {
  103. 			mutations.forEach(function(mutation) {
  104. 				var $nodes = $(mutation.addedNodes);
  105. 				replaceNodeInserted($nodes);
  106. 			});
  107. 		});
  108. 		observer.observe(target, { childList: true });
  109. 	}
  110. 	// 引用ポップアップ //TODO:wip
  111. 	function getResPopup() {
  112. 		// $(document).click(function(event) {
  113. 		// 	var target = event.target;
  114. 		// 	console.log(target);
  115. 		// 	webmopen(target);
  116. 		// });
  117. 	}
  118. 	// 挿入されたレス
  119. 	function replaceNodeInserted($nodes) {
  120. 		var $res_inserted = $nodes.find("td > a > img");
  121. 		if (isAkahukuEnabled()) {
  122. 			if ($res_inserted.length) {
  123. 				replaceNode($res_inserted);
  124. 			}
  125. 		} else if (isFutakuroEnabled()) {
  126. 			$res_inserted.each(function(){
  127. 				replaceNode($(this));
  128. 			});
  129. 		}
  130. 		// オートリンク
  131. 		var $autolink_inserted = $nodes.find("blockquote > a");
  132. 		if (USE_AUTOLINK && $autolink_inserted.length) {
  133. 			replaceNode($autolink_inserted);
  134. 		}
  135. 	}
  136. 	// 外側をクリックしてプレーヤーを閉じる
  137. 	function closeOnClick() {
  138. 		$(document).click(function(event) {
  139. 			if (event.target.className != "extendWebm") {
  140. 				if ($(event.target).parents(".akahuku_reply_popup").length > 0) {
  141. 					// akahuku_reply_popup
  142. 					// replaceNode($(event.target));
  143. 					// return false;
  144. 				} else {
  145. 					$("div.cancelbk").each(function() {
  146. 						$(this).get(0).click();
  147. 					});
  148. 				}
  149. 			}
  150. 		});
  151. 	}
  152. 	// ノードの書き換え
  153. 	function replaceNode(node) {
  154. 		var href = node.parent().attr("href");
  155. 		if (node.attr("dummyhref")) {
  156. 			// オートリンク
  157. 			href = node.attr("dummyhref");
  158. 		} else if (node.attr("href")) {
  159. 			href = node.attr("href");
  160. 		}
  161. 		if (!href.match(/\.(webm|mp4)$/)) {
  162. 			// 拡張子.webm, .mp4以外
  163. 			return;
  164. 		}
  165. 		var width = node.attr("width");
  166. 		if (!width) {
  167. 			// オートリンク
  168. 			width = node.get(0).offsetWidth;
  169. 		}
  170. 		var height = node.attr("height");
  171. 		var timer_show, timer_hide, timer_rate_hide;
  172. 		
  173. 		
  174. 		//クリックイベント
  175. 		// document.removeEventListener('click', thumbonclick, false);
  176. 		node.click(function(event) {
  177. 			addMiniPlayer(node);
  178. 			return false;
  179. 		});
  180.  
  181. 		
  182. 		// マウスオーバーで読み込み
  183. 		node.hover(function(){
  184. 			if (USE_FULLPLAYER) {
  185. 				clearTimeout(timer_rate_hide);
  186. 				timer_show = setTimeout(function(){
  187. 					showFullPlayer();
  188. 					if (USE_PLAYBACK_RATE_CONTROL) {
  189. 						showplaybackRateControl();
  190. 					}
  191. 				}, 300);
  192. 			} else {
  193. 				if (node.attr("dummyhref") || node.attr("href")) {
  194. 					addMiniPlayerAutoLink();
  195. 				} else if (USE_AUTOPLAY) {
  196. 					addMiniPlayer(node);
  197. 				}
  198. 			}
  199. 		},function(){
  200. 			if (USE_FULLPLAYER) {
  201. 				clearTimeout(timer_show);
  202. 				timer_hide = setTimeout(function(){
  203. 					hideFullPlayer();
  204. 					if (USE_PLAYBACK_RATE_CONTROL) {
  205. 						hideplaybackRateControl();
  206. 					}
  207. 				}, 300);
  208. 			}
  209. 		});
  210. 		// 再生速度変更
  211. 		function showplaybackRateControl() {
  212. 			if ($("#GM_fwip_Rate_container").length) {
  213. 				return;
  214. 			}
  215. 			var $rateContainer = $("<div>", {
  216. 					id: "GM_fwip_Rate_container",
  217. 					css: {
  218. 						position: "absolute",
  219. 						// "margin-top": "5px",
  220. 						"margin-left": "20px",
  221. 						"background-color": "rgba(0,0,0,0.3)",
  222. 						"z-index": "100",
  223. 						color: "#fff",
  224. 					}
  225. 			}).hover(function(){
  226. 				clearTimeout(timer_hide);
  227. 			}, function() {
  228. 				timer_rate_hide = setTimeout(function() {
  229. 					hideFullPlayer();
  230. 					hideplaybackRateControl();
  231. 				}, 300);
  232. 			}).append(
  233. 				$("<label>", {
  234. 					text: "再生速度x",
  235. 					for: "GM_fwip_Rate",
  236. 				})
  237. 			).append(
  238. 				$("<input>", {
  239. 					id: "GM_fwip_Rate",
  240. 					type: "number",
  241. 					step: "0.25",
  242. 					max: "5.0",
  243. 					min: "0.25",
  244. 					value: "1.0",
  245. 					css: {
  246. 						width: "3em",
  247. 						opacity: "0.7"
  248. 					}
  249. 				})
  250. 			);
  251. 			if (node.attr("dummyhref") || node.attr("href")) {
  252. 				// オートリンク
  253. 				node.after($rateContainer);
  254. 			} else {
  255. 				node.parent().after($rateContainer);
  256. 			}
  257. 		}
  258. 		// 再生速度
  259. 		function hideplaybackRateControl() {
  260. 			$("#GM_fwip_Rate_container").remove();
  261. 		}
  262. 		// ミニプレイヤー
  263. 		function addMiniPlayer(node) {
  264. 			var thumb = node.get(0);
  265. 			webmopen(thumb);
  266. 			var video = node.parent().parent().find(".extendWebm");
  267. 			var videoDiv = video.parent();
  268. 			videoDiv.css({
  269. 				"margin": "0 20px",
  270. 				"float": "left",
  271. 				"clear": "left",
  272. 			});
  273. 			if (USE_LIMIT_SIZE) {
  274. 				video.css({
  275. 					"width": width,
  276. 					"height": height,
  277. 				});
  278. 			}
  279. 			video.prop({
  280. 				controls: USE_CONTROLS,
  281. 				// autoplay: USE_AUTOPLAY,
  282. 				loop: USE_LOOP,
  283. 				muted: USE_MUTED,
  284. 				volume: DEFAULT_VOLUME / 100,
  285. 			}).click(function(event) {
  286. 				//動画クリックでplay/pauseトグル(Chrome用)
  287. 				if (navigator.userAgent.indexOf("Firefox") == -1) {
  288. 					if (this.paused) {
  289. 						this.play();
  290. 					} else {
  291. 						this.pause();
  292. 					}
  293. 				}
  294. 			}).hover(function() {
  295. 				if (USE_AUTOPLAY && !USE_LOOP) {
  296. 					this.play();
  297. 				}
  298. 			}, function() {
  299. 			});
  300. 		}
  301. 		
  302. 		function addMiniPlayerAutoLink() {
  303. 			if (
  304. 				( node.attr("dummyhref") || node.attr("href") ) &&
  305. 				node.parent().parent().get(0).tagName == "FORM" &&
  306. 				width < 250
  307. 			) {
  308. 				// スレ本文のオートリンク
  309. 				width = 250;
  310. 			}
  311. 			var $videoContainer = $("<div>", {
  312. 				class: "GM_fwip_container_mini",
  313. 				css: {
  314. 					"margin": "0 20px",
  315. 					"float": "left",
  316. 					"clear": "left",
  317. 				}
  318. 			}).hover(function(){
  319. 				if (USE_AUTOPLAY) {
  320. 					$(this).find(".GM_fwip_player").get(0).play();
  321. 				}
  322. 			},function(){
  323. 			}).append(
  324. 				$("<video>", {
  325. 					class: "GM_fwip_player",
  326. 					css: {
  327. 						"width": USE_LIMIT_SIZE ? width : "",
  328. 						"height": USE_LIMIT_SIZE ? height : "",
  329. 					},
  330. 				}).prop({
  331. 					controls: USE_CONTROLS,
  332. 					autoplay: USE_AUTOPLAY,
  333. 					loop: USE_LOOP,
  334. 					muted: USE_MUTED,
  335. 					volume: DEFAULT_VOLUME / 100,
  336. 				}).click(function(event) {
  337. 					//動画クリックでplay/pauseトグル(Chrome用)
  338. 					if (navigator.userAgent.indexOf("Firefox") == -1) {
  339. 						if (this.paused) {
  340. 							this.play();
  341. 						} else {
  342. 							this.pause();
  343. 						}
  344. 					}
  345. 				})
  346. 				// .on("timeupdate", function(){
  347. 				// 	// 再生速度変更
  348. 				// 	$(this).prop("playbackRate", $("#GM_fwip_Rate").val());
  349. 				// })
  350. 				.append(
  351. 					$("<source>", {
  352. 						src: href,
  353. 						type: "video/webm",
  354. 					})
  355. 				)
  356. 			);
  357. 			// サムネイル画像を隠す
  358. 			if (node.attr("dummyhref") || node.attr("href")) {
  359. 				// オートリンク
  360. 				if (!node.parent().parent().children(".GM_fwip_container_mini").length) {
  361. 					node.parent().before($videoContainer);
  362. 				}
  363. 			} else {
  364. 				node.hide();
  365. 				node.parent().before($videoContainer);
  366. 			}
  367. 		}
  368. 		// フルプレイヤーを表示する
  369. 		function showFullPlayer() {
  370. 			if ($("#GM_fwip_Rate_container").length) {
  371. 				return;
  372. 			}
  373. 			hideFullPlayer();
  374. 			// サムネ右端のオフセット
  375. 			var offset = parseInt(node.offset().left) + parseInt(width);
  376. 			var $videoContainer = $("<div>", {
  377. 				class: "GM_fwip_container_full",
  378. 				css: {
  379. 					"background-color": "#000",
  380. 					"position": "fixed",
  381. 					"top": "20px",
  382. 					"right": "20px",
  383. 					// "border": "5px solid #333",
  384. 					// "border-radius": "5px",
  385. 					"box-shadow": "0 0 10px 5px rgba(0,0,0,0.5)",
  386. 					"z-index": "2000000013",
  387. 				}
  388. 			});
  389. 			var $videoPlayer = $("<video>", {
  390. 				class: "GM_fwip_player",
  391. 				css: {
  392. 					"width": "auto",
  393. 					"height": "auto",
  394. 					"max-width": $(window).width() - offset - 40,
  395. 					"max-height": $(window).height() - 50,
  396. 				},
  397. 			}).prop({
  398. 				autoplay: true,
  399. 				loop: USE_LOOP,
  400. 				muted: USE_MUTED,
  401. 				preload: true,
  402. 				volume: DEFAULT_VOLUME / 100,
  403. 				// playbackRate: "1.0",
  404. 			}).append(
  405. 				$("<source>", {
  406. 					src: href,
  407. 					type: "video/webm",
  408. 					error: function() {
  409. 						// ソースの読み込み失敗イベント
  410. 						onerror();
  411. 					},
  412. 				})
  413. 			);
  414. 			$videoContainer.append($videoPlayer);
  415. 			if (USE_PLAYBACK_RATE_CONTROL) {
  416. 				$videoPlayer.on("timeupdate", function() {
  417. 					// 再生速度変更
  418. 					$(this).prop("playbackRate", $("#GM_fwip_Rate").val());
  419. 				});
  420. 			}
  421. 			if (USE_TIME_DISPLAY) {
  422. 				$videoPlayer.on("loadedmetadata", function(){
  423. 					// メタデータ読み込み完了イベント
  424. 					showDuration($(this).get(0));
  425. 				}).on("timeupdate", function() {
  426. 					// 再生位置変更イベント
  427. 					showCurrentTime($(this).get(0));
  428. 				});
  429. 				$videoContainer.append(
  430. 					$("<div>", {
  431. 						class: "GM_fwip_time_container",
  432. 						css: {
  433. 							"font-size": "6pt",
  434. 							"font-family": "arial,helvetica,sans-serif",
  435. 							postion: "relative",
  436. 							"text-align": "right",
  437. 							color: "#fff",
  438. 						}
  439. 					}).append(
  440. 						$("<span>", {
  441. 							class: "GM_fwip_time_current"
  442. 						})
  443. 					).append(
  444. 						$("<span>").text("/")
  445. 					).append(
  446. 						$("<span>", {
  447. 							class: "GM_fwip_time_duration",
  448. 						})
  449. 					)
  450. 				);
  451. 			}
  452. 			$("body").append($videoContainer);
  453. 			// 動画の長さを表示する
  454. 			function showDuration(video) {
  455. 				var webm_duration = parseTime(video.duration);
  456. 				$(".GM_fwip_time_duration").text(webm_duration);
  457. 			}
  458. 			// 再生時間を表示する
  459. 			function showCurrentTime(video) {
  460. 				var currenttime = parseTime(video.currentTime);
  461. 				$(".GM_fwip_time_current").text(currenttime);
  462. 			}
  463. 			// エラー表示
  464. 			function onerror() {
  465. 				$videoContainer.children().remove();
  466. 				$videoContainer.append(
  467. 					$("<p>", {
  468. 						text: "動画が読み込めませんでした",
  469. 						class: "GM_fwip_error",
  470. 						css: {
  471. 							"text-align": "center",
  472. 							"background-color": "#fff",
  473. 							"color": "#c00"
  474. 						}
  475. 					})
  476. 				);
  477. 			}
  478. 		}
  479. 		// フルプレーヤーを消す
  480. 		function hideFullPlayer() {
  481. 			var $container = $(".GM_fwip_container_full");
  482. 			if ($container.length) {
  483. 				$container.remove();
  484. 			}
  485. 		}
  486. 	}
  487.  
  488. 	// 設定
  489. 	function config() {
  490. 		// 設定画面
  491. 		GM_config.init("futaba WebM inline playerオプション<br>" +
  492. 		"(設定反映には[Save]ボタン押下後にページの再読み込みが必要です)", {
  493. 			"USE_LOOP" : {
  494. 				"section": ["共通"],
  495. 				"label" : "ループ再生を有効にする",
  496. 				"type" : "checkbox",
  497. 				"default" : USE_LOOP
  498. 			},
  499. 			"DEFAULT_VOLUME" : {
  500. 				"label" : "デフォルトの音量（範囲は0～100。ミュートの設定が優先されます。）",
  501. 				"type" : "int",
  502. 				"default" : DEFAULT_VOLUME
  503. 			},
  504. 			"USE_MUTED" : {
  505. 				"label" : "ミュート状態で再生する",
  506. 				"type" : "checkbox",
  507. 				"default" : USE_MUTED
  508. 			},
  509. 			"USE_AUTOLINK" : {
  510. 				"label" : "赤福・ふたクロのオートリンク文字列に反応する",
  511. 				"type" : "checkbox",
  512. 				"default" : USE_AUTOLINK
  513. 			},
  514. 			"USE_FULLPLAYER" : {
  515. 				"section": ["フルサイズプレーヤー(画面右上のスペースに表示される大きいサイズのプレーヤー)"],
  516. 				"label" : "フルサイズプレーヤーを使用する(オフにするとミニサイズプレーヤーが有効になります。)",
  517. 				"type" : "checkbox",
  518. 				"default" : USE_FULLPLAYER
  519. 			},
  520. 			"USE_TIME_DISPLAY" : {
  521. 				"label" : "動画の下に再生時間を表示する",
  522. 				"type" : "checkbox",
  523. 				"default" : USE_TIME_DISPLAY
  524. 			},
  525. 			"USE_PLAYBACK_RATE_CONTROL" : {
  526. 				"label" : "再生速度コントロールを有効にする(実験的)",
  527. 				"type" : "checkbox",
  528. 				"default" : USE_PLAYBACK_RATE_CONTROL
  529. 			},
  530. 			"USE_AUTOPLAY" : {
  531. 				"section": ["ミニサイズプレーヤー(サムネ画像と置き換わるプレーヤー)"],
  532. 				"label" : "マウスオーバーで再生開始する",
  533. 				"type" : "checkbox",
  534. 				"default" : USE_AUTOPLAY
  535. 			},
  536. 			"USE_CONTROLS" : {
  537. 				"label" : "コントロールを表示する",
  538. 				"type" : "checkbox",
  539. 				"default" : USE_CONTROLS
  540. 			},
  541. 			"USE_CLOSE_ON_CLICK_OUTSIDE" : {
  542. 				"label" : "動画の外側をクリックして動画を閉じる",
  543. 				"type" : "checkbox",
  544. 				"default" : USE_CLOSE_ON_CLICK_OUTSIDE
  545. 			},
  546. 			"USE_LIMIT_SIZE" : {
  547. 				"label" : "動画のサイズをサムネ画像と同サイズに制限する",
  548. 				"type" : "checkbox",
  549. 				"default" : USE_LIMIT_SIZE
  550. 			}
  551. 		});
  552. 		// 設定値読み込み
  553. 		USE_FULLPLAYER = GM_config.get("USE_FULLPLAYER");
  554. 		USE_LOOP = GM_config.get("USE_LOOP");
  555. 		USE_AUTOPLAY = GM_config.get("USE_AUTOPLAY");
  556. 		USE_CONTROLS = GM_config.get("USE_CONTROLS");
  557. 		if (!GM_config.get("DEFAULT_VOLUME") || GM_config.get("DEFAULT_VOLUME") > 100) {
  558. 			DEFAULT_VOLUME = 100;
  559. 			GM_config.set("DEFAULT_VOLUME", 100);
  560. 		} else {
  561. 			DEFAULT_VOLUME = GM_config.get("DEFAULT_VOLUME");
  562. 		}
  563. 		USE_MUTED = GM_config.get("USE_MUTED");
  564. 		USE_TIME_DISPLAY = GM_config.get("USE_TIME_DISPLAY");
  565. 		USE_PLAYBACK_RATE_CONTROL = GM_config.get("USE_PLAYBACK_RATE_CONTROL");
  566. 		USE_AUTOLINK = GM_config.get("USE_AUTOLINK");
  567. 		USE_LIMIT_SIZE = GM_config.get("USE_LIMIT_SIZE");
  568. 		USE_CLOSE_ON_CLICK_OUTSIDE = GM_config.get("USE_CLOSE_ON_CLICK_OUTSIDE");
  569. 		// 設定ボタンの表示
  570. 		$("body > table:not([class])").before(
  571. 			$("<span>", {
  572. 				id: "GM_fwip_configButton",
  573. 			}).append(
  574. 				$("<a>", {
  575. 					text: "[WebM設定]",
  576. 					css: {
  577. 						cursor: "pointer",
  578. 					},
  579. 					click : function(){
  580. 						GM_config.open();
  581. 					}
  582. 				})
  583. 			)
  584. 		);
  585. 	}
  586. 	// 秒をhh:mm:ss形式で返す
  587. 	function parseTime(sec) {
  588. 		var date = new Date(0,0,0,0,0,sec);
  589. 		var time =
  590. 		("0" + date.getHours()).slice( -2 ) + ":" +
  591. 		("0" + date.getMinutes()).slice( -2 ) + ":" +
  592. 		("0" + date.getSeconds()).slice( -2 );
  593. 		return time;
  594. 	}
  595.  
  596. })(jQuery);