編集履歴

質問編集履歴

入力ミス修正

2021/08/20 00:16

投稿

beam1111

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -122,7 +122,7 @@
                         'obj' => null,
-                        'content' => null,
+                        'content' => <video id="mp4_video"></video>,
                     },

playmp4, pausemp4の入力ミス修正

2021/08/20 00:16

投稿

beam1111

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -290,6 +290,8 @@
     if (val.type == 'mp4') {
+      $("#mp4_play_block").html(mp4[i].content);
       mp4[i].obj = document.getElementById('mp4_video');
       mp4[i].content = $("#mp4_video");

playmp4, pausemp4の入力ミス修正

2021/08/20 00:13

投稿

beam1111

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -136,6 +136,8 @@
 function playMp4(i) {
+  $("#mp4_play_block").html(mp4[i].content);
   mp4[i].obj.currentTime = 0;
   mp4[i].obj.play();
@@ -148,6 +150,8 @@
 function pauseMp4(i) {
+  $("#mp4_play_block").html(mp4[i].content);
   mp4[i].obj.pause();
   mp4[i].obj.currentTime = 0;

入力ミスの修正

2021/08/20 00:12

投稿

beam1111

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -84,7 +84,7 @@
 <?php foreach ($materials as $material): ?>
-    <div class="<?= h($material['class']); ?>" style="display: none;">
+    <div class="box type_mp4" id="mp4_play_block" style="display: none;">
         <video id="mp4_video"></video>

動画を再生しているページのコード、Androidアプリの動画再生ページのコードの追加

2021/08/19 09:36

投稿

beam1111

スコア1

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -69,3 +69,443 @@
 SMART TV BOX（実機）: AP6330
+コードを追記いたしました。ご指摘ありがとうございます。
+### コード
+```php
+// 動画のwrapper部分
+<?php foreach ($materials as $material): ?>
+    <div class="<?= h($material['class']); ?>" style="display: none;">
+        <video id="mp4_video"></video>
+    </div>
+<?php endforeach; ?>
+```
+```javascript
+var mp4;
+<?php if (!empty($material_mp4)): ?>
+mp4 = <?= json_encode(($material_mp4)); ?>;
+<?php endif; ?>
+/*
+$material_mp4 = [
+                    {
+                        'type' => 'mp4',
+                        'no' => 動画の再生順番号,
+                        'source' => m3u8マスターファイル格納場所,
+                        'obj' => null,
+                        'content' => null,
+                    },
+                    ...
+                ];
+*/
+function playMp4(i) {
+  mp4[i].obj.currentTime = 0;
+  mp4[i].obj.play();
+}
+function pauseMp4(i) {
+  mp4[i].obj.pause();
+  mp4[i].obj.currentTime = 0;
+}
+var scene_manager = function () {
+    var items = <?= json_encode($items); ?>;
+    /*
+    items = [
+       { time: 指定した動画再生時間, action: 'play_video_' + 動画の再生順番号 },
+       ...
+    ]
+    */
+    var START_INDEX = 1;
+    var END_INDEX = <?= $item_count; ?>;
+    var index = START_INDEX;
+    var prev = START_INDEX;
+    var show = function () {
+        var now = index;
+        // 動画の切り替えをする
+        $('.type_' + scene_box_list[prev]).fadeOut(0, function () {
+            $('.type_' + scene_box_list[now]).fadeIn(0);
+        });
+        var flg = 0;
+        // 次の動画を再生する
+        $.each(mp4, function(i, val) {
+          if (items[index].action == 'play_mp4_' + val.no) {
+            playMp4(i);
+            return false;
+          }
+        });
+        // 動画の切り替えを予約しておく
+        if (flg == 0) {
+          setTimeout(function(){
+            pauseVideos();
+            next();
+          }, items[index].time);
+        }
+    };
+    // 再生中の動画の停止する
+    var pauseVideos = function() {
+        if (items[index].action.indexOf('play_mp4_') == 0) {
+           pauseMp4(index);
+        }
+    }
+    // 次の動画への切り替えの準備
+    var next = function () {
+        prev = index;
+        index++;
+        if(index > END_INDEX) {
+          index = START_INDEX;
+        }
+        show();
+    };
+    return function () {
+        show();
+    };
+}();
+$(function () {
+  $.each(mp4, function(i, val) {
+    if (val.type == 'mp4') {
+      mp4[i].obj = document.getElementById('mp4_video');
+      mp4[i].content = $("#mp4_video");
+      // hls.jsの設定
+      if (Hls.isSupported()) {
+        var hls_config = {
+          maxMaxBufferLength: 20,
+        };
+        var hls = new Hls(hls_config);
+        hls.loadSource(mp4[i].source);
+        hls.attachMedia(mp4[i].obj);
+      } else if (mp4[i].obj.canPlayType('application/vnd.apple.mpegurl')) {
+        mp4[i].obj.src = mp4[i].source;
+      }
+    }
+  });
+});
+window.onload = function() {
+  scene_manager();
+}
+```
+```kotlin
+// Activity
+class MainActivity : AppCompatActivity() {
+    private val longPressHandler = Handler(Looper.getMainLooper())
+    private var myWebView : WebView? = null
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+        myWebView = initWebView()
+    }
+    override fun onResume() {
+        super.onResume()
+        myWebView!!.clearCache(true)
+        displayWebPage()
+    }
+    private fun initWebView() : WebView {
+        // WebViewの設定
+        WebView.setWebContentsDebuggingEnabled(true)
+        val webView : WebView = findViewById(R.id.webView)
+        with(webView) {
+            settings.javaScriptEnabled = true
+            settings.mediaPlaybackRequiresUserGesture = false
+            settings.useWideViewPort = true
+            settings.loadWithOverviewMode = true
+        }
+        return webView
+    }
+    private fun displayWebPage() {
+        val textURL: String = 指定URL
+        myWebView?.loadUrl(textURL)
+    }
+}
+```
+```kotlin
+// manifest
+    <uses-permission android:name="android.permission.INTERNET" />
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/Theme.アプリ名"
+        android:usesCleartextTraffic="true"
+        android:hardwareAccelerated="true"
+        android:largeHeap="true">
+        <activity android:name=".MainActivity">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+```
+```kotlin
+// layout
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+<!--WebView-->
+    <WebView
+        android:id="@+id/webView"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"/>
+<!--/WebView-->
+</androidx.constraintlayout.widget.ConstraintLayout>
+```