[試作版] YouTube動画をVR化 (疑似3D化) できるブックマーク機能を作成しました。

概要
前準備
YouTube動画の疑似3D化
VR化画面の説明
おすすめの使い方
相性の良かった動画集

概要

ブックマークの中にはブックマークレットと呼ばれる、特定のプログラムを呼び出す機能を持ったブックマークが存在します。

本記事で提供するブックマークレットは、YouTube動画を2画面に複製し、視点が異なって見えるように表示するというものです。

スマホをVRゴーグルにするケースに入れて、2画面を覗くと、(動画との相性もありますが) 動画が3Dに見えます。

例えば、下記の画面が表示されます。

前準備

対応機種の確認と注意点

AndroidスマホのGoogle Chrome対応
YouTubeアプリではなく、Google ChromeでYouTubeを表示する必要があるため、YouTubeアプリは無効化 (または削除) する必要があります。無効化方法は後述します。
iPhoneのGoogle Chromeでも動作する可能性はありますが、未確認です。
本ブックマークレットは試作品ですので、自己責任でご利用ください。

スマホをVRゴーグルにするケースを準備

どんな種類のケースでも構いませんが、例えば下記の広告リンクのものをAmazonで購入するのはいかがでしょうか。

リンク

YouTubeアプリの無効化

Androidの「設定」から、「アプリ」→「アプリ管理」→「YouTube」と表示し、「無効化」ボタンを押します。(有効化したい場合も同じ手順で元に戻せます)

ブックマークレットの登録

下記の手順でブックマークレットをGoogle Chromeに登録します。

Google Chromeで何かWebページを表示し、そのWebページをブックマークします。これがブックマークレットを登録するための仮の枠となります。
登録したブックマークを編集します。まず、ブックマークの名前を分かりやすいものに変更します。例えば、「VR化ブックマークレット」とします。次に、URLを下記の「javascript:」から始まり、「();」で終わる長い一行文に変更します

VR化ブックマークレット

(バージョン: 20241129)

