// ==UserScript==// @name        futaba WebM inline player// @namespace   https://github.com/himuro-majika// @description WebMをページ内で再生しちゃう// @author      himuro_majika// @include     http://*.2chan.net/*/*// @include     https://*.2chan.net/*/*// @exclude     http://*.2chan.net/*/futaba.php?mode=cat*// @exclude     https://*.2chan.net/*/futaba.php?mode=cat*// @exclude     http://*.2chan.net/bin/*// @exclude     https://*.2chan.net/bin/*// @require     https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js// @require     https://greasyfork.org/scripts/1884-gm-config/code/GM_config.js?version=4836// @version     1.10.1// @grant       none// @run-at      document-idle// @license     MIT// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPUExURYv4i2PQYy2aLUe0R////zorx9oAAAAFdFJOU/////8A+7YOUwAAAElJREFUeNqUj1EOwDAIQoHn/c88bX+2fq0kRsAoUXVAfwzCttWsDWzw0kNVWd2tZ5K9gqmMZB8libt4pSg6YlO3RnTzyxePAAMAzqMDgTX8hYYAAAAASUVORK5CYII=// ==/UserScript==this.$ = this.jQuery = jQuery.noConflict(true);(function ($) {/*** 設定*/// フルサイズプレーヤーを有効にする(4chanライクな表示)var USE_FULLPLAYER = true;// ループ再生を有効にするvar USE_LOOP = true;// 自動再生を有効にする(ミニサイズプレーヤー使用時)var USE_AUTOPLAY = false;// コントロールを表示する(ミニサイズプレーヤー使用時)var USE_CONTROLS = true;// 動画のサイズをサムネ画像と同サイズに制限するvar USE_LIMIT_SIZE = false;// 動画の外側をクリックして動画を閉じるvar USE_CLOSE_ON_CLICK_OUTSIDE = true;// デフォルトの音量var DEFAULT_VOLUME = 50;// ミュート状態で再生するvar USE_MUTED = false;// フルサイズプレーヤーに時間を表示するvar USE_TIME_DISPLAY = true;// 再生速度変更を有効にするvar USE_PLAYBACK_RATE_CONTROL = true;// 赤福のオートリンクにも反応するvar USE_AUTOLINK = true;init();function init() {config();getImgNodeThread();getImgNodeRes();if (USE_CLOSE_ON_CLICK_OUTSIDE) {closeOnClick();}if ((isAkahukuEnabled() || isFutakuroEnabled()) && USE_AUTOLINK) {getAutoLinkURL();}observeInserted();getResPopup();}// 赤福が有効かfunction isAkahukuEnabled() {return $("#akahuku_thumbnail").length > 0;}// ふたクロが有効かfunction isFutakuroEnabled() {return $("#master").length > 0;}// スレ画function getImgNodeThread() {var $sure_a = $(".thre").length ?$(".thre > a > img") :$("body > form > a > img");if (isFutakuroEnabled()) { // ふたクロ$sure_a = $("#master > a > img");}$sure_a.each(function() {replaceNode($(this));});}// レス画像function getImgNodeRes() {var $res_a = $(".rtd > a > img");$res_a.each(function() {replaceNode($(this));});}// オートリンクURLfunction getAutoLinkURL() {var $link = $("blockquote > a");$link.each(function() {replaceNode($(this));});}// 続きを読むで挿入される要素を監視function observeInserted() {var target = $(".thre").length ?$(".thre").get(0) :$("html > body > form[action]:not([enctype])").get(0);var observer = new MutationObserver(function(mutations) {mutations.forEach(function(mutation) {var $nodes = $(mutation.addedNodes);replaceNodeInserted($nodes);});});observer.observe(target, { childList: true });}// 引用ポップアップ //TODO:wipfunction getResPopup() {// $(document).click(function(event) {// 	var target = event.target;// 	console.log(target);// 	webmopen(target);// });}// 挿入されたレスfunction replaceNodeInserted($nodes) {var $res_inserted = $nodes.find("td > a > img");if (isAkahukuEnabled()) {if ($res_inserted.length) {replaceNode($res_inserted);}} else if (isFutakuroEnabled()) {$res_inserted.each(function(){replaceNode($(this));});}// オートリンクvar $autolink_inserted = $nodes.find("blockquote > a");if (USE_AUTOLINK && $autolink_inserted.length) {replaceNode($autolink_inserted);}}// 外側をクリックしてプレーヤーを閉じるfunction closeOnClick() {$(document).click(function(event) {if (event.target.className != "extendWebm") {if ($(event.target).parents(".akahuku_reply_popup").length > 0) {// akahuku_reply_popup// replaceNode($(event.target));// return false;} else {$("div.cancelbk").each(function() {$(this).get(0).click();});}}});}// ノードの書き換えfunction replaceNode(node) {var href = node.parent().attr("href");if (node.attr("dummyhref")) {// オートリンクhref = node.attr("dummyhref");} else if (node.attr("href")) {href = node.attr("href");}if (!href.match(/\.(webm|mp4)$/)) {// 拡張子.webm, .mp4以外return;}var width = node.attr("width");if (!width) {// オートリンクwidth = node.get(0).offsetWidth;}var height = node.attr("height");var timer_show, timer_hide, timer_rate_hide;//クリックイベント// document.removeEventListener('click', thumbonclick, false);node.click(function(event) {addMiniPlayer(node);return false;});// マウスオーバーで読み込みnode.hover(function(){if (USE_FULLPLAYER) {clearTimeout(timer_rate_hide);timer_show = setTimeout(function(){showFullPlayer();if (USE_PLAYBACK_RATE_CONTROL) {showplaybackRateControl();}}, 300);} else {if (node.attr("dummyhref") || node.attr("href")) {addMiniPlayerAutoLink();} else if (USE_AUTOPLAY) {addMiniPlayer(node);}}},function(){if (USE_FULLPLAYER) {clearTimeout(timer_show);timer_hide = setTimeout(function(){hideFullPlayer();if (USE_PLAYBACK_RATE_CONTROL) {hideplaybackRateControl();}}, 300);}});// 再生速度変更function showplaybackRateControl() {if ($("#GM_fwip_Rate_container").length) {return;}var $rateContainer = $("<div>", {id: "GM_fwip_Rate_container",css: {position: "absolute",// "margin-top": "5px","margin-left": "20px","background-color": "rgba(0,0,0,0.3)","z-index": "100",color: "#fff",}}).hover(function(){clearTimeout(timer_hide);}, function() {timer_rate_hide = setTimeout(function() {hideFullPlayer();hideplaybackRateControl();}, 300);}).append($("<label>", {text: "再生速度x",for: "GM_fwip_Rate",})).append($("<input>", {id: "GM_fwip_Rate",type: "number",step: "0.25",max: "5.0",min: "0.25",value: "1.0",css: {width: "3em",opacity: "0.7"}}));if (node.attr("dummyhref") || node.attr("href")) {// オートリンクnode.after($rateContainer);} else {node.parent().after($rateContainer);}}// 再生速度function hideplaybackRateControl() {$("#GM_fwip_Rate_container").remove();}// ミニプレイヤーfunction addMiniPlayer(node) {var thumb = node.get(0);webmopen(thumb);var video = node.parent().parent().find(".extendWebm");var videoDiv = video.parent();videoDiv.css({"margin": "0 20px","float": "left","clear": "left",});if (USE_LIMIT_SIZE) {video.css({"width": width,"height": height,});}video.prop({controls: USE_CONTROLS,// autoplay: USE_AUTOPLAY,loop: USE_LOOP,muted: USE_MUTED,volume: DEFAULT_VOLUME / 100,}).click(function(event) {//動画クリックでplay/pauseトグル(Chrome用)if (navigator.userAgent.indexOf("Firefox") == -1) {if (this.paused) {this.play();} else {this.pause();}}}).hover(function() {if (USE_AUTOPLAY && !USE_LOOP) {this.play();}}, function() {});}function addMiniPlayerAutoLink() {if (( node.attr("dummyhref") || node.attr("href") ) &&node.parent().parent().get(0).tagName == "FORM" &&width < 250) {// スレ本文のオートリンクwidth = 250;}var $videoContainer = $("<div>", {class: "GM_fwip_container_mini",css: {"margin": "0 20px","float": "left","clear": "left",}}).hover(function(){if (USE_AUTOPLAY) {$(this).find(".GM_fwip_player").get(0).play();}},function(){}).append($("<video>", {class: "GM_fwip_player",css: {"width": USE_LIMIT_SIZE ? width : "","height": USE_LIMIT_SIZE ? height : "",},}).prop({controls: USE_CONTROLS,autoplay: USE_AUTOPLAY,loop: USE_LOOP,muted: USE_MUTED,volume: DEFAULT_VOLUME / 100,}).click(function(event) {//動画クリックでplay/pauseトグル(Chrome用)if (navigator.userAgent.indexOf("Firefox") == -1) {if (this.paused) {this.play();} else {this.pause();}}})// .on("timeupdate", function(){// 	// 再生速度変更// 	$(this).prop("playbackRate", $("#GM_fwip_Rate").val());// }).append($("<source>", {src: href,type: "video/webm",})));// サムネイル画像を隠すif (node.attr("dummyhref") || node.attr("href")) {// オートリンクif (!node.parent().parent().children(".GM_fwip_container_mini").length) {node.parent().before($videoContainer);}} else {node.hide();node.parent().before($videoContainer);}}// フルプレイヤーを表示するfunction showFullPlayer() {if ($("#GM_fwip_Rate_container").length) {return;}hideFullPlayer();// サムネ右端のオフセットvar offset = parseInt(node.offset().left) + parseInt(width);var $videoContainer = $("<div>", {class: "GM_fwip_container_full",css: {"background-color": "#000","position": "fixed","top": "20px","right": "20px",// "border": "5px solid #333",// "border-radius": "5px","box-shadow": "0 0 10px 5px rgba(0,0,0,0.5)","z-index": "2000000013",}});var $videoPlayer = $("<video>", {class: "GM_fwip_player",css: {"width": "auto","height": "auto","max-width": $(window).width() - offset - 40,"max-height": $(window).height() - 50,},}).prop({autoplay: true,loop: USE_LOOP,muted: USE_MUTED,preload: true,volume: DEFAULT_VOLUME / 100,// playbackRate: "1.0",}).append($("<source>", {src: href,type: "video/webm",error: function() {// ソースの読み込み失敗イベントonerror();},}));$videoContainer.append($videoPlayer);if (USE_PLAYBACK_RATE_CONTROL) {$videoPlayer.on("timeupdate", function() {// 再生速度変更$(this).prop("playbackRate", $("#GM_fwip_Rate").val());});}if (USE_TIME_DISPLAY) {$videoPlayer.on("loadedmetadata", function(){// メタデータ読み込み完了イベントshowDuration($(this).get(0));}).on("timeupdate", function() {// 再生位置変更イベントshowCurrentTime($(this).get(0));});$videoContainer.append($("<div>", {class: "GM_fwip_time_container",css: {"font-size": "6pt","font-family": "arial,helvetica,sans-serif",postion: "relative","text-align": "right",color: "#fff",}}).append($("<span>", {class: "GM_fwip_time_current"})).append($("<span>").text("/")).append($("<span>", {class: "GM_fwip_time_duration",})));}$("body").append($videoContainer);// 動画の長さを表示するfunction showDuration(video) {var webm_duration = parseTime(video.duration);$(".GM_fwip_time_duration").text(webm_duration);}// 再生時間を表示するfunction showCurrentTime(video) {var currenttime = parseTime(video.currentTime);$(".GM_fwip_time_current").text(currenttime);}// エラー表示function onerror() {$videoContainer.children().remove();$videoContainer.append($("<p>", {text: "動画が読み込めませんでした",class: "GM_fwip_error",css: {"text-align": "center","background-color": "#fff","color": "#c00"}}));}}// フルプレーヤーを消すfunction hideFullPlayer() {var $container = $(".GM_fwip_container_full");if ($container.length) {$container.remove();}}}// 設定function config() {// 設定画面GM_config.init("futaba WebM inline playerオプション<br>" +"(設定反映には[Save]ボタン押下後にページの再読み込みが必要です)", {"USE_LOOP" : {"section": ["共通"],"label" : "ループ再生を有効にする","type" : "checkbox","default" : USE_LOOP},"DEFAULT_VOLUME" : {"label" : "デフォルトの音量（範囲は0～100。ミュートの設定が優先されます。）","type" : "int","default" : DEFAULT_VOLUME},"USE_MUTED" : {"label" : "ミュート状態で再生する","type" : "checkbox","default" : USE_MUTED},"USE_AUTOLINK" : {"label" : "赤福・ふたクロのオートリンク文字列に反応する","type" : "checkbox","default" : USE_AUTOLINK},"USE_FULLPLAYER" : {"section": ["フルサイズプレーヤー(画面右上のスペースに表示される大きいサイズのプレーヤー)"],"label" : "フルサイズプレーヤーを使用する(オフにするとミニサイズプレーヤーが有効になります。)","type" : "checkbox","default" : USE_FULLPLAYER},"USE_TIME_DISPLAY" : {"label" : "動画の下に再生時間を表示する","type" : "checkbox","default" : USE_TIME_DISPLAY},"USE_PLAYBACK_RATE_CONTROL" : {"label" : "再生速度コントロールを有効にする(実験的)","type" : "checkbox","default" : USE_PLAYBACK_RATE_CONTROL},"USE_AUTOPLAY" : {"section": ["ミニサイズプレーヤー(サムネ画像と置き換わるプレーヤー)"],"label" : "マウスオーバーで再生開始する","type" : "checkbox","default" : USE_AUTOPLAY},"USE_CONTROLS" : {"label" : "コントロールを表示する","type" : "checkbox","default" : USE_CONTROLS},"USE_CLOSE_ON_CLICK_OUTSIDE" : {"label" : "動画の外側をクリックして動画を閉じる","type" : "checkbox","default" : USE_CLOSE_ON_CLICK_OUTSIDE},"USE_LIMIT_SIZE" : {"label" : "動画のサイズをサムネ画像と同サイズに制限する","type" : "checkbox","default" : USE_LIMIT_SIZE}});// 設定値読み込みUSE_FULLPLAYER = GM_config.get("USE_FULLPLAYER");USE_LOOP = GM_config.get("USE_LOOP");USE_AUTOPLAY = GM_config.get("USE_AUTOPLAY");USE_CONTROLS = GM_config.get("USE_CONTROLS");if (!GM_config.get("DEFAULT_VOLUME") || GM_config.get("DEFAULT_VOLUME") > 100) {DEFAULT_VOLUME = 100;GM_config.set("DEFAULT_VOLUME", 100);} else {DEFAULT_VOLUME = GM_config.get("DEFAULT_VOLUME");}USE_MUTED = GM_config.get("USE_MUTED");USE_TIME_DISPLAY = GM_config.get("USE_TIME_DISPLAY");USE_PLAYBACK_RATE_CONTROL = GM_config.get("USE_PLAYBACK_RATE_CONTROL");USE_AUTOLINK = GM_config.get("USE_AUTOLINK");USE_LIMIT_SIZE = GM_config.get("USE_LIMIT_SIZE");USE_CLOSE_ON_CLICK_OUTSIDE = GM_config.get("USE_CLOSE_ON_CLICK_OUTSIDE");// 設定ボタンの表示$("body > table:not([class])").before($("<span>", {id: "GM_fwip_configButton",}).append($("<a>", {text: "[WebM設定]",css: {cursor: "pointer",},click : function(){GM_config.open();}})));}// 秒をhh:mm:ss形式で返すfunction parseTime(sec) {var date = new Date(0,0,0,0,0,sec);var time =("0" + date.getHours()).slice( -2 ) + ":" +("0" + date.getMinutes()).slice( -2 ) + ":" +("0" + date.getSeconds()).slice( -2 );return time;}})(jQuery);