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!