Vue.js+Electronでチャプターを設定できるYouTubeプレイヤー

まだ完成していない.

 

概要

自分自身,YouTubeで同じ動画を何回も見る上に,1つの動画内でも同じ箇所を無限に見るタイプなので,自分で自由にチャプターを設定したかった.

 

せっかくなのでVueの勉強がてらそういうYouTubeプレイヤーを作っている.ついでにVuexやElectronにも入門した.

 

ソースコード

github.com

 

できること

例としてこちらの動画を再生する.

【KINGDOM HEARTS III】 D23 Expo Japan 2018 Trailer - YouTube

 

再生中はこんな感じ.動画だけが見えるようにしている.右下のYouTubeマークは一時停止中だけ表示される.

f:id:memonoana:20180323202921p:plain

 

画面上部にマウスを持っていくと上側のバーが表示される.

真ん中の検索欄にYouTube動画ページのURLを入力して検索ボタンを押すことで動画を再生する.

f:id:memonoana:20180323203035p:plain

 

左側のメニューボタンを押すと視聴履歴が表示される.サムネイルをクリックすると動画を再生する.

f:id:memonoana:20180329225834p:plain

 

画面下部にマウスを持っていくとコントローラが表示される.

動画の再生と一時停止,音量の調整,シークバーの移動ができる.

右下の+マークのボタン(チャプターボタン)でチャプターを設定できる.チャプターボタンを押した時の再生時間をチャプターリストに追加する.

f:id:memonoana:20180329230038p:plain

 

チャプターボタンの右隣にある三角ボタンを押すとチャプターリストが開く.再生時間を選択することでその時間に移動する.チャプターリストを開かないと選択できないのは面倒なので,リストを開かなくてもチャプター移動できるようにしたい.

f:id:memonoana:20180329230120p:plain

 

ウィンドウの移動は再生画面をドラッグ.本家みたいに画面クリックで再生/一時停止の切り替えはできない.

 

今後やっていくこと

  • チャプターの選択方法を検討する
  • 再生リストを扱えるようにする(2018/04/21対応)
  • 動画タイトルを表示する(2018/04/21対応)
  • アプリのアイコンがElectronデフォルトのままなのでどうにかする