ElectronでフレームレスなYouTubeプレイヤーを作ってみた

はじめに

MacのQuick Playerみたいな感じのYouTubeプレイヤーが欲しかったので作りました。
名前は、「Shuvi」です。

ダウンロードは下記のアドレスから。
https://github.com/yuki540net/Shuvi/releases/tag/v0.0.1

Mac/Windows/Linux向けにパッケージしていますが。Mac以外は動作確認していないので動作の保証はできません。

動作確認

ElectronでフレームレスなYouTubeプレイヤーを作りました。
自由にリサイズできるのが特徴です。
名前は、「Shuvi」です。

GitHub: https://t.co/Bksmy2HZFw
Download: https://t.co/HNHLcSMifc pic.twitter.com/ZAibALDOme

— yuki540 (@eriri_jp) 2017年5月13日

内容

動画の再生部分は、YouTubeのiframe APIを使いました。

提供されているJavaScriptファイルを読み込んで、

<script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflHJ3SDg/www-widgetapi.js"></script> 

YT.Playerを使えば、iframeが埋め込まれます。
あとは、playerを使って、再生・停止などを各コンポーネントから制御すれば簡単にプレイヤーを作ることができます。

player = new YT.Player 'player', {
  width   : width
  height  : height
  videoId : '動画ID'
  events  : {
    onReady: (e) =>
      console.log '読み込み終了'
  }
}

YouTube iframe APIのリファレンスは下記のアドレスです。
https://developers.google.com/youtube/iframe_api_reference?hl=ja

YouTube iframeのパラメータ類は下記のアドレスです。
https://developers.google.com/youtube/player_parameters?hl=ja

Shuvi - シュヴィ

ということで、完成したものがこちらです。
よくある動画再生プレイヤーのUIですね。

動画の再生は、上のテキストボックスにYouTubeの動画URLを入力し、検索アイコンのボタンをクリックするだけです。

タイトルバーの右のメニューアイコンのボタンをクリックすると、過去に再生した動画の履歴を見ることができ、再度URLを入力することなく、動画を再生することができます。

また、Shuviの特徴は、大きさや形にとらわれることなく、ウィンドウをリサイズすることができることです。
作業スペースにあった動画サイズで視聴することができます。

おわりに

技術内容がほとんどない記事で申し訳ないのですが、YouTube　iframe APIを使ったソフトウェアを作ってみてすごく楽しかったので、これから別のものも作ってみようと思います。

Shuviも、もうちょっと便利にプレイリストなんかを追加できるよう開発していきたいと思います。

Shuviのソースコードは、GitHubで公開してますので、よければStarください。
GitHub: https://github.com/yuki540net/Shuvi
Twitter: @eriri_jp