回答編集履歴

3

見直しキャンペーン中

2023/07/29 08:52

投稿

TN8001
TN8001

スコア9326

test 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
  }
@@ -216,3 +216,5 @@
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

スコア9326

test CHANGED
@@ -1,437 +1,218 @@
1
1
  > ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
2
2
 
3
-
4
-
5
- ku______ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
3
+ ku__ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
6
-
7
-
8
4
 
9
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)
10
6
 
11
-
12
-
13
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)
14
8
 
15
-
16
-
17
9
  > 実装方法に心当たりがありましたら、ご協力お願いいたします。
18
10
 
19
-
20
-
21
11
  特に心当たりはありませんが、ちょっと面白そうなのでやってみました。
22
-
23
12
  なんでもいいということですので、`WebView2`を使用しました(`CefSharp`は以前苦戦して苦手意識がある^^;
24
-
25
13
  [WinForms アプリでの WebView2 の使用を開始する - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/get-started/winforms)
26
14
 
27
-
28
-
29
- ```C#
15
+ ```cs
30
-
31
16
  using System;
32
-
33
17
  using System.Diagnostics;
34
-
35
18
  using System.IO;
36
-
37
19
  using System.Windows.Forms;
38
-
39
20
  using Microsoft.Web.WebView2.Core;
40
21
 
41
-
42
-
43
22
  namespace Questions370144
44
-
45
23
  {
46
-
47
24
  public partial class Form1 : Form
48
-
49
25
  {
50
-
51
26
  private bool playing;
52
-
53
27
  private bool seeking;
54
28
 
55
-
56
-
57
29
  public Form1()
58
-
59
- {
30
+ {
60
-
61
31
  InitializeComponent();
62
-
63
32
  InitializeAsync();
64
-
65
- }
33
+ }
66
-
67
-
68
34
 
69
35
  private async void InitializeAsync()
70
-
71
- {
36
+ {
72
-
73
37
  await webView21.EnsureCoreWebView2Async(null);
74
38
 
75
-
76
-
77
39
  webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
78
40
 
79
-
80
-
81
41
  var html = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "index.html");
82
-
83
42
  webView21.CoreWebView2.Navigate(new Uri(html).AbsoluteUri);
84
-
85
- }
43
+ }
86
-
87
-
88
44
 
89
45
  private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
90
-
91
- {
46
+ {
92
-
93
47
  var str = e.TryGetWebMessageAsString();
94
-
95
48
  Debug.WriteLine(str);
96
49
 
97
-
98
-
99
50
  switch (str.Split(',')[0])
100
-
101
- {
51
+ {
102
-
103
52
  case "UNSTARTED":
104
-
105
53
  progressBar1.Value = 0;
106
-
107
54
  progressBar1.Maximum = int.Parse(str.Split(',')[1]);
108
-
109
- break;
55
+ break;
110
-
111
56
  case "ENDED":
112
-
113
57
  timer1.Stop();
114
-
115
58
  playing = false;
116
-
117
- break;
59
+ break;
118
-
119
60
  case "PLAYING":
120
-
121
61
  timer1.Start();
122
-
123
62
  playing = true;
124
-
125
- break;
63
+ break;
126
-
127
64
  case "PAUSED":
128
-
129
65
  timer1.Stop();
130
-
131
66
  playing = false;
132
-
133
- break;
67
+ break;
134
-
135
68
  case "BUFFERING": break;
136
-
137
69
  //case "CUED": break;
138
-
139
- }
70
+ }
140
-
141
- }
71
+ }
142
-
143
-
144
72
 
145
73
  private void button1_Click(object sender, EventArgs e)
146
-
147
- {
74
+ {
148
-
149
75
  webView21.CoreWebView2.ExecuteScriptAsync($"playVideo()");
150
-
151
- }
76
+ }
152
-
153
-
154
77
 
155
78
  private void button2_Click(object sender, EventArgs e)
156
-
157
- {
79
+ {
158
-
159
80
  webView21.CoreWebView2.ExecuteScriptAsync($"pauseVideo()");
160
-
161
- }
81
+ }
162
-
163
-
164
82
 
165
83
  private void trackBar1_Scroll(object sender, EventArgs e)
166
-
167
- {
84
+ {
168
-
169
85
  webView21.CoreWebView2.ExecuteScriptAsync($"setVolume({trackBar1.Value})");
170
-
171
- }
86
+ }
172
-
173
-
174
87
 
175
88
  private void checkBox1_CheckedChanged(object sender, EventArgs e)
176
-
177
- {
89
+ {
178
-
179
90
  if (checkBox1.Checked)
180
-
181
- {
91
+ {
182
-
183
92
  checkBox1.Text = "????";
184
-
185
93
  webView21.CoreWebView2.ExecuteScriptAsync($"mute()");
186
-
187
- }
94
+ }
188
-
189
95
  else
190
-
191
- {
96
+ {
192
-
193
97
  checkBox1.Text = "????";
194
-
195
98
  webView21.CoreWebView2.ExecuteScriptAsync($"unMute()");
196
-
197
- }
99
+ }
198
-
199
- }
100
+ }
200
-
201
-
202
101
 
203
102
  private void progressBar1_MouseDown(object sender, MouseEventArgs e)
204
-
205
- {
103
+ {
206
-
207
104
  seeking = true;
208
-
209
105
  timer1.Stop();
210
106
 
211
-
212
-
213
107
  var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
214
-
215
108
  progressBar1.Value = value;
216
-
217
109
  webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
218
-
219
- }
110
+ }
220
-
221
-
222
111
 
223
112
  private void progressBar1_MouseUp(object sender, MouseEventArgs e)
224
-
225
- {
113
+ {
226
-
227
114
  seeking = false;
228
-
229
115
  if (playing) timer1.Start();
230
116
 
231
-
232
-
233
117
  var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
234
-
235
118
  progressBar1.Value = value;
236
-
237
119
  webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, true)");
238
-
239
- }
120
+ }
240
-
241
-
242
121
 
243
122
  private void progressBar1_MouseMove(object sender, MouseEventArgs e)
244
-
245
- {
123
+ {
246
-
247
124
  if (seeking)
248
-
249
- {
125
+ {
250
-
251
126
  var value = (int)(e.X / (double)progressBar1.Width * progressBar1.Maximum);
252
-
253
127
  progressBar1.Value = value;
254
-
255
128
  webView21.CoreWebView2.ExecuteScriptAsync($"seekTo({value}, false)");
256
-
257
- }
129
+ }
258
-
259
- }
130
+ }
260
-
261
-
262
131
 
263
132
  private async void timer1_Tick(object sender, EventArgs e)
264
-
265
- {
133
+ {
266
-
267
134
  var str = await webView21.CoreWebView2.ExecuteScriptAsync($"getCurrentTime()");
268
-
269
135
  Debug.WriteLine(str);
270
136
 
271
-
272
-
273
137
  if (double.TryParse(str.Trim('"'), out var value)) progressBar1.Value = (int)value;
274
-
275
- }
138
+ }
276
-
277
- }
139
+ }
278
-
279
140
  }
