niconico click to play

動画画面をクリック、タップで再生停止
当前为 2020-12-16 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         niconico click to play
// @namespace    http://tampermonkey.net/
// @version      0.1.1
// @description  動画画面をクリック、タップで再生停止
// @author       y_kahou
// @match        https://www.nicovideo.jp/watch/*
// @grant        none
// @noframes
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// ==/UserScript==

var $ = window.jQuery;
$.fn.tap = function() {
    return $(this).on({
        touchstart: function(e) {
            $(this).data('tap', true)
            var to = setTimeout(() => {
                $(this).data('tap', false)
                $(this).trigger('subfocus')
            }, 200)
            $(this).data('tap_to', to)
        },
        touchmove: function(e) {
            if ($(this).data('tap')) {
                $(this).trigger('subfocus')
                $(this).data('tap', false)
                clearTimeout($(this).data('tap_to'))
            }
        },
        touchend: function(e) {
            if ($(this).data('tap')) {
                $(this).data('tap', false)
                clearTimeout($(this).data('tap_to'))
                e.type = 'temp'
                $(this).trigger(e)
                e.preventDefault()
            }
        },
        temp: function(e) {
            e.touches = e.changedTouches
            e.changedTouches = void(0)
            if ($(this).data('dbltap')) {
                $(this).data('dbltap', false)
                clearTimeout($(this).data('dbltap_to'))
                e.type = 'doubletap'
                $(this).trigger(e)
            } else {
                $(this).data('dbltap', true)
                var to = setTimeout(() => {
                    $(this).data('dbltap', false)
                    e.type = 'tap'
                    $(this).trigger(e)
                }, 200)
                $(this).data('dbltap_to', to)
            }
        }
    })
}

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>`

function __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;
}
*/}
function addStyle() {
    // cssを埋め込む先人の知恵
    var css = (__css__).toString()
        .match(/[^]*\/\*([^]*)\*\/\}$/)[1]
        .replace(/\{\*/g, '/*')
        .replace(/\*\}/g, '*/');
    $('head').append(`<style id="mystyle" type="text/css">${css}</style>`)
}
function getVideo() {
    return new Promise((resolve, reject) => {
        var iv = setInterval(function() {
            var video = document.querySelector('video')
            if (!video || !video.getAttribute('src'))
                return;
            clearInterval(iv);
            resolve(video);
        }, 500)
    })
}
(function() {
    'use strict';
    addStyle();
    
    getVideo().then(video => {
        $('.PlayerContainer').focus()
        $('.InView.VideoContainer').tap()
        .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('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() {
            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', e => { if (e.keyCode == 32) pause_play() })
    })
    
})();