データベースに格納した動画データが、PCでは再生できるのにiPhoneでは再生できない

Question

動画データをデータベースにアップロードし、それをサイトで閲覧しようと思います。

より具体的に申し上げると、
1.マスター管理画面（クライアント様が使う画面、IDとパスワードで入ります）内で、まず動画A、動画B、動画C・・・・・と、動画データをアップしていく
2.マスター管理画面で次に「ユーザーaさんには動画A、ユーザーbさんには動画B、ユーザーcさんには動画Aと動画Bを見れるようにしよう」などと設定します。
3.各ユーザーにはユーザー用のIDとパスワードでログインできる画面を用意し、ログイン後それぞれに割り振られた動画のみを見ることができます。

さて、データベースにはこのように格納しています。

これを取り出すphpの記述は下記です。

<?php
    //DBから取得して表示する．
    $sql = "SELECT （以下省略） 		
    $stmt = $pdo->prepare($sql);
    $stmt -> execute();
    while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)){
        echo "<tr>";
        echo "\n";        
        echo '<td>タイトル：';
        echo $row["mediaTitle"];
        echo '<br>';
        //動画と画像で場合分け
        $target = $row["fname"];
        if($row["extension"] == "mp4"){
            echo ("<video src=\"import_media.php?target=$target\" width=\"426\" height=\"240\" controls></video>");
        }
        elseif($row["extension"] == "jpeg" || $row["extension"] == "png" || $row["extension"] == "gif"){
            echo ("<img src='import_media.php?target=$target'>");
        }        
        echo '<p class="red bold">ワンポイントアドバイス！</p>';    
        echo nl2br(htmlspecialchars($row["yComment"], ENT_QUOTES, 'UTF-8'));
        echo "</td>";
        echo "</tr>";
        echo "\n";    
    }
    ?>

さて、こうしたときに
「PCのsafari以外のブラウザ（firefox、chrome）では再生できる」が、
「PCのsafariそしてiPhoneでは（safariでもchromeでもfirefoxでも）再生できません」。

このように表示されます。

（safari以外の）PCでは問題なく再生できているので、基本的な記述は正しい、そしてDBとの接続では誤っていないと考えているのですが、なぜiphoneでは再生できないのか分からず、困っております。

そこでお尋ねしたいのは、
1.このPHPの記述をどう直せばiPhoneで再生できるようになるのか
2.（もしかして）このアップロードのしかたそのものがiPhoneでは見られないやり方なのか。そうだとすればどのような手法を取れば良いのか
ということでございます。

皆様、どうぞよろしくお願い致します。

追記1
import_media.phpの記述を提示、いただきましたので、以下に追記させていただきます。
よろしくお願い致します。

<?php
    /*db情報*/
	include_once '../../management/core/config.php';

    if(isset($_GET["target"]) && $_GET["target"] !== ""){
        $target = $_GET["target"];
    }
    else{
        header("Location: index.php");
    }
    $MIMETypes = array(
        'png' => 'image/png',
        'jpeg' => 'image/jpeg',
        'gif' => 'image/gif',
        'mp4' => 'video/mp4'
    );
    try {
        $pdo = new PDO($dsn, $username, $password);        
        $sql = "SELECT * FROM mediaList WHERE fname = :target;";
        $stmt = $pdo->prepare($sql);
        $stmt -> bindValue(":target", $target, PDO::PARAM_STR);
        $stmt -> execute();
        $row = $stmt -> fetch(PDO::FETCH_ASSOC);
        header("Content-Type: ".$MIMETypes[$row["extension"]]);
        echo ($row["raw_data"]);
    }
    catch (PDOException $e) {
        echo("<p>500 Inertnal Server Error</p>");
        exit($e->getMessage());
    }
?>

追記2
「controls」→「playsinline」に変更したところ、黒塗り三角斜線の画像も出ず、該当箇所は白く表示されました。

追記3
aachyee様の助言に従い、Content-Typeヘッダーを調べてみましたので以下に掲載いたします。
いかがでしょうか。どうぞよろしくお願い致します。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[m.ts10806]

あと、import_media.phpのコードも提示してください。

[退会済みユーザー]

「html video iphone 再生できない」をキーワードにググるといろいろヒットしますが、それらに書いてあるような話では？　違うのなら、それらの記事のどういうことを試してダメだったのか書いた方がよさそうです。

Answer 1

もし動画がライブストリーミングであるなら、ブラウザにキャッシュさせないようにする必要があります。
Cache-Control: no-cache などです。
Cache-Control - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control
HTTP キャッシュ - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Caching
この辺をご覧になってください。

Answer 2

用事があって1日出ていたので返事が遅くなりすいません。
追加の情報ありがとうございます。だいたい原因がわかりました。
リクエストにrangeヘッダがあるのに応答が200なのはおかしいです。
rangeヘッダを正しく受け付けて処理する必要があります。
正しい応答ならば以下ような感じの応答ヘッダになるはずです(サイズ等は適当です)。

HTTP/1.1 206 Partial Content
Content-Range: bytes 0-1023/146515
Content-Length: 1024
Content-Type: video/mp4

詳しくは HTTP range でググってみてください。
この辺を読めばだいたい分かると思います。

HTTP 範囲リクエスト - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Range_requests
Range - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Range
Content-Range - HTTP | MDN https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Range

あと、直接関係はないと思いますがデータの有効期限やEtagも設定したほうが良いと思います。

Comments

[yutarou2000]

ご丁寧なご挨拶に大変恐縮です。
「HTTP range」は初めて聞きました。
まずは調査するところから始めます。
no-cacheの件も併せて対応させていただきます。
結果は後日この場でご報告差し上げます。
まずはお礼まで。

[yutarou2000]

お世話になっております。
試しにRange Requestを追加し、適当な数字を直書きしたら、動きました！本当にありがとうございます。
あとは、動画ごとに適切な数字を取得するよう、プログラムを書ければよいかと思っております。
以上、途中経過でした。

[yutarou2000]

データベースに格納されているBLOBファイルのサイズを取得できないのでいますが、いったんここは閉じさせて頂いて、別に新たに質問しようと思います。ありがとうございました。

Answer 3

この情報だけでは推測でしか言えませんが、
１ 動画のコーデックやエンコードパラメータの問題
２ Content-Typeの問題（動画を配信するウェブサーバーやアプリケーションの設定不足）
が考えられます。まず、どちらでも再生可能なH264、メインプロファイル、Level3.0、ビットレート500kbbps、ストリーム再生用(faststart)、コンテナmp4で短く解像度が低い動画を用意してください。
それでも再生できないならば、ブラウザの解析機能で動画のHTTPのContent-Typeヘッダーがvideo/mp4になっているか確認してください。