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

  • 36
    いいね
  • 0
    コメント

はじめに

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

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

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

shuvi.png

動作確認

内容

動画の再生部分は、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ですね。

top.png

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

search.png

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

list.png

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

transform.png

scale.png

おわりに

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

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

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