teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

見直しキャンペーン中

2023/07/29 08:52

投稿

TN8001
TN8001

スコア10111

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

2

ku__ra__geさん。。。

2022/09/21 11:07

投稿

TN8001
TN8001

スコア10111

answer CHANGED
@@ -1,219 +1,218 @@
1
- > ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
2
-
3
- ku______ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
4
-
5
- [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)
6
-
7
- [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)
8
-
9
- > 実装方法に心当たりがありましたら、ご協力お願いいたします。
10
-
11
- 特に心当たりはありませんが、ちょっと面白そうなのでやってみました。
12
- なんでもいいということですので、`WebView2`を使用しました(`CefSharp`は以前苦戦して苦手意識がある^^;
13
- [WinForms アプリでの WebView2 の使用を開始する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/get-started/winforms)
14
-
15
- ```C#
16
- using System;
17
- using System.Diagnostics;
18
- using System.IO;
19
- using System.Windows.Forms;
20
- using Microsoft.Web.WebView2.Core;
21
-
22
- namespace Questions370144
23
- {
24
- public partial class Form1 : Form
25
- {
26
- private bool playing;
27
- private bool seeking;
28
-
29
- public Form1()
30
- {
31
- InitializeComponent();
32
- InitializeAsync();
33
- }
34
-
35
- private async void InitializeAsync()
36
- {
37
- await webView21.EnsureCoreWebView2Async(null);
38
-
39
- webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
40
-
41
- var html = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "index.html");
42
- webView21.CoreWebView2.Navigate(new Uri(html).AbsoluteUri);
43
- }
44
-
45
- private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
46
- {
47
- var str = e.TryGetWebMessageAsString();
48
- Debug.WriteLine(str);
49
-
50
- switch (str.Split(',')[0])
51
- {
52
- case "UNSTARTED":
53
- progressBar1.Value = 0;
54
- progressBar1.Maximum = int.Parse(str.Split(',')[1]);
55
- break;
56
- case "ENDED":
57
- timer1.Stop();
58
- playing = false;
59
- break;
60
- case "PLAYING":
61
- timer1.Start();
62
- playing = true;
63
- break;
64
- case "PAUSED":
65
- timer1.Stop();
66
- playing = false;
67
- break;
68
- case "BUFFERING": break;
69
- //case "CUED": break;
70
- }
71
- }
72
-
73
- private void button1_Click(object sender, EventArgs e)
74
- {
75
- webView21.CoreWebView2.ExecuteScriptAsync($"playVideo()");
76
- }
77
-
78
- private void button2_Click(object sender, EventArgs e)
79
- {
80
- webView21.CoreWebView2.ExecuteScriptAsync($"pauseVideo()");
81
- }
82
-
83
- private void trackBar1_Scroll(object sender, EventArgs e)
84
- {
85
- webView21.CoreWebView2.ExecuteScriptAsync($"setVolume({trackBar1.Value})");
86
- }
87
-
88
- private void checkBox1_CheckedChanged(object sender, EventArgs e)
89
- {
90
- if (checkBox1.Checked)
91
- {
92
- checkBox1.Text = "????";
93
- webView21.CoreWebView2.ExecuteScriptAsync($"mute()");
94
- }
95
- else
96
- {
97
- checkBox1.Text = "????";
98
- webView21.CoreWebView2.ExecuteScriptAsync($"unMute()");
99
- }
100
- }
101
-
102
- private void progressBar1_MouseDown(object sender, MouseEventArgs e)
103
- {
104
- seeking = true;
105
- timer1.Stop();
106
-
107
- var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
108
- progressBar1.Value = value;
109
- webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
110
- }
111
-
112
- private void progressBar1_MouseUp(object sender, MouseEventArgs e)
113
- {
114
- seeking = false;
115
- if (playing) timer1.Start();
116
-
117
- var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
118
- progressBar1.Value = value;
119
- webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, true)");
120
- }
121
-
122
- private void progressBar1_MouseMove(object sender, MouseEventArgs e)
123
- {
124
- if (seeking)
125
- {
126
- var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
127
- progressBar1.Value = value;
128
- webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
129
- }
130
- }
131
-
132
- private async void timer1_Tick(object sender, EventArgs e)
133
- {
134
- var str = await webView21.CoreWebView2.ExecuteScriptAsync($"getCurrentTime()");
135
- Debug.WriteLine(str);
136
-
137
- if (double.TryParse(str.Trim('"'), out var value)) progressBar1.Value = (int)value;
138
- }
139
- }
140
- }
141
- ```
142
-
143
- Form1.Designer.csまで入れると、1万字を超えてしまうので省略します。
144
- 以下のコントロールがあるとする(イベントも適宜設定のこと)
145
- * WebView2 webView21
146
- * Button button1(再生ボタン)
147
- * Button button2(ポーズボタン)
148
- * CheckBox checkBox1(ミュートトグルボタン)
149
- * TrackBar trackBar1(音量)
150
- * ProgressBar progressBar1(シークバー)
151
- * Timer timer1(シークバーを進めるタイマ)
152
-
153
- index.html
154
- ```html
155
- <!DOCTYPE html>
156
- <html>
157
- <body>
158
- <div id="player"></div>
159
-
160
- <script>
161
- var tag = document.createElement('script');
162
-
163
- tag.src = "https://www.youtube.com/iframe_api";
164
- var firstScriptTag = document.getElementsByTagName('script')[0];
165
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
166
-
167
- var player;
168
- function onYouTubeIframeAPIReady() {
169
- player = new YT.Player('player', {
170
- height: '360',
171
- width: '640',
172
- videoId: 'M7lc1UVf-VE',
173
- playerVars: { controls: 0 },
174
- events: {
175
- 'onReady': onPlayerReady,
176
- 'onStateChange': onPlayerStateChange
177
- }
178
- });
179
- }
180
-
181
- function onPlayerReady(event) {
182
- event.target.playVideo();
183
- }
184
-
185
- function onPlayerStateChange(event) {
186
- if (event.data == YT.PlayerState.UNSTARTED) {
187
- chrome.webview.postMessage('UNSTARTED,' + player.getDuration().toString());
188
- } else if (event.data == YT.PlayerState.ENDED) {
189
- chrome.webview.postMessage('ENDED');
190
- } else if (event.data == YT.PlayerState.PLAYING) {
191
- chrome.webview.postMessage('PLAYING');
192
- } else if (event.data == YT.PlayerState.PAUSED) {
193
- chrome.webview.postMessage('PAUSED');
194
- } else if (event.data == YT.PlayerState.BUFFERING) {
195
- chrome.webview.postMessage('BUFFERING');
196
- //} else if (event.data == YT.PlayerState.CUED) { // これいつ来るんだろう?
197
- //chrome.webview.postMessage('CUED,' + player.getDuration().toString());
198
- } else {
199
- chrome.webview.postMessage(event.data.toString());
200
- }
201
- }
202
-
203
- //function loadVideoById(videoId) { player.loadVideoById(videoId); } // loadVideoByIdはイベント来ずきなり再生される
204
- function cueVideoById(videoId) { player.cueVideoById(videoId); } // こっちのほうがいい
205
- function playVideo() { player.playVideo(); }
206
- function pauseVideo() { player.pauseVideo(); }
207
- function stopVideo() { player.stopVideo(); }
208
- function setVolume(volume) { player.setVolume(volume); } // 0~100 の整数値
209
- function mute() { player.mute(); }
210
- function unMute() { player.unMute(); }
211
- function getPlayerState() { return player.getPlayerState().toString(); }
212
- function getCurrentTime() { return player.getCurrentTime().toString(); }
213
- function seekTo(seconds, allowSeekAhead) { player.seekTo(seconds, allowSeekAhead); }
214
- </script>
215
- </body>
216
- </html>
217
- ```
218
-
1
+ > ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
2
+
3
+ ku__ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
4
+
5
+ [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)
6
+
7
+ [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)
8
+
9
+ > 実装方法に心当たりがありましたら、ご協力お願いいたします。
10
+
11
+ 特に心当たりはありませんが、ちょっと面白そうなのでやってみました。
12
+ なんでもいいということですので、`WebView2`を使用しました(`CefSharp`は以前苦戦して苦手意識がある^^;
13
+ [WinForms アプリでの WebView2 の使用を開始する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/get-started/winforms)
14
+
15
+ ```cs
16
+ using System;
17
+ using System.Diagnostics;
18
+ using System.IO;
19
+ using System.Windows.Forms;
20
+ using Microsoft.Web.WebView2.Core;
21
+
22
+ namespace Questions370144
23
+ {
24
+ public partial class Form1 : Form
25
+ {
26
+ private bool playing;
27
+ private bool seeking;
28
+
29
+ public Form1()
30
+ {
31
+ InitializeComponent();
32
+ InitializeAsync();
33
+ }
34
+
35
+ private async void InitializeAsync()
36
+ {
37
+ await webView21.EnsureCoreWebView2Async(null);
38
+
39
+ webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
40
+
41
+ var html = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "index.html");
42
+ webView21.CoreWebView2.Navigate(new Uri(html).AbsoluteUri);
43
+ }
44
+
45
+ private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
46
+ {
47
+ var str = e.TryGetWebMessageAsString();
48
+ Debug.WriteLine(str);
49
+
50
+ switch (str.Split(',')[0])
51
+ {
52
+ case "UNSTARTED":
53
+ progressBar1.Value = 0;
54
+ progressBar1.Maximum = int.Parse(str.Split(',')[1]);
55
+ break;
56
+ case "ENDED":
57
+ timer1.Stop();
58
+ playing = false;
59
+ break;
60
+ case "PLAYING":
61
+ timer1.Start();
62
+ playing = true;
63
+ break;
64
+ case "PAUSED":
65
+ timer1.Stop();
66
+ playing = false;
67
+ break;
68
+ case "BUFFERING": break;
69
+ //case "CUED": break;
70
+ }
71
+ }
72
+
73
+ private void button1_Click(object sender, EventArgs e)
74
+ {
75
+ webView21.CoreWebView2.ExecuteScriptAsync($"playVideo()");
76
+ }
77
+
78
+ private void button2_Click(object sender, EventArgs e)
79
+ {
80
+ webView21.CoreWebView2.ExecuteScriptAsync($"pauseVideo()");
81
+ }
82
+
83
+ private void trackBar1_Scroll(object sender, EventArgs e)
84
+ {
85
+ webView21.CoreWebView2.ExecuteScriptAsync($"setVolume({trackBar1.Value})");
86
+ }
87
+
88
+ private void checkBox1_CheckedChanged(object sender, EventArgs e)
89
+ {
90
+ if (checkBox1.Checked)
91
+ {
92
+ checkBox1.Text = "????";
93
+ webView21.CoreWebView2.ExecuteScriptAsync($"mute()");
94
+ }
95
+ else
96
+ {
97
+ checkBox1.Text = "????";
98
+ webView21.CoreWebView2.ExecuteScriptAsync($"unMute()");
99
+ }
100
+ }
101
+
102
+ private void progressBar1_MouseDown(object sender, MouseEventArgs e)
103
+ {
104
+ seeking = true;
105
+ timer1.Stop();
106
+
107
+ var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
108
+ progressBar1.Value = value;
109
+ webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
110
+ }
111
+
112
+ private void progressBar1_MouseUp(object sender, MouseEventArgs e)
113
+ {
114
+ seeking = false;
115
+ if (playing) timer1.Start();
116
+
117
+ var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
118
+ progressBar1.Value = value;
119
+ webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, true)");
120
+ }
121
+
122
+ private void progressBar1_MouseMove(object sender, MouseEventArgs e)
123
+ {
124
+ if (seeking)
125
+ {
126
+ var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
127
+ progressBar1.Value = value;
128
+ webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
129
+ }
130
+ }
131
+
132
+ private async void timer1_Tick(object sender, EventArgs e)
133
+ {
134
+ var str = await webView21.CoreWebView2.ExecuteScriptAsync($"getCurrentTime()");
135
+ Debug.WriteLine(str);
136
+
137
+ if (double.TryParse(str.Trim('"'), out var value)) progressBar1.Value = (int)value;
138
+ }
139
+ }
140
+ }
141
+ ```
142
+
143
+ Form1.Designer.csまで入れると、1万字を超えてしまうので省略します。
144
+ 以下のコントロールがあるとする(イベントも適宜設定のこと)
145
+ * WebView2 webView21
146
+ * Button button1(再生ボタン)
147
+ * Button button2(ポーズボタン)
148
+ * CheckBox checkBox1(ミュートトグルボタン)
149
+ * TrackBar trackBar1(音量)
150
+ * ProgressBar progressBar1(シークバー)
151
+ * Timer timer1(シークバーを進めるタイマ)
152
+
153
+ ```html:index.html
154
+ <!DOCTYPE html>
155
+ <html>
156
+ <body>
157
+ <div id="player"></div>
158
+
159
+ <script>
160
+ var tag = document.createElement('script');
161
+
162
+ tag.src = "https://www.youtube.com/iframe_api";
163
+ var firstScriptTag = document.getElementsByTagName('script')[0];
164
+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
165
+
166
+ var player;
167
+ function onYouTubeIframeAPIReady() {
168
+ player = new YT.Player('player', {
169
+ height: '360',
170
+ width: '640',
171
+ videoId: 'M7lc1UVf-VE',
172
+ playerVars: { controls: 0 },
173
+ events: {
174
+ 'onReady': onPlayerReady,
175
+ 'onStateChange': onPlayerStateChange
176
+ }
177
+ });
178
+ }
179
+
180
+ function onPlayerReady(event) {
181
+ event.target.playVideo();
182
+ }
183
+
184
+ function onPlayerStateChange(event) {
185
+ if (event.data == YT.PlayerState.UNSTARTED) {
186
+ chrome.webview.postMessage('UNSTARTED,' + player.getDuration().toString());
187
+ } else if (event.data == YT.PlayerState.ENDED) {
188
+ chrome.webview.postMessage('ENDED');
189
+ } else if (event.data == YT.PlayerState.PLAYING) {
190
+ chrome.webview.postMessage('PLAYING');
191
+ } else if (event.data == YT.PlayerState.PAUSED) {
192
+ chrome.webview.postMessage('PAUSED');
193
+ } else if (event.data == YT.PlayerState.BUFFERING) {
194
+ chrome.webview.postMessage('BUFFERING');
195
+ //} else if (event.data == YT.PlayerState.CUED) { // これいつ来るんだろう?
196
+ //chrome.webview.postMessage('CUED,' + player.getDuration().toString());
197
+ } else {
198
+ chrome.webview.postMessage(event.data.toString());
199
+ }
200
+ }
201
+
202
+ //function loadVideoById(videoId) { player.loadVideoById(videoId); } // loadVideoByIdはイベントが来ずいきなり再生される
203
+ function cueVideoById(videoId) { player.cueVideoById(videoId); } // こっちのほうがい
204
+ function playVideo() { player.playVideo(); }
205
+ function pauseVideo() { player.pauseVideo(); }
206
+ function stopVideo() { player.stopVideo(); }
207
+ function setVolume(volume) { player.setVolume(volume); } // 0~100 の整数値
208
+ function mute() { player.mute(); }
209
+ function unMute() { player.unMute(); }
210
+ function getPlayerState() { return player.getPlayerState().toString(); }
211
+ function getCurrentTime() { return player.getCurrentTime().toString(); }
212
+ function seekTo(seconds, allowSeekAhead) { player.seekTo(seconds, allowSeekAhead); }
213
+ </script>
214
+ </body>
215
+ </html>
216
+ ```
217
+
219
218
  一応ひと通りの操作はできましたが、確認は雑なので何かエラーが出るかもしれません。

1

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

2021/11/20 15:14

投稿

TN8001
TN8001

スコア10111

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  > ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
2
2
 
3
- ku__ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
3
+ ku______ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
4
4
 
5
5
  [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)
6
6