Greasy Fork is available in English.

niconico click to play

ニコニコの画面をクリック、タップで再生停止

// ==UserScript==
// @name         niconico click to play
// @namespace    http://tampermonkey.net/
// @version      0.1.5
// @description  ニコニコの画面をクリック、タップで再生停止
// @author       y_kahou
// @match        https://www.nicovideo.jp/watch/*
// @grant        none
// @noframes
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @require      https://greasyfork.org/scripts/419065-jquerytouchactionex/code/jQueryTouchActionEx.js?version=888835
// @require      https://greasyfork.org/scripts/419955-y-method/code/y_method.js?version=890440
// ==/UserScript==
 
var $ = window.jQuery;
 
const OVER_LAYER = `
<div id="over-layer">
    <div id="play" class="controll-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 13.229 13.229">
            <path d="M13.23 6.615a6.615 6.615 0 0 1-6.615 6.614A6.615 6.615 0 0 1 0 6.615 6.615 6.615 0 0 1 6.615 0a6.615 6.615 0 0 1 6.614 6.615z"/>
            <path d="M10.054 6.615l-5.16 2.978V3.636z" fill="#fff"/>
        </svg>
    </div>
    <div id="pause" class="controll-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 13.229 13.229">
            <g transform="translate(0 -283.77)">
                <circle cx="6.615" cy="290.385" r="6.615"/>
                <path fill="#fff" d="M3.969 287.21h1.852v6.35H3.969zM7.408 287.21H9.26v6.35H7.408z"/>
            </g>
        </svg>
    </div>
</div>`
 
const __CSS__ = `
/* プレミアム催促 */
.PreVideoStartPremiumLinkContainer,
.PreVideoStartPremiumLinkOnEconomyTimeContainer,
.SeekBarHoverItem:not(.SeekBarTimeTip)
{
    display: none;
}
#over-layer {
    pointer-events: none;
    z-index: 51;
    position: absolute;
    width: 100%;
    height: 100%;
}
.controll-button {
    visibility: hidden;
    opacity: 0.8;
    width: 10%;
    height: 10%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.controll-button.click {
    opacity: 0;
    transform: scale(2);
    transition: linear 500ms;
}`;
addStyle('nicoclick', __CSS__);
 
 
// 動画にフォーカスがない場合、スペースで自動で動画が見えるとこまでスクロールして再生/停止
$('html').on('keydown', e => {
    if (e.keyCode != 32)
        return
    e.preventDefault()
    var pos = $(".HeaderContainer-row").eq(1).position().top
    $(window).first().scrollTop(pos)
    $('.PlayerContainer').focus_()
    $('.PlayerPlayButton, .PlayerPauseButton').click_()
})
 
getVideo().then(v => {
    var video = v[0]
    
    $('.VideoSymbolContainer-canvas').doubletap()
    
    // 画面タッチクリックで再生停止
    .on('tap click', function(e) {
        $('.PlayerPlayButton, .PlayerPauseButton').click_()
    })
    
    // 画面の左右ダブルタップでスキップ
    .on('doubletap', function(e) {
        var lr = ($(this).width() / 2 < e.touches[0].pageX - $(this).offset().left)
        $(lr ? '.PlayerSeekForwardButton' : '.PlayerSeekBackwardButton').click_()
    })
    
    // フルスクリーン&コントローラ非表示時にホールドかパンでコントローラ表示
    .on('hold subfocus', function(e) {
        if ($('.is-fullscreen').length && !$('.is-fixedFullscreenController').length) {
            var container = $(this).parent()
            container.addClass('is-mouseMoving')
            clearTimeout($(this).data('focus_to'))
            var to = setTimeout(() => {
                container.removeClass('is-mouseMoving')
            }, 2000)
            $(this).data('focus_to', to)
        }
    })
    
    // 初回再生でアイコン追加
    $(video).on('play', function() {
        $('.InView.VideoContainer').append(OVER_LAYER)
        $(video).off('play')
    })
    // アイコン処理
    var pause_play = function(e) {
        if (e.type == 'keydown') { // 素のスペースキーのみ許容
            if (e.ctrlKey || e.shiftKey || e.altKey) return
            if (e.keyCode != 32) return
        }
        if (video.paused) {
            $('#pause').css('visibility', 'hidden' ).removeClass('click')
            $('#play' ).css('visibility', 'visible').addClass('click')
        } else {
            $('#pause').css('visibility', 'visible').addClass('click')
            $('#play' ).css('visibility', 'hidden' ).removeClass('click')
        }
    }
    $('.ControllerContainer-inner').on('click', '.PlayerPlayButton, .PlayerPauseButton', pause_play)
    $('.PlayerContainer').on('keydown', pause_play)
})
.catch(err => {
    console.error(err);
})