app designer上で​htmlを用いたmp​4ファイルの再生につ​いて

9 ビュー (過去 30 日間)
和神 水ノ江
和神 水ノ江 2021 年 9 月 13 日
コメント済み: 和神 水ノ江 2021 年 9 月 16 日
https://jp.mathworks.com/help/matlab/ref/uihtml.html#mw_ba2404bf-2886-4627-a95a-20236cacd324
こちらを参考にapp designer上でHTMLを用いてmp4を再生させようとしていますが読み込みがされません。
何か他に設定などが必要なのでしょうか？
  2 件のコメント
Kojiro Saito
Kojiro Saito 2021 年 9 月 13 日
現在はどのようなHTMLファイルを使われているのでしょうか？
和神 水ノ江
和神 水ノ江 2021 年 9 月 13 日
<!DOCTYPE html>
<html>
<body style="background-color:white;font-family:arial;">
<video width="320" height="240" controls style="padding-left:20px">
<source src="./sample.mp4" type="video/mp4">
</video>
</body>
</html>
リンク先にあるコードの中で動画を流す部分のみを抜き出したファイルを作成し、使用しています。

サインインしてコメントする。

サインインしてこの質問に回答する。

採用された回答

Kojiro Saito
Kojiro Saito 2021 年 9 月 14 日
App Designerの内部で使用しているChromiumブラウザの制約でH264で圧縮されたmp4動画が再生できないためと思われます。
解決策としては2つあります。
(1) OGGフォーマットの動画を使用する
OGGフォーマットの動画ならChromiumブラウザでも再生できるので、ネットにあるMP4→OGGのコンバーターなどを使用して動画を変換し、それをuihtmlのHTMLで追記します。
<video width="320" height="240" controls style="padding-left:20px">
<source src="./sample.mp4" type="video/mp4">
<source src="./sample.oga" type="video/ogg">
</video>
HTMLのvideoタグにsourceが複数あると、ブラウザ側がレンダリングする際に使用できないフォーマットだと次のsourceを使用するようになります。
(2) UIAxesを使用する
もう一つの方法としては、uihtmlではなくuiaxesを使用して動画を表示する方法です。
UIAxes(座標軸)をアプリのキャンバスに置いて、ボタンクリック時のコールバックなどに、動画を表示する処理を入れてみたら実現可能です。
v = VideoReader('sample.mp4');
currAxes = app.UIAxes;
while hasFrame(v)
vidFrame = readFrame(v);
image(vidFrame, 'Parent', currAxes);
currAxes.Visible = 'off';
pause(1/v.FrameRate);
end
  1 件のコメント
和神 水ノ江
和神 水ノ江 2021 年 9 月 16 日
ご回答していただきありがとうございます。
(2)UIAxesを使用することで実装できました。
追加で(2)の方法に関して質問なのですが、準備していたmp4を再生した際に元の再生速度よりも遅く再生されてしまいます。
自分の認識としましては
pause(1/v.FrameRate)
の部分で1フレームの再生時間を制御していると思うのですが、こちらの中の数字をいくら小さくしても通常の再生速度よりも遅い再生しかされません。
他の部分でmp4の再生時間を制御しているのでしょうか？

サインインしてコメントする。

その他の回答 (0 件)

カテゴリ

Help Center および File Exchange で App Designer を使用したアプリ開発 についてさらに検索

タグ

製品


リリース

R2021a

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!