質問編集履歴
5
入力ミス修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -60,7 +60,7 @@
|
|
60
60
|
'no' => 動画の再生順番号,
|
61
61
|
'source' => m3u8マスターファイル格納場所,
|
62
62
|
'obj' => null,
|
63
|
-
'content' =>
|
63
|
+
'content' => <video id="mp4_video"></video>,
|
64
64
|
},
|
65
65
|
...
|
66
66
|
];
|
4
playmp4, pausemp4の入力ミス修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -144,6 +144,7 @@
|
|
144
144
|
$(function () {
|
145
145
|
$.each(mp4, function(i, val) {
|
146
146
|
if (val.type == 'mp4') {
|
147
|
+
$("#mp4_play_block").html(mp4[i].content);
|
147
148
|
mp4[i].obj = document.getElementById('mp4_video');
|
148
149
|
mp4[i].content = $("#mp4_video");
|
149
150
|
// hls.jsの設定
|
3
playmp4, pausemp4の入力ミス修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -67,12 +67,14 @@
|
|
67
67
|
*/
|
68
68
|
|
69
69
|
function playMp4(i) {
|
70
|
+
$("#mp4_play_block").html(mp4[i].content);
|
70
71
|
mp4[i].obj.currentTime = 0;
|
71
72
|
mp4[i].obj.play();
|
72
73
|
}
|
73
74
|
|
74
75
|
|
75
76
|
function pauseMp4(i) {
|
77
|
+
$("#mp4_play_block").html(mp4[i].content);
|
76
78
|
mp4[i].obj.pause();
|
77
79
|
mp4[i].obj.currentTime = 0;
|
78
80
|
}
|
2
入力ミスの修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -41,7 +41,7 @@
|
|
41
41
|
```php
|
42
42
|
// 動画のwrapper部分
|
43
43
|
<?php foreach ($materials as $material): ?>
|
44
|
-
<div class="
|
44
|
+
<div class="box type_mp4" id="mp4_play_block" style="display: none;">
|
45
45
|
<video id="mp4_video"></video>
|
46
46
|
</div>
|
47
47
|
<?php endforeach; ?>
|
1
動画を再生しているページのコード、Androidアプリの動画再生ページのコードの追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -33,4 +33,224 @@
|
|
33
33
|
|
34
34
|
android studio : 4.2.1
|
35
35
|
|
36
|
-
SMART TV BOX(実機): AP6330
|
36
|
+
SMART TV BOX(実機): AP6330
|
37
|
+
|
38
|
+
コードを追記いたしました。ご指摘ありがとうございます。
|
39
|
+
|
40
|
+
### コード
|
41
|
+
```php
|
42
|
+
// 動画のwrapper部分
|
43
|
+
<?php foreach ($materials as $material): ?>
|
44
|
+
<div class="<?= h($material['class']); ?>" style="display: none;">
|
45
|
+
<video id="mp4_video"></video>
|
46
|
+
</div>
|
47
|
+
<?php endforeach; ?>
|
48
|
+
```
|
49
|
+
|
50
|
+
```javascript
|
51
|
+
var mp4;
|
52
|
+
|
53
|
+
<?php if (!empty($material_mp4)): ?>
|
54
|
+
mp4 = <?= json_encode(($material_mp4)); ?>;
|
55
|
+
<?php endif; ?>
|
56
|
+
/*
|
57
|
+
$material_mp4 = [
|
58
|
+
{
|
59
|
+
'type' => 'mp4',
|
60
|
+
'no' => 動画の再生順番号,
|
61
|
+
'source' => m3u8マスターファイル格納場所,
|
62
|
+
'obj' => null,
|
63
|
+
'content' => null,
|
64
|
+
},
|
65
|
+
...
|
66
|
+
];
|
67
|
+
*/
|
68
|
+
|
69
|
+
function playMp4(i) {
|
70
|
+
mp4[i].obj.currentTime = 0;
|
71
|
+
mp4[i].obj.play();
|
72
|
+
}
|
73
|
+
|
74
|
+
|
75
|
+
function pauseMp4(i) {
|
76
|
+
mp4[i].obj.pause();
|
77
|
+
mp4[i].obj.currentTime = 0;
|
78
|
+
}
|
79
|
+
|
80
|
+
|
81
|
+
var scene_manager = function () {
|
82
|
+
var items = <?= json_encode($items); ?>;
|
83
|
+
/*
|
84
|
+
items = [
|
85
|
+
{ time: 指定した動画再生時間, action: 'play_video_' + 動画の再生順番号 },
|
86
|
+
...
|
87
|
+
]
|
88
|
+
*/
|
89
|
+
var START_INDEX = 1;
|
90
|
+
var END_INDEX = <?= $item_count; ?>;
|
91
|
+
var index = START_INDEX;
|
92
|
+
var prev = START_INDEX;
|
93
|
+
|
94
|
+
var show = function () {
|
95
|
+
var now = index;
|
96
|
+
// 動画の切り替えをする
|
97
|
+
$('.type_' + scene_box_list[prev]).fadeOut(0, function () {
|
98
|
+
$('.type_' + scene_box_list[now]).fadeIn(0);
|
99
|
+
});
|
100
|
+
|
101
|
+
var flg = 0;
|
102
|
+
|
103
|
+
// 次の動画を再生する
|
104
|
+
$.each(mp4, function(i, val) {
|
105
|
+
if (items[index].action == 'play_mp4_' + val.no) {
|
106
|
+
playMp4(i);
|
107
|
+
return false;
|
108
|
+
}
|
109
|
+
});
|
110
|
+
|
111
|
+
// 動画の切り替えを予約しておく
|
112
|
+
if (flg == 0) {
|
113
|
+
setTimeout(function(){
|
114
|
+
pauseVideos();
|
115
|
+
next();
|
116
|
+
}, items[index].time);
|
117
|
+
}
|
118
|
+
};
|
119
|
+
|
120
|
+
// 再生中の動画の停止する
|
121
|
+
var pauseVideos = function() {
|
122
|
+
if (items[index].action.indexOf('play_mp4_') == 0) {
|
123
|
+
pauseMp4(index);
|
124
|
+
}
|
125
|
+
}
|
126
|
+
// 次の動画への切り替えの準備
|
127
|
+
var next = function () {
|
128
|
+
prev = index;
|
129
|
+
index++;
|
130
|
+
if(index > END_INDEX) {
|
131
|
+
index = START_INDEX;
|
132
|
+
}
|
133
|
+
|
134
|
+
show();
|
135
|
+
};
|
136
|
+
return function () {
|
137
|
+
show();
|
138
|
+
};
|
139
|
+
}();
|
140
|
+
|
141
|
+
|
142
|
+
$(function () {
|
143
|
+
$.each(mp4, function(i, val) {
|
144
|
+
if (val.type == 'mp4') {
|
145
|
+
mp4[i].obj = document.getElementById('mp4_video');
|
146
|
+
mp4[i].content = $("#mp4_video");
|
147
|
+
// hls.jsの設定
|
148
|
+
if (Hls.isSupported()) {
|
149
|
+
var hls_config = {
|
150
|
+
maxMaxBufferLength: 20,
|
151
|
+
};
|
152
|
+
var hls = new Hls(hls_config);
|
153
|
+
hls.loadSource(mp4[i].source);
|
154
|
+
hls.attachMedia(mp4[i].obj);
|
155
|
+
} else if (mp4[i].obj.canPlayType('application/vnd.apple.mpegurl')) {
|
156
|
+
mp4[i].obj.src = mp4[i].source;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
});
|
160
|
+
});
|
161
|
+
|
162
|
+
|
163
|
+
window.onload = function() {
|
164
|
+
scene_manager();
|
165
|
+
}
|
166
|
+
```
|
167
|
+
|
168
|
+
```kotlin
|
169
|
+
// Activity
|
170
|
+
class MainActivity : AppCompatActivity() {
|
171
|
+
|
172
|
+
private val longPressHandler = Handler(Looper.getMainLooper())
|
173
|
+
|
174
|
+
private var myWebView : WebView? = null
|
175
|
+
|
176
|
+
override fun onCreate(savedInstanceState: Bundle?) {
|
177
|
+
super.onCreate(savedInstanceState)
|
178
|
+
setContentView(R.layout.activity_main)
|
179
|
+
|
180
|
+
myWebView = initWebView()
|
181
|
+
}
|
182
|
+
|
183
|
+
|
184
|
+
override fun onResume() {
|
185
|
+
super.onResume()
|
186
|
+
myWebView!!.clearCache(true)
|
187
|
+
displayWebPage()
|
188
|
+
}
|
189
|
+
|
190
|
+
private fun initWebView() : WebView {
|
191
|
+
// WebViewの設定
|
192
|
+
WebView.setWebContentsDebuggingEnabled(true)
|
193
|
+
val webView : WebView = findViewById(R.id.webView)
|
194
|
+
|
195
|
+
with(webView) {
|
196
|
+
settings.javaScriptEnabled = true
|
197
|
+
settings.mediaPlaybackRequiresUserGesture = false
|
198
|
+
settings.useWideViewPort = true
|
199
|
+
settings.loadWithOverviewMode = true
|
200
|
+
}
|
201
|
+
return webView
|
202
|
+
}
|
203
|
+
|
204
|
+
|
205
|
+
private fun displayWebPage() {
|
206
|
+
val textURL: String = 指定URL
|
207
|
+
myWebView?.loadUrl(textURL)
|
208
|
+
}
|
209
|
+
}
|
210
|
+
```
|
211
|
+
|
212
|
+
```kotlin
|
213
|
+
// manifest
|
214
|
+
<uses-permission android:name="android.permission.INTERNET" />
|
215
|
+
|
216
|
+
<application
|
217
|
+
android:allowBackup="true"
|
218
|
+
android:icon="@mipmap/ic_launcher"
|
219
|
+
android:label="@string/app_name"
|
220
|
+
android:roundIcon="@mipmap/ic_launcher_round"
|
221
|
+
android:supportsRtl="true"
|
222
|
+
android:theme="@style/Theme.アプリ名"
|
223
|
+
android:usesCleartextTraffic="true"
|
224
|
+
android:hardwareAccelerated="true"
|
225
|
+
android:largeHeap="true">
|
226
|
+
|
227
|
+
<activity android:name=".MainActivity">
|
228
|
+
<intent-filter>
|
229
|
+
<action android:name="android.intent.action.MAIN" />
|
230
|
+
|
231
|
+
<category android:name="android.intent.category.LAUNCHER" />
|
232
|
+
</intent-filter>
|
233
|
+
</activity>
|
234
|
+
|
235
|
+
</application>
|
236
|
+
```
|
237
|
+
|
238
|
+
```kotlin
|
239
|
+
// layout
|
240
|
+
<?xml version="1.0" encoding="utf-8"?>
|
241
|
+
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
242
|
+
xmlns:app="http://schemas.android.com/apk/res-auto"
|
243
|
+
xmlns:tools="http://schemas.android.com/tools"
|
244
|
+
android:layout_width="match_parent"
|
245
|
+
android:layout_height="match_parent"
|
246
|
+
tools:context=".MainActivity">
|
247
|
+
|
248
|
+
<!--WebView-->
|
249
|
+
<WebView
|
250
|
+
android:id="@+id/webView"
|
251
|
+
android:layout_width="match_parent"
|
252
|
+
android:layout_height="match_parent"/>
|
253
|
+
<!--/WebView-->
|
254
|
+
|
255
|
+
</androidx.constraintlayout.widget.ConstraintLayout>
|
256
|
+
```
|