回答編集履歴
3
見直しキャンペーン中
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さん。。。
test
CHANGED
@@ -1,437 +1,218 @@
|
|
1
1
|
> ネット上で調べても解決策が発見できなかったため、知恵をお借り出来たらと思い、質問させていただきました。
|
2
2
|
|
3
|
-
|
4
|
-
|
5
|
-
ku__
|
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
|
-
```
|
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
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
|
|