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

10 views (last 30 days)
和神 水ノ江
和神 水ノ江 on 13 Sep 2021
Commented: 和神 水ノ江 on 16 Sep 2021
https://jp.mathworks.com/help/matlab/ref/uihtml.html#mw_ba2404bf-2886-4627-a95a-20236cacd324
こちらを参考にapp designer上でHTMLを用いてmp4を再生させようとしていますが読み込みがされません。
何か他に設定などが必要なのでしょうか？
  2 Comments
Kojiro Saito
Kojiro Saito on 13 Sep 2021
現在はどのようなHTMLファイルを使われているのでしょうか？
和神 水ノ江
和神 水ノ江 on 13 Sep 2021
<!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>
リンク先にあるコードの中で動画を流す部分のみを抜き出したファイルを作成し、使用しています。

Sign in to comment.

Sign in to answer this question.

Accepted Answer

Kojiro Saito
Kojiro Saito on 14 Sep 2021
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 Comment
和神 水ノ江
和神 水ノ江 on 16 Sep 2021
ご回答していただきありがとうございます。
(2)UIAxesを使用することで実装できました。
追加で(2)の方法に関して質問なのですが、準備していたmp4を再生した際に元の再生速度よりも遅く再生されてしまいます。
自分の認識としましては
pause(1/v.FrameRate)
の部分で1フレームの再生時間を制御していると思うのですが、こちらの中の数字をいくら小さくしても通常の再生速度よりも遅い再生しかされません。
他の部分でmp4の再生時間を制御しているのでしょうか？

Sign in to comment.

More Answers (0)

Categories

Find more on App Designer を使用したアプリ開発 in Help Center and File Exchange

Tags

Products


Release

R2021a

Community Treasure Hunt

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

Start Hunting!