質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

Q&A

解決済

3回答

3414閲覧

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

yutarou2000

総合スコア15

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

iPhone

iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

0グッド

0クリップ

投稿2020/10/24 23:59

編集2020/10/25 08:23

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

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

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

イメージ説明

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

php

1<?php 2 //DBから取得して表示する. 3 $sql = "SELECT (以下省略) 4 $stmt = $pdo->prepare($sql); 5 $stmt -> execute(); 6 while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)){ 7 echo "<tr>"; 8 echo "\n"; 9 echo '<td>タイトル:'; 10 echo $row["mediaTitle"]; 11 echo '<br>'; 12 //動画と画像で場合分け 13 $target = $row["fname"]; 14 if($row["extension"] == "mp4"){ 15 echo ("<video src=\"import_media.php?target=$target\" width=\"426\" height=\"240\" controls></video>"); 16 } 17 elseif($row["extension"] == "jpeg" || $row["extension"] == "png" || $row["extension"] == "gif"){ 18 echo ("<img src='import_media.php?target=$target'>"); 19 } 20 echo '<p class="red bold">ワンポイントアドバイス!</p>'; 21 echo nl2br(htmlspecialchars($row["yComment"], ENT_QUOTES, 'UTF-8')); 22 echo "</td>"; 23 echo "</tr>"; 24 echo "\n"; 25 } 26 ?>

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

このように表示されます。
イメージ説明

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

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

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

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

php

1<?php 2 /*db情報*/ 3 include_once '../../management/core/config.php'; 4 5 if(isset($_GET["target"]) && $_GET["target"] !== ""){ 6 $target = $_GET["target"]; 7 } 8 else{ 9 header("Location: index.php"); 10 } 11 $MIMETypes = array( 12 'png' => 'image/png', 13 'jpeg' => 'image/jpeg', 14 'gif' => 'image/gif', 15 'mp4' => 'video/mp4' 16 ); 17 try { 18 $pdo = new PDO($dsn, $username, $password); 19 $sql = "SELECT * FROM mediaList WHERE fname = :target;"; 20 $stmt = $pdo->prepare($sql); 21 $stmt -> bindValue(":target", $target, PDO::PARAM_STR); 22 $stmt -> execute(); 23 $row = $stmt -> fetch(PDO::FETCH_ASSOC); 24 header("Content-Type: ".$MIMETypes[$row["extension"]]); 25 echo ($row["raw_data"]); 26 } 27 catch (PDOException $e) { 28 echo("<p>500 Inertnal Server Error</p>"); 29 exit($e->getMessage()); 30 } 31?>

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/10/25 00:05

あと、import_media.phpのコードも提示してください。
退会済みユーザー

退会済みユーザー

2020/10/25 00:17

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

回答3

0

もし動画がライブストリーミングであるなら、ブラウザにキャッシュさせないようにする必要があります。
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
この辺をご覧になってください。

投稿2020/10/25 17:48

aachyee

総合スコア114

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

用事があって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も設定したほうが良いと思います。

投稿2020/10/25 17:38

aachyee

総合スコア114

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yutarou2000

2020/10/25 22:00

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

2020/10/28 00:00

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

2020/11/06 08:42

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

0

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

投稿2020/10/25 00:45

編集2020/10/25 00:49
aachyee

総合スコア114

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問