【Processing】アニメーションを出力して動画を埋め込む方法

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は、Processing上で出力したmovファイル動画をwordpress上に埋め込む方法をご紹介したいと思います。

動画の準備

埋め込みたい動画ファイル(拡張子.mov)を準備します。
以前作成したアニメーションを利用したいと思います。

【Processing】画像を自動スクロールさせる方法:http://eveningmusic.wp.xdomain.jp/2020/04/14/techblog-processig-scroll/

動画の出力方法に関しては、こちらを参考にしてみてください。
【Processing】作ったアニメーションを動画にして出力する方法:http://eveningmusic.wp.xdomain.jp/2020/02/23/techblog-processing-movie/

wordpress上に表示する

今回、動画を表示するために「TinyMCE Advanced」というプラグインを使用します。wordpressのプラグイン新規追加画面で検索し、有効化してください。
次に、記事投稿画面「メディアを追加」で使いたい動画ファイルをアップロードします。「メディアを追加」を押すと、今まで追加したメディアが表示されます。今回アップロードした動画を選択し、リンクをコピーします。
以下のように、メディアマークをクリックすると、違うポップアップが出てくるので、「ソース」のワードボックスに先ほどコピーしたリンクをペーストします。

これで完成です。投稿画面のビジュアルを見ても灰色の四角が映るだけなのですが、パーマリンクなどから実際の表示画面を見ると動画が表示できていると思います。


今回は以上になります。

音楽情報バイラルメディアEVENING:https://evening-mashup.com/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました