回答編集履歴

ku__ra__geさん。。。

2022/09/21 11:07

投稿

TN8001

score8534

test CHANGED Viewed

@@ -1,437 +1,218 @@
 > ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
-ku______ra__geさんも指摘されていますが、質問のリンクの前（上？）のページにあります。
+ku__ra__geさんも指摘されていますが、質問のリンクの前（上？）のページにあります。
 [iframe 組み込みの YouTube Player API リファレンス - 動画の再生 |  YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference?hl=ja#%E5%8B%95%E7%94%BB%E3%81%AE%E5%86%8D%E7%94%9F)
 [iframe 組み込みの YouTube Player API リファレンス - プレーヤーの音量の変更 |  YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference?hl=ja#%E3%83%97%E3%83%AC%E3%83%BC%E3%83%A4%E3%83%BC%E3%81%AE%E9%9F%B3%E9%87%8F%E3%81%AE%E5%A4%89%E6%9B%B4)
 > 実装方法に心当たりがありましたら、ご協力お願いいたします。
 特に心当たりはありませんが、ちょっと面白そうなのでやってみました。
 なんでもいいということですので、`WebView2`を使用しました（`CefSharp`は以前苦戦して苦手意識がある^^;
 [WinForms アプリでの WebView2 の使用を開始する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/get-started/winforms)
-```C#
+```cs
 using System;
 using System.Diagnostics;
 using System.IO;
 using System.Windows.Forms;
 using Microsoft.Web.WebView2.Core;
 namespace Questions370144
 {
     public partial class Form1 : Form
     {
         private bool playing;
         private bool seeking;
         public Form1()
-        {
+        {
             InitializeComponent();
             InitializeAsync();
-        }
+        }
         private async void InitializeAsync()
-        {
+        {
             await webView21.EnsureCoreWebView2Async(null);
             webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
             var html = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "index.html");
             webView21.CoreWebView2.Navigate(new Uri(html).AbsoluteUri);
-        }
+        }
         private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
-        {
+        {
             var str = e.TryGetWebMessageAsString();
             Debug.WriteLine(str);
             switch (str.Split(',')[0])
-            {
+            {
                 case "UNSTARTED":
                     progressBar1.Value = 0;
                     progressBar1.Maximum = int.Parse(str.Split(',')[1]);
-                    break;
+                    break;
                 case "ENDED":
                     timer1.Stop();
                     playing = false;
-                    break;
+                    break;
                 case "PLAYING":
                     timer1.Start();
                     playing = true;
-                    break;
+                    break;
                 case "PAUSED":
                     timer1.Stop();
                     playing = false;
-                    break;
+                    break;
                 case "BUFFERING": break;
                 //case "CUED": break;
-            }
+            }
-        }
+        }
         private void button1_Click(object sender, EventArgs e)
-        {
+        {
             webView21.CoreWebView2.ExecuteScriptAsync($"playVideo()");
-        }
+        }
         private void button2_Click(object sender, EventArgs e)
-        {
+        {
             webView21.CoreWebView2.ExecuteScriptAsync($"pauseVideo()");
-        }
+        }
         private void trackBar1_Scroll(object sender, EventArgs e)
-        {
+        {
             webView21.CoreWebView2.ExecuteScriptAsync($"setVolume({trackBar1.Value})");
-        }
+        }
         private void checkBox1_CheckedChanged(object sender, EventArgs e)
-        {
+        {
             if (checkBox1.Checked)
-            {
+            {
                 checkBox1.Text = "????";
                 webView21.CoreWebView2.ExecuteScriptAsync($"mute()");
-            }
+            }
             else
-            {
+            {
                 checkBox1.Text = "????";
                 webView21.CoreWebView2.ExecuteScriptAsync($"unMute()");
-            }
+            }
-        }
+        }
         private void progressBar1_MouseDown(object sender, MouseEventArgs e)
-        {
+        {
             seeking = true;
             timer1.Stop();
             var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
             progressBar1.Value = value;
             webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
-        }
+        }
         private void progressBar1_MouseUp(object sender, MouseEventArgs e)
-        {
+        {
             seeking = false;
             if (playing) timer1.Start();
             var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
             progressBar1.Value = value;
             webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, true)");
-        }
+        }
         private void progressBar1_MouseMove(object sender, MouseEventArgs e)
-        {
+        {
             if (seeking)
-            {
+            {
                 var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
                 progressBar1.Value = value;
                 webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
-            }
+            }
-        }
+        }
         private async void timer1_Tick(object sender, EventArgs e)
-        {
+        {
             var str = await webView21.CoreWebView2.ExecuteScriptAsync($"getCurrentTime()");
             Debug.WriteLine(str);
             if (double.TryParse(str.Trim('"'), out var value)) progressBar1.Value = (int)value;
-        }
+        }
-    }
+    }
 }
 ```
 Form1.Designer.csまで入れると、１万字を超えてしまうので省略します。
 以下のコントロールがあるとする（イベントも適宜設定のこと）
 * WebView2 webView21
 * Button button1（再生ボタン）
 * Button button2（ポーズボタン）
 * CheckBox checkBox1（ミュートトグルボタン）
 * TrackBar trackBar1（音量）
 * ProgressBar progressBar1（シークバー）
 * Timer timer1（シークバーを進めるタイマ）
-index.html
+```html:index.html
-```html
 <!DOCTYPE html>
 <html>
 <body>
   <div id="player"></div>
   <script>
     var tag = document.createElement('script');
     tag.src = "https://www.youtube.com/iframe_api";
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     var player;
     function onYouTubeIframeAPIReady() {
       player = new YT.Player('player', {
         height: '360',
         width: '640',
         videoId: 'M7lc1UVf-VE',
         playerVars: { controls: 0 },
         events: {
           'onReady': onPlayerReady,
           'onStateChange': onPlayerStateChange
-        }
+        }
       });
-    }
+    }
     function onPlayerReady(event) {
       event.target.playVideo();
-    }
+    }
     function onPlayerStateChange(event) {
       if (event.data == YT.PlayerState.UNSTARTED) {
         chrome.webview.postMessage('UNSTARTED,' + player.getDuration().toString());
       } else if (event.data == YT.PlayerState.ENDED) {
         chrome.webview.postMessage('ENDED');
       } else if (event.data == YT.PlayerState.PLAYING) {
         chrome.webview.postMessage('PLAYING');
       } else if (event.data == YT.PlayerState.PAUSED) {
         chrome.webview.postMessage('PAUSED');
       } else if (event.data == YT.PlayerState.BUFFERING) {
         chrome.webview.postMessage('BUFFERING');
       //} else if (event.data == YT.PlayerState.CUED) { // これいつ来るんだろう？
         //chrome.webview.postMessage('CUED,' + player.getDuration().toString());
       } else {
         chrome.webview.postMessage(event.data.toString());
       }
-    }
+    }
     //function loadVideoById(videoId) { player.loadVideoById(videoId); } // loadVideoByIdはイベントが来ずいきなり再生される
     function cueVideoById(videoId) { player.cueVideoById(videoId); } // こっちのほうがいい
     function playVideo() { player.playVideo(); }
     function pauseVideo() { player.pauseVideo(); }
     function stopVideo() { player.stopVideo(); }
     function setVolume(volume) { player.setVolume(volume); } // 0～100 の整数値
     function mute() { player.mute(); }
     function unMute() { player.unMute(); }
     function getPlayerState() { return player.getPlayerState().toString(); }
     function getCurrentTime() { return player.getCurrentTime().toString(); }
     function seekTo(seconds, allowSeekAhead) { player.seekTo(seconds, allowSeekAhead); }
   </script>
 </body>
 </html>
 ```
 一応ひと通りの操作はできましたが、確認は雑なので何かエラーが出るかもしれません。

お名前がMarkdown扱いになり正しく表示されない（嘘くさい解決法ｗ

2021/11/20 15:14

投稿

TN8001

score8534

test CHANGED Viewed

@@ -2,7 +2,7 @@
-ku__ra__geさんも指摘されていますが、質問のリンクの前（上？）のページにあります。
+ku______ra__geさんも指摘されていますが、質問のリンクの前（上？）のページにあります。