回答編集履歴

見直しキャンペーン中

2023/07/29 08:52

投稿

TN8001

スコア10111

answer CHANGED Viewed

@@ -89,12 +89,12 @@
         {
             if (checkBox1.Checked)
             {
-                checkBox1.Text = "????";
+                checkBox1.Text = "🔇";
                 webView21.CoreWebView2.ExecuteScriptAsync($"mute()");
             }
             else
             {
-                checkBox1.Text = "????";
+                checkBox1.Text = "🔊";
                 webView21.CoreWebView2.ExecuteScriptAsync($"unMute()");
             }
         }
@@ -215,4 +215,6 @@
 </html>
 ```
-一応ひと通りの操作はできましたが、確認は雑なので何かエラーが出るかもしれません。
+一応ひと通りの操作はできましたが、確認は雑なので何かエラーが出るかもしれません。
+![アプリ画像](https://ddjkaamml8q8x.cloudfront.net/questions/2023-07-29/f568012b-3932-489d-abca-0272a56630c8.png)

ku__ra__geさん。。。

2022/09/21 11:07

投稿

TN8001

スコア10111

answer CHANGED Viewed

@@ -1,219 +1,218 @@
-> ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
-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#
-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;
-                case "ENDED":
-                    timer1.Stop();
-                    playing = false;
-                    break;
-                case "PLAYING":
-                    timer1.Start();
-                    playing = true;
-                    break;
-                case "PAUSED":
-                    timer1.Stop();
-                    playing = false;
-                    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
-<!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>
-```
+> ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
+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)
+```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;
+                case "ENDED":
+                    timer1.Stop();
+                    playing = false;
+                    break;
+                case "PLAYING":
+                    timer1.Start();
+                    playing = true;
+                    break;
+                case "PAUSED":
+                    timer1.Stop();
+                    playing = false;
+                    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（シークバーを進めるタイマ）
+```html:index.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

スコア10111

answer CHANGED Viewed

@@ -1,6 +1,6 @@
 > ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
-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)