【Xmasのプレゼント交換に】YouTube再生を指定した秒数で停止するブックマークレット

はじめに

みなさん、こんにちは。
今回はYouTube動画の再生を停止するブックマークレットを作ったのでご紹介します。

これからクリスマスのプレゼント交換をする方などの参考になれば幸いです。

ブックマークレットとは

概要

• ブックマークに保存して実行する小さなJavaScriptコード

ブックマークレットは、ブラウザのブックマーク機能を利用して保存・実行する小さな JavaScriptコード のことです。通常のウェブページとは異なり、現在開いているページの内容を操作したり変更したりするための簡易的なスクリプトとして動作します。

ブックマークレットの書き方

概要

• コードはjavascript:というプレフィックスから始める
• 即時実行関数の形式で記述する
• ブックマークを新規作成し、URL部分にコードを記述する

JavaScriptコードを準備する

ブックマークレットでは、コードをjavascript:というプレフィックスで始めます。さらに、複数の命令をまとめて安全に実行するため、即時実行関数を使って記述します。

javascript:(()=>{alert('xxxx')})();

ブックマークを新規作成する

次に、このコードをブラウザのブックマークとして保存します。

ブックマークマネジャーなどから新しいブックマークを作成します。

名前にブックマークレットの名前を任意に指定します。URLに用意したコードを貼り付けます。

保存して完了です。

YouTube動画の再生を停止するコード

概要

• prompt関数で停止までの秒数を入力で受け取る
• Webページ内のvideo要素を取得する
• 停止秒数をミリ秒に変換
• setTimeout を使って指定ミリ秒後にvideoのpauseメソッドにtrueを渡して停止する

これは現在開いているWebページに埋め込まれている video ****要素を指定した秒数後に停止するブックマークレットです。YouTubeの動画はvideo 要素なので、それを取得して停止の操作をします。

javascript:(()=>{
    const second = prompt('停止までの秒数を入力してね');
    const video = document.querySelector('video');
    const ms = second * 1000;
    console.log(`${second}秒後に停止`);
    setTimeout(()=>video.pause(true),ms);    
})()

YouTubeで動画を再生した状態でブックマークからブックマークレットを実行します。

おわりに

これで無事にクリスマス会のプレゼント交換ができました。

皆さんもお試しください。