Youtubeインターフェースを最適化する別の方法

Youtube Centerの最新記事を読んだ後、YouTubeの太いインターフェイスを使いこなす私の方法をhabrasocietyと共有することにしました。





Youtube Centerは確かに優れた拡張機能ですが、Youtube Centerを使用するとさらに顕著に速度が低下し始めます。 Stylishをお届けします-これは、サイトに独自のスタイルを追加するための拡張機能で、habrahabrで既に 書いています。

Firefox： addons.mozilla.org/en-US/firefox/addon/stylish
Chrome： chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
Safari： sobolev.us/stylish （ simpelに感謝）

1. YouTubeで動画を見る

1280x800と1920x1080のモニターに同時に適したスタイルを提供します。 それらを適用すると、Youtubeは次のようになります。



ご覧のとおり、インターフェイスのすべての詳細が1ページに配置されています。 コメントを削除したのは、その中のポイントを見たことがないからです。コメントを残すことができます。 実際にスタイル自体：

/*  */ .player-width { width: 1210px !important; } .player-height { height: 640px !important; } /*    fullscreen */ [data-player-size="fullscreen"] .player-width { width: 100% !important; } [data-player-size="fullscreen"] .player-height { height: 100% !important; } /*    */ #guide { display: none; } #player, #watch7-main-container { padding-left: 30px !important; } /*    embed iframe */ #player.full-frame { padding-left: 0px !important; } /*     About/Share */ #watch-discussion { display: none; } #watch7-action-buttons, #watch7-action-panels { display: none; } /*  related videos */ .watch-wide #watch7-sidebar { margin-top: -642px !important; margin-left: 1240px !important; height: 620px !important; } .video-list-item { margin-bottom: 13px !important; } /*  footer */ #body-container { padding-bottom: 0 !important; } #footer-container { display: none; } 

私はそこで止まらなかった、それから最もおいしい:)

2.オーディオプレーヤーとしてのYouTube

おそらく、あなたはこの投稿を調べて、投稿のヘッダーにある画像を見て、「ビデオはどこに行きましたか？」と自問自答したでしょう。

Youtubeを使って音楽を聴きます。 少し前に、 プレイリスト全体をmp3形式でダウンロードするスクリプトを作成しました 。 ただし、このオプションは、1つのビデオ（プレイリストではない）には適していません。

ビデオを切り取り、オーディオトラックのみを残すと、プロセッサリソースの消費を2〜3倍削減できます。

さらなるアクションは、「ビデオあり」モードと「ビデオなし」モードの高速切り替えを自動化することを目的としています。

2.1。 HTML5の包含

www.youtube.com/html5

2.2。 スタイルをスタイリッシュに追加する

 /*  */ .audio-only .player-width { width: 720px !important; } .audio-only .player-height { height: 40px !important; } /*   */ .audio-only .html5-video-container { display: none; } /*    */ .audio-only .html5-progress-list { height: 35px !important; } /*  sidebar */ .audio-only .watch-wide #watch7-sidebar { display: none; } 

お気づきかもしれませんが、私はプレフィックスクラス.audio-onlyを使用しています。最後のステップは、追加を自動化することです。

2.3。 .audio-onlyクラスを追加するUserScript

すでに十分に書かれた UserScriptsについて、あなたはそれが何であるか知っていると思います。 Alt+Mを押して.audio-onlyクラスを追加/削除する簡単なスクリプトが必要です。

 // ==UserScript== // @name Youtube audio-only switch // @description Toggle audio-only mode for saving cpu resources // @match http://www.youtube.com/* // ==/UserScript== document.body.onkeydown = function(event){ event = event || window.event; var keycode = event.charCode || event.keyCode; // Alt + M if(event.altKey && keycode == 77) { if(document.body.className.match(' audio-only')) document.body.className = document.body.className.replace(' audio-only', ''); else document.body.className += ' audio-only'; } } 

カスタムスクリプトのインストール方法を思い出す必要はありません（名前は* .user.jsである必要があります）。

• Firefox： グリースモンキー
• Chrome：chromeを開く：//拡張機能/そしてそこにスクリプトをドラッグします
• Safari： グリースキット

このトピックに飽きていないことを願っています:)

UPD。 フェザーベータ

artyはコメントでFeather Betaについて言及しました。 実を言うと、この機能については知りませんでした。これは、このトピックで行っていたこと、つまりオプションのインターフェース要素のトリミングを目的としています。

含まれているFeather Betaのカスタムスタイルを書き直しました。

 /*  */ #movie_player { width: 1260px !important; height: 580px !important; } #p { height: 580px !important; } /*    */ #mh, #ct { margin: 0 } #ft { display: none; } /*  sidebar */ #rc { margin-left: 1280px; margin-top: -690px; } /* === audio-only === */ /*  */ .audio-only #movie_player { width: 720px !important; height: 40px !important; } .audio-only #p { height: 50px !important; } /*    fullscreen */ [data-player-size="fullscreen"] #movie_player { width: 100% !important; height: 100% !important; } /*   */ .audio-only .html5-video-container { display: none; } /*    */ .audio-only .html5-progress-list { height: 35px !important; } /*  sidebar */ .audio-only #rc { display: none; }