Safariがタブを再読み込みしてもYouTube動画の進行状況を保存する方法

Safariがタブを再読み込みしてもYouTube動画の進行状況を保存する方法

  • Oligur
  • 0
  • vyzf
Safariがタブを再読み込みしてもYouTube動画の進行状況を保存する方法
  • ハウツー
YouTubeブックマーク
ブックマーク。
写真:ベン・ホワイト/Unsplash

MacとiOSの大きな違いは、Macでは開いているタブが(ほぼ1秒間)開いたままになるのに対し、iPadやiPhoneでは別のアプリ、あるいは別のブラウザタブに切り替えると、大惨事になる可能性があることです。iOSではSafariのタブがすべて破棄され、戻ったときに再読み込みが必要になります。

YouTube動画を途中まで視聴した場合、自動的に最初に戻ってしまいます。でも、Safariに視聴状況を記憶させて、前回視聴を中断した場所からページを再読み込みさせる方法があったらどうでしょう? ついに実現しました! 動画の視聴位置を忘れてしまうのが嫌だったので、YouTube動画の現在位置を保存するブックマークレットを作りました。iPhoneやiPadを再起動しても、全く同じ場所から再読み込みされます。

ブックマークレットとは何ですか?

ブックマークレットとは、クリックするとウェブブラウザでミニアプリが起動する小さなブックマークのことです。現在開いているページをInstapaperアカウントに保存したり、現在開いているサイトだけを対象としたGoogle検索を起動したりするブックマークレットがあるかもしれません。

ブックマークレットを使えば、ページ上のハイライトされたテキストを翻訳したり、ToDoリストに何かを送信したり、その他さまざまなことができます。今日は、YouTube動画の再生位置をブックマークするためにブックマークレットを使ってみましょう。

YouTubeブックマークレットの仕組み

YouTube動画を共有する際、現在の再生時間を共有できます。これは非常に便利です。1時間の動画を共有する際に「面白い部分は13分21秒までスキップして」と伝える代わりに、肝心な場面で動画を一時停止して共有できます。共有パネルの「現在の時間」ボックスにチェックを入れるだけで完了です。リンクをクリックした人は、13分21秒から再生が始まります。

私のブックマークレットはこの機能を利用しています。開始時間付きのYouTubeクリップを共有すると、URLの末尾に開始時間(秒単位)が追加されます。ご覧ください。

開始時間が埋め込まれた YouTube URL。
開始時間が埋め込まれたYouTubeのURL。
写真:Cult of Mac

このビデオ (素晴らしい True Cuckoo から) を視聴したい場合は、このリンクをクリックして 15:43 からご覧ください。

YouTube ブックマーク ブックマークレットは何をしますか?

クリックすると現在の時刻のURLを取得し、その時刻でページをリロードするブックマークレットを作れないかと考えました。そうすれば、時刻がURLの一部になるため、動画はリロードの影響を受けません。Safariを強制終了するか、iPadを再起動すれば、ページがリロードされるときに、タイムコードが含まれた新しいURLが読み込まれます。

試行錯誤(ほとんど失敗)を繰り返した結果、以下のJavaScriptコードにたどり着きました。モバイル版Safariのお気に入りバーにブックマークレットをドラッグすれば、タップするだけで現在の動画をブックマークできます。
javascript:void function(){ytplayer=document.getElementById("movie_player"),ytplayer.pauseVideo();void window.open("https://www.youtube.com/embed/"+document.location.search.substring(3)+"?start="+Math.floor(ytplayer.getCurrentTime()))}();

WordPressの制限により、iPadのお気に入りバーにドラッグできるJavaScriptブックマークレットリンクをここに配置することはできません。上記のコードを使って、昔ながらの方法で追加する必要があります。

表示されたら、YouTubeスポットを保存したいときにいつでもタップしてください。新しいタブが開き、動画の埋め込みバージョンが表示されます。URLには開始時間が埋め込まれています。

欠点と制限

制限事項がいくつかあります。一つは、現在のタブを再読み込みするのではなく、新しいタブを読み込むことです。もう一つは、動画の埋め込みバージョンを使用するため、ブックマークレットを再度使用できないことです。再度使用しようとしても、何も起こりません。

これはほぼ間違いなく、私のJavaScriptスキルの低さが原因です。Web上で見つけたスニペットを寄せ集めて、うまく動くまで少しずつ手直ししただけです。

しかし、ほとんどの用途では非常にうまく機能します。YouTubeのチュートリアル動画を見るときによく使います。中断したところから再開する必要がないので、心配する必要がありません。

もう1点。YouTubeアカウントにログインしている場合は、視聴の進行状況が自動的に保存される可能性があります。私はYouTubeにログインしたことがありません。さらに、コンテンツブロッカーを使ってGoogleとYouTubeのCookieをすべてブロックしているので、どの程度効果があるかは分かりません。

改善にご協力ください

このブックマークレットのコードに改善点がありましたら、メール、Twitter、またはこの投稿のコメント欄でお知らせください。URLt=xxxに該当部分を追加した状態で、同じページを再読み込みしていただければ幸いです。

  1. 近年、macOS も長期間使用されていないアプリや Web ページをサイレントに終了するようになりましたが、iOS ほど積極的ではありません。↩