javascript:(function(){if(!location.hostname.includes('youtube.com')){alert('YouTube%E3%81%AE%E3%81%BF%E5%AF%BE%E5%BF%9C');return}let v=document.querySelector('video');if(!v){alert('%E5%8B%95%E7%94%BB%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93');return}const g=v.getBoundingClientRect();const o={p:v.parentElement,n:v.nextSibling,s:v.style.cssText,c:v.className,pc:v.parentElement.className,px:v.parentElement.style.cssText,w:v.style.width,h:v.style.height,o:v.style.position,t:v.style.transform,d:v.style.display,l:v.style.left,m:v.style.top,r:v.style.right,x:g.x,y:g.y};const w=document.createElement('div');w.style.cssText='position:fixed;inset:0;background:#000;z-index:999999;display:flex;justify-content:center;align-items:center';let%20p=.015,z=1.25,a=1;const%20e=r=%3E{const%20d=document.createElement('div');d.style.cssText='position:relative;width:50%;height:100%;display:flex;center;background:#000;overflow:hidden';const%20c=document.createElement('canvas');c.style.cssText='height:100%;width:auto';const%20x=c.getContext('2d');const%20u=()=%3E{if(!a)return;v=document.querySelector('video');if(v&&v.videoWidth){if(c.width!=v.videoWidth){c.width=v.videoWidth;c.height=v.videoHeight}try{x.drawImage(v,0,0)}catch{}}requestAnimationFrame(u)};u();d.appendChild(c);return%20d},l=e(),r=e();w.appendChild(l);w.appendChild(r);const%20t=()=%3E{const%20s=p*100;l.style.transform=%60translateX(${s}%)%60;r.style.transform=%60translateX(-${s}%)%60;l.querySelector('canvas').style.transform=%60scale(${z})translateX(-${s}%)%60;r.querySelector('canvas').style.transform=%60scale(${z})translateX(${s}%)%60};t();const%20c=document.createElement('div');c.style.cssText='position:fixed;top:10px;right:10px;display:flex;gap:10px;z-index:1000000';const%20s=document.createElement('input');s.type='range';s.min=0;s.max=100;s.value=35;s.style.width='100px';s.oninput=e=%3E{p=e.target.value/1000;z=1.25+e.target.value/500;t()};const%20b=document.createElement('button');b.textContent='%C3%97';b.style.cssText='background:rgba(255,255,255,.5);border:0;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:20px;display:flex;justify-content:center;align-items:center;line-height:1;padding:0;text-align:center';b.onclick=()=%3E{a=0;v=document.querySelector('video');if(o.n)o.p.insertBefore(v,o.n);else%20o.p.appendChild(v);v.parentElement.className=o.pc;v.parentElement.style.cssText=o.px;requestAnimationFrame(()=%3E{v.style.cssText=o.s||'';v.style.position=o.o||'';v.style.transform=o.t||'';v.className=o.c||'';const%20f=document.getElementById('movie_player');if(f&&(f.classList.contains('ytp-fullscreen-mode')||f.classList.contains('ytp-small-mode'))){v.style.cssText=o.s;v.style.left=o.l;v.style.top=o.m}else{const%20h=document.querySelector('.html5-main-video');if(h)h.style.cssText=o.s}});w.remove()};c.append(s,b);const%20y=document.createElement('div');y.style.cssText='position:fixed;bottom:20px;right:20px;display:flex;gap:10px;background:rgba(0,0,0,.5);padding:10px;border-radius:20px';['%E2%8F%AA','%E2%8F%B8','%E2%8F%A9'].map(i=%3E{const%20n=document.createElement('button');n.textContent=i;n.style.cssText='background:rgba(255,255,255,.2);border:0;color:#fff;padding:8px%2016px;cursor:pointer;border-radius:12px;font-size:16px;min-width:40px';n.onclick=()=%3E{v=document.querySelector('video');if(!v)return;if(i=='%E2%8F%AA')v.currentTime-=5;else%20if(i=='%E2%8F%A9')v.currentTime+=5;else{v.paused?v.play():v.pause();n.textContent=v.paused?'%E2%96%B6':'%E2%8F%B8'}};if(i=='%E2%8F%B8'){new%20MutationObserver(()=%3E{v=document.querySelector('video');if(v){v.addEventListener('play',()=%3En.textContent='%E2%8F%B8');v.addEventListener('pause',()=%3En.textContent='%E2%96%B6')}}).observe(document.body,{childList:1,subtree:1});n.textContent=v.paused?'%E2%96%B6':'%E2%8F%B8'}y.appendChild(n)});w.append(c,y);document.body.appendChild(w)})();

YouTube動画の疑似3D化

次の手順でYouTube動画を疑似3D化します。

AndroidスマホのGoogle ChromeからYouTubeを開きます。
疑似3D化したいYouTube動画を再生します。スマホを横画面で使用することを推奨します。
動画画面 (再生中・停止中を問わない) にて、Google ChromeのURL欄にブックマークレットの名前を入力し、起動します。例えば、先ほどの「VR化ブックマークレット」と入力すると、ブックマークの候補として現れるので押します。
画面が2画面に分かれます。画面の右下に再生ボタンがあるので、動画が停止中の場合には押します。
スマホをVRゴーグルにのせて、メガネ部分を覗き込み、両目の視点が重なるようにスマホの左右位置、VRゴーグルのレンズの位置を調整します。
以上の操作により、動画との相性が良ければ、その動画が3Dに見えるはずです。

VR化画面の説明

右上のバツボタン: VR画面を閉じて通常画面に戻ります
右上のスライダー: 3Dの深さを調整します。左側が浅く、右側が深い設定となります。
右下の3ボタン: 左から、5秒早戻しボタン、再生・停止ボタン、5秒早送りボタン、となります。

相性の良かった動画集

下記の動画は個人的に3Dに見えやすいと思ったので、おすすめです。
下記動画をYouTubeの公開再生リストにしてみました。

上記を含め、おすすめの動画は私ILab-01のYouTube再生リストに入れておきます。
皆様もおすすめの動画を見つけたらコメントください。再生リストに入れてみます。

VR化おすすめ再生リスト