ミライノ記録

楽しく学べるアプリの紹介、モバイルアプリ開発記録等

Adobe Animateでのcanvas出力と、Windows7のIE11のお話

【前提】

Adobe AnimateCC 2017にて、Webコンテンツを制作をしたところ、Windows7のIE11にて正常動作しないということに対しての修正した記録です。

 

作成したコンテンツは、Animate内の絵(draw)、PNG(外部読み込みの絵)、インタラクティブJavaScriptによるボタン操作)、音声再生(mp3)、動画(mp4)、を使用しました。動画はコンポーネントを使用しました。

 

 

パブリッシュしたhtml(とJavaScript)は、Safari(Mac)、Chrome(Mac)、FireFox(Mac)、IE11(Windows10、Windows8.1)、Edge(Windows10) などのブラウザでは動作するコンテンツです。

 

 

ただ、Window7のIE11でローディング画面からすすまないという報告が・・・なにゆえでしょうか?

 

 

いろいろ調べました所どうやらこれだという情報がみつかりました。結果として、header部分に以下の1行を追加しました。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10"/>

 

これでローディング画面で止まることはなくなりました。よかった。この行の意味、簡単には説明できないので割愛します! (他のブラウザには影響ないようです)

 

 

しかし、音がなりません、そしてmp4も表示されません。なにゆえでしょうか?

 

 

Adobe Animateって、Wavファイルなどを読み込んだ場合、パブリッシュするとmp3に変換されるのですが、元の音ファイルのせいなのか、変換のせいなのかわかりませんが、生成されたmp3が再生できないことがあるようでした。

悩んだ末に Adobe Encorderで「mp3」に変換したところ再生できました!

その際 Adobe Animateではパブリッシュ時にSoundsの出力をしないようにしました(上書きされないように)

 

Animateが変換しても Encorderが変換してもmp3なのですが、中身はどこかが違うようです、そういう事があるのですね。何か追加情報でも書き込まれているのでしょうか?

 

 

さてmp4が再生されない部分ですが、これも上記と同じでした。EncorderでH264に変換しますと再生されました。これも元のファイルも変換後のファイルもどちらもmp4なのですが不思議です。

 

ようやくこれで、Windows7のIE11にて、動作を確認できました、よかった!

 

 

 

 えーブログ内に何も画像がないのですが、キャプチャなどして後日貼り付けます。