youtubeをマウスを使わずに操作する方法

質問

タイトルの通りです。
通常youtubeプレイヤーは再生ボタンをクリックして動画を再生したりシークバーをドラッグして動画をシークさせますよね。
どの動作もマウスが必要ですが、これをマウス以外の方法でできるか、というのが今回の質問です。

例えば「スペースキーを押すと動画が自動で再生する」方法です。

一応、動画再生ページを表示する前にhtmlを解析し、「スペースキーが押されれば再生を実行する関数を呼ぶ関数」を埋め込んで動的に表示すればいけるんじゃないかな、と自分では考えています。
また、今回対象とするの他サイトの埋め込みプレイヤーではなくyoutube本サイトの動画再生ページのプレイヤーなので、youtubeのAPIは使えないと思います。
言語は特に問いませんが、できればjavascriptで書きたいです。

よろしくお願いします。

回答No.3

DOUGLAS_ · ベストアンサー

＃2 DOUGLAS_ です。

＞この仕組みはどうなっているのでしょうか。
　大変お待たせいたしました。

１）Google Chrome で youtube の動画を開き、[Google Chrome の設定] ボタンをクリック、[ツール(L)] - [デベロッパー ツール(D)] をクリックします。

２）WEB画面とデベロッパーツールの境界線を半分半分ぐらいの位置までドラッグします。

３）デベロッパーツールの [Sources] タブをクリックし、右ペインから [Event Listener Breakpoints] をクリックして開き、[Keyboard] の左側の三角をクリックして [keydown] にでもチェックを付けます。

４）WEB画面の動画をクリックして動画を再生し、#2 に記載したいずれかのキーを押下します（ここでは「5」を押下してみました）。

５）すると、デベロッパーツールの左ペインにある「～～.js」という Javascript ファイルの中の途中でストップします。

６）[F11] キーを何十回も押下して ステップインデバッグしてみてください。

７）私の試した動画の場合は
http://s.ytimg.com/yts/jsbin/www-embed_core_module-vflJ-UMff.js
という jsファイルの中で、30行目、25行目(約20回)、26行目(約20回)、27行目(4回)、30行目(2回)、85行目(6回)、84行目、{84行目(2回)、23行目(4回)}(7回)、23行目、84行目、85行目、30行目、とスクリプトが遷移し、最後に、押下したキー「5」が有効になりました。

８）ここに登場したスクリプトは、文字数の関係で一部省略いたしましたが、ザッと下記の通りです。

９）「この仕組みはどうなっているのでしょうか」とのことですが、私の回答は「よく分かりません」です。

　ただ、下記のスクリプトをザッと見た感想ですが、恐らくですが、
　　ａ）キーボードからの入力に対して、
　　ｂ）押下されたキーの keyCode を取得し、
　　ｃ）それを数値に置き換えて、
　　ｄ）数値によって、フラッシュ上の対応する位置（x座標,y座標）を決定し、
　　ｅ）クリッカブルマップのような感覚で、マウスで各ボタンをクリックしたのと同じ効果を出している
のではないかと思われます。

10）残念ながら、私には、下記のコードを解読する元気がございませんので、ご興味がおありのようでしたら、後は、punteroさんの自力で解読なさってみてください。

23行目：function EMBsb(a,b,c,d){c||(a=a.parentNode);c=d==EMBd;for(var e=0;a&&(c||e<=d);){if(b(a))return a;a=a.parentNode;e++}return EMBd}function EMBcb(a){this.a=a||EMBf.document||document}EMBcb.prototype.createElement=function(a){return this.a.createElement(a)};～～

