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

9 Ansichten (letzte 30 Tage)
和神 水ノ江
和神 水ノ江 am 13 Sep. 2021
Kommentiert: 和神 水ノ江 am 16 Sep. 2021
こちらを参考にapp designer上でHTMLを用いてmp4を再生させようとしていますが読み込みがされません。
何か他に設定などが必要なのでしょうか?
  2 Kommentare
Kojiro Saito
Kojiro Saito am 13 Sep. 2021
現在はどのようなHTMLファイルを使われているのでしょうか?
和神 水ノ江
和神 水ノ江 am 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>
リンク先にあるコードの中で動画を流す部分のみを抜き出したファイルを作成し、使用しています。

Melden Sie sich an, um zu kommentieren.

Akzeptierte Antwort

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

Melden Sie sich an, um zu kommentieren.

Weitere Antworten (0)

Kategorien

Mehr zu App Designer を使用したアプリ開発 finden Sie in Help Center und File Exchange

Produkte


Version

R2021a

Community Treasure Hunt

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

Start Hunting!