280
-
281
141
  ```
282
142
 
283
-
284
-
285
143
  Form1.Designer.csまで入れると、1万字を超えてしまうので省略します。
286
-
287
144
  以下のコントロールがあるとする(イベントも適宜設定のこと)
288
-
289
145
  * WebView2 webView21
290
-
291
146
  * Button button1(再生ボタン)
292
-
293
147
  * Button button2(ポーズボタン)
294
-
295
148
  * CheckBox checkBox1(ミュートトグルボタン)
296
-
297
149
  * TrackBar trackBar1(音量)
298
-
299
150
  * ProgressBar progressBar1(シークバー)
300
-
301
151
  * Timer timer1(シークバーを進めるタイマ)
302
152
 
303
-
304
-
305
- index.html
153
+ ```html:index.html
306
-
307
- ```html
308
-
309
154
  <!DOCTYPE html>
310
-
311
155
  <html>
312
-
313
156
  <body>
314
-
315
157
  <div id="player"></div>
316
158
 
317
-
318
-
319
159
  <script>
320
-
321
160
  var tag = document.createElement('script');
322
161
 
323
-
324
-
325
162
  tag.src = "https://www.youtube.com/iframe_api";
326
-
327
163
  var firstScriptTag = document.getElementsByTagName('script')[0];
328
-
329
164
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
330
165
 
331
-
332
-
333
166
  var player;
334
-
335
167
  function onYouTubeIframeAPIReady() {
336
-
337
168
  player = new YT.Player('player', {
338
-
339
169
  height: '360',
340
-
341
170
  width: '640',
342
-
343
171
  videoId: 'M7lc1UVf-VE',
344
-
345
172
  playerVars: { controls: 0 },
346
-
347
173
  events: {
348
-
349
174
  'onReady': onPlayerReady,
350
-
351
175
  'onStateChange': onPlayerStateChange
352
-
353
- }
176
+ }
354
-
355
177
  });
356
-
357
- }
178
+ }
358
-
359
-
360
179
 
361
180
  function onPlayerReady(event) {
362
-
363
181
  event.target.playVideo();
364
-
365
- }
182
+ }
366
-
367
-
368
183
 
369
184
  function onPlayerStateChange(event) {
370
-
371
185
  if (event.data == YT.PlayerState.UNSTARTED) {
372
-
373
186
  chrome.webview.postMessage('UNSTARTED,' + player.getDuration().toString());
374
-
375
187
  } else if (event.data == YT.PlayerState.ENDED) {
376
-
377
188
  chrome.webview.postMessage('ENDED');
378
-
379
189
  } else if (event.data == YT.PlayerState.PLAYING) {
380
-
381
190
  chrome.webview.postMessage('PLAYING');
382
-
383
191
  } else if (event.data == YT.PlayerState.PAUSED) {
384
-
385
192
  chrome.webview.postMessage('PAUSED');
386
-
387
193
  } else if (event.data == YT.PlayerState.BUFFERING) {
388
-
389
194
  chrome.webview.postMessage('BUFFERING');
390
-
391
195
  //} else if (event.data == YT.PlayerState.CUED) { // これいつ来るんだろう?
392
-
393
196
  //chrome.webview.postMessage('CUED,' + player.getDuration().toString());
394
-
395
197
  } else {
396
-
397
198
  chrome.webview.postMessage(event.data.toString());
398
-
399
199
  }
400
-
401
- }
200
+ }
402
-
403
-
404
201
 
405
202
  //function loadVideoById(videoId) { player.loadVideoById(videoId); } // loadVideoByIdはイベントが来ずいきなり再生される
406
-
407
203
  function cueVideoById(videoId) { player.cueVideoById(videoId); } // こっちのほうがいい
408
-
409
204
  function playVideo() { player.playVideo(); }
410
-
411
205
  function pauseVideo() { player.pauseVideo(); }
412
-
413
206
  function stopVideo() { player.stopVideo(); }
414
-
415
207
  function setVolume(volume) { player.setVolume(volume); } // 0~100 の整数値
416
-
417
208
  function mute() { player.mute(); }
418
-
419
209
  function unMute() { player.unMute(); }
420
-
421
210
  function getPlayerState() { return player.getPlayerState().toString(); }
422
-
423
211
  function getCurrentTime() { return player.getCurrentTime().toString(); }
424
-
425
212
  function seekTo(seconds, allowSeekAhead) { player.seekTo(seconds, allowSeekAhead); }
426
-
427
213
  </script>
428
-
429
214
  </body>
430
-
431
215
  </html>
432
-
433
216
  ```
434
217
 
435
-
436
-
437
218
  一応ひと通りの操作はできましたが、確認は雑なので何かエラーが出るかもしれません。

1

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

2021/11/20 15:14

投稿

TN8001
TN8001

スコア9326

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ku__ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
5
+ ku______ra__geさんも指摘されていますが、質問のリンクの前(上?)のページにあります。
6
6
 
7
7
 
8
8