前提・実現したいこと
・YouTubeの動画再生をフォームアプリケーション上で行いたい
・読み込んだYouTube動画の「再生」「停止」「音量変更」をアプリケーション側から制御できるようにしたい。
上記を実現できるWindowsフォームアプリを作成したいのですが、後述の問題で実装できませんでした。
ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
開発環境
VisualStudio 2019 C# フォームアプリケーション(.Net)
現状実現できているもの・実現具合
① YouTube動画をダウンロードしてメディアプレイヤーやDirectXで再生
これは実装出来ましたが、下記問題が残るためNG案となりました。
・ダウンロードに時間がかかる。 ・そもそもYouTubeは公式のPremiumサービス以外でのダウンロードを規約で禁じている
② ブラウザを埋め込み、下記Youtube IFrame API を用いて表示
こちらも実装できましたが、調べても「アプリケーション側から音量等を制御する方法」が分かりませんでした。
Youtube IFrame API: https://developers.google.com/youtube/player_parameters?hl=ja
該当のソースコード
ダウンロードの方はそもそも規約違反なのでブラウザ埋め込みの方を記載します。
ブラウザにはChromiumを使用しています。
下記はテスト用に、フォーム上にChromiumを置いただけのアプリとなっています。
- Form1.cs
C#
using System; using System.IO; using System.Threading; using System.Threading.Tasks; using System.Windows.Forms; using CefSharp.WinForms; namespace TestYoutubePlayer { public partial class Form1 : Form { public Form1() { InitializeComponent(); string curDir = Directory.GetCurrentDirectory(); Uri uri = new Uri(String.Format("file:///{0}/playPage.html", curDir)); this.chromiumWebBrowser1.LoadUrl(uri.ToString()); } } }
- playPage.html
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>YouTubeViewer</title> </head> <body> <div id="player"></div> <script type="text/javascript" src="javascriptの絶対パス"></script> </body> </html>
- script.js
javascript
// 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) // after the API code downloads. var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId: 'YouTubeのvideoID', events: { 'onReady': onPlayerReady, } }); } // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { event.target.playVideo(); }
解決の方向性
現状で最も実現に近いのが上記のブラウザを用いた方法のため、そちらを記載しましたが、ブラウザにこだわる必要はありません。
どんな方法でも(利用するサービスすべての規約に引っかからないものに限る)目的の機能を実装できれば問題ありません。
実装方法に心当たりがありましたら、ご協力お願いいたします。
まだ回答がついていません
会員登録して回答してみよう