25行目：function EMBBb(){var a=document;if("fullScreenElement"in a)return a.fullScreenElement;if("mozFullScreenElement"in a)return a.mozFullScreenElement;if("msFullScreenElement"in a)return a.msFullScreenElement;if("oFullScreenElement"in a)return a.oFullScreenElement;if("webkitFullScreenElement"in a)return a.webkitFullScreenElement};function EMBCb(a){if(a=a||window.event){for(var b in a)b in EMBDb||(this[b]=a[b]);this.scale=a.scale;this.rotation=a.rotation;this.ma=a;if((b=a.target||a.srcElement)&&3==b.nodeType)b=b.parentNode;this.target=b;if(b=a.relatedTarget)try{b=b.nodeName&&b}catch(c){b=EMBd}else"mouseover"==this.type?b=a.fromElement:"mouseout"==this.type&&(b=a.toElement);this.relatedTarget=b;this.clientX=a.clientX!=EMBb?a.clientX:a.pageX;this.clientY=a.clientY!=EMBb?a.clientY:a.pageY;if(document.body&&document.documentElement){b=

26行目：document.body.scrollLeft+document.documentElement.scrollLeft;var d=document.body.scrollTop+document.documentElement.scrollTop;this.pageX=a.pageX!=EMBb?a.pageX:a.clientX+b;this.pageY=a.pageY!=EMBb?a.pageY:a.clientY+d}this.keyCode=a.keyCode?a.keyCode:a.which;this.charCode=a.charCode||("keypress"==this.type?this.keyCode:0);this.altKey=a.altKey;this.ctrlKey=a.ctrlKey;this.shiftKey=a.shiftKey;"MozMousePixelScroll"==this.type?(this.wheelDeltaX=a.axis==a.HORIZONTAL_AXIS?a.detail:0,this.wheelDeltaY=a.axis==

27行目：a.HORIZONTAL_AXIS?0:a.detail):window.opera?(this.wheelDeltaX=0,this.wheelDeltaY=a.detail):0==a.wheelDelta%120?"WebkitTransform"in document.documentElement.style?window.a&&0==navigator.platform.indexOf("Mac")?(this.wheelDeltaX=a.wheelDeltaX/-30,this.wheelDeltaY=a.wheelDeltaY/-30):(this.wheelDeltaX=a.wheelDeltaX/-1.2,this.wheelDeltaY=a.wheelDeltaY/-1.2):(this.wheelDeltaX=0,this.wheelDeltaY=a.wheelDelta/-1.6):(this.wheelDeltaX=a.wheelDeltaX/-3,this.wheelDeltaY=a.wheelDeltaY/-3)}}EMB=EMBCb.prototype;

30行目：function EMBL(a,b,c,d){if(!a||!a.addEventListener&&!a.attachEvent)return"";d=!!d;var e=EMBGb(a,b,c,d);if(e)return e;var e=++EMBFb.count+"",f=!(!("mouseenter"==b||"mouseleave"==b)||!a.addEventListener||"onmouseenter"in document),g;g=f?function(d){d=new EMBCb(d);if(!EMBsb(d.relatedTarget,～～

84行目：b.width=Math.max(g.width,0)+"px",b.height=Math.max(g.height,0)+"px")};var EMBDd={},EMBEd="ontouchstart"in document;～～

85行目：function EMB1(a){var b="mouseover"==a.type&&"mouseenter"in EMBDd||"mouseout"==a.type&&"mouseleave"in EMBDd,c=a.type in EMBDd||b;if("HTML"!=a.target.tagName&&c){if(b){var b="mouseover"==a.type?"mouseenter":"mouseleave",c=EMBDd[b],d;for(d in c.H){var e=EMBFd(b,d,a.target);e&&!EMBsb(a.relatedTarget,～～

回答No.2

DOUGLAS_

＞これをマウス以外の方法でできるか

　一番最初に、動画の部分を１回だけクリックしてください。
　後は、下記のキーにより、操作することができます。

0 ～ 9　：　?/10 の位置に移動
K または SPACE　：　再生・停止
L または 右矢印 　：　進む
J または 左矢印 　：　戻る
M　：　ミュートの ON OFF
F　：　フルスクリーンモードに移行
ESC　：　フルスクリーンモードの解除

　なお、上記を自分で発見した後でググってみましたが、いろいろと紹介されてますね。
http://www.google.co.jp/search?hl=ja&q=youtube+%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%AD%E3%83%BC&lr=lang_ja

お礼

回答ありがとうございます。
ショートカットキーはもうあるんですね。
この仕組みはどうなっているのでしょうか。

回答No.1

b0a0a

createEvent('MouseEvent')を使ったり
HTML5版にして普通に操作すればいいと思います

お礼

回答ありがとうございます。
>>HTML5版にして普通に操作すればいいと思います
普通とはどういうことでしょうか？