NHKオンデマンド 動画コントロール

NHK ON DEMAND(NHKオンデマンド)の動画プレイヤーにコントローラーを付けます。

// ==UserScript==
// @name         NHKオンデマンド 動画コントロール
// @namespace    http://tampermonkey.net/
// @version      1.0.8
// @description  NHK ON DEMAND(NHKオンデマンド)の動画プレイヤーにコントローラーを付けます。
// @author       Machaking
// @match        https://www.nhk-ondemand.jp/goods/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=www.nhk-ondemand.jp
// @grant        none
// @license      GPL
// ==/UserScript==

(function() {
    'use strict';

    var $ = window.jQuery;

    $('#moviePlayer .movieContent').after('<div class="movieControl pause"><div>');
    $(".movieControl").append('<button id="btn_back_2"><img src="https://fukutti-webcraft.designers.jp/other/gobackward-60.svg">戻る</button>',
                                   '<button id="btn_back"><img src="https://fukutti-webcraft.designers.jp/other/gobackward-10.svg">戻る</button>',
                                   '<button id="btn_play"><img class="img_play" src="https://fukutti-webcraft.designers.jp/other/play-circle.svg"><img class="img_pause" src="https://fukutti-webcraft.designers.jp/other/pause-circle.svg">再生</button>',
                                   '<button id="btn_forward"><img src="https://fukutti-webcraft.designers.jp/other/goforward-10.svg">進む</button>',
                                   '<button id="btn_forward_2"><img src="https://fukutti-webcraft.designers.jp/other/goforward-60.svg">進む</button>',
                                   '<style>.HLS-Player.player--start .player__progress { bottom: 0; width: 56.2%; right: 0; left: 0; margin: auto;}.HLS-Player.player--start img {margin:auto; display:block;}.play .img_play, .pause .img_pause{display:none;}#btn_play {margin: auto 15px;}div#moviePlayer .inner-wide .movieContent {  float: none;}.HLS-Player {  width: 100%;  height: auto;}.HLS-Player .player__video {  position: static;}div#moviePlayer .inner-wide .side {  margin-left: 0;}div#moviePlayer {    position: relative;    background: #191919;}div#moviePlayer .nextmovie {    width: fit-content;}.movieControl {    display: flex;    justify-content: center;    padding: 0.5rem;    gap: 0.5rem;}.movieControl button {    padding: 0.4rem 0.8rem;    cursor: pointer;    border-radius: 5px;    border: none;    display: flex;    align-items: center;    font-size: 0.7rem;}.movieControl button img {    max-width: 30px;    margin-right: 3px;}#btn_pause {    margin-right: 15px;}</style>');

    function noscroll(e){
        e.preventDefault();
    }

    function toggleClass(){
        $(".movieControl").toggleClass("pause play");
    }

    $(".movieContent").on({
        "mouseenter": function() {
            $(this).addClass("hover");
            $(".player__controls").addClass("hover");
            document.addEventListener('touchmove', noscroll, {passive: false});
            document.addEventListener('wheel', noscroll, {passive: false});
        },
        "mouseleave": function() {
            $(this).removeClass("hover");
            $(".player__controls").removeClass("hover");
            document.removeEventListener('touchmove', noscroll);
            document.removeEventListener('wheel', noscroll);
        }
    });

    var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
    $(document).on(mousewheelevent,function(e){
        e.preventDefault();
        var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
        var volumeProg = $(".player__volume--display").val();
        var videoElementHover = $(".hover .player__video")[0];
        var volumeHover = $(".hover .player__volume--display, .hover .player__volume--input");

        if (delta < 0){
            // マウスホイールを下にスクロールしたときの処理を記載
            videoElementHover.volume -= 0.03;
            volumeHover.val(volumeProg -= 3);
        } else {
            // マウスホイールを上にスクロールしたときの処理を記載
            videoElementHover.volume += 0.03;
            volumeHover.val(volumeProg += 3);
        }
    });

    document.addEventListener('keydown', function (e) {
        const videoElement = $(".player__video")[0];

        if (e.code == 'KeyW' || e.code == 'ArrowUp') {
            videoElement.volume += 0.05;
        } else if (e.code == 'KeyS' || e.code == 'ArrowDown') {
            videoElement.volume -= 0.05;
        } else if (e.code == 'KeyA' || e.code == 'ArrowLeft') {
            videoElement.currentTime -= 10;
        } else if (e.code == 'KeyD' || e.code == 'ArrowRight') {
            videoElement.currentTime += 10;
        } else if (e.code == 'Space') {
            toggleClass();
        }
    });

    $(document).on('click', function (e) {
        const videoElement = $(".player__video")[0];
        const btn_play = $("#btn_play");
        const btn_back = $("#btn_back");
        const btn_forward = $("#btn_forward");
        const btn_back_2 = $("#btn_back_2");
        const btn_forward_2 = $("#btn_forward_2");
        const start_img = $(".HLS-Player.player--start > img:nth-child(2)");

        if (btn_play[0].contains(e.target)) {
            if ($(".HLS-Player.player--start")){
                $(".HLS-Player.player--start img").trigger("click");
            }

            toggleClass();

            if (videoElement.paused) {
                videoElement.play();
            } else {
                videoElement.pause();
            }
        } else if (btn_back[0].contains(e.target)) {
            videoElement.currentTime -= 10;
        } else if (btn_forward[0].contains(e.target)) {
            videoElement.currentTime += 10;
        } else if (btn_back_2[0].contains(e.target)) {
            videoElement.currentTime -= 60;
        } else if (btn_forward_2[0].contains(e.target)) {
            videoElement.currentTime += 60;
        } else if (e.target === videoElement) {
            toggleClass();
        }
    });

    $(function() {
        let mutationObserver = new MutationObserver(function() {
            if ($('.HLS-Player .player__video').length) {
                $(".player__video")[0].volume = 0.05;
                $(".player__volume--display").val(5);
                mutationObserver.disconnect();
            }
        });

        mutationObserver.observe(
            document.getElementById('moviePlayer'),
            {
                childList: true,
                subtree: true
            }
        );
    });
})();