UPDATE：2024.2.29
- CATEGORY
- 仕事のこと
先輩コーダーのソースは宝の山！—その②ー
先輩コーダーのソースは宝の山！第２弾です。▼第一弾の記事はこちら
先輩コーダーのソースは宝の山！
今回はwordpressデフォルト機能の新発見のお話です。
wordpressに動画を挿入する際の方法は下記の2パターンが多いです。
①Youtubeなどの外部サービスの動画を埋め込む
②サーバーに動画をアップロードし、videoタグで読み込む
①の場合は、専用のソースか簡単に取得出来ますし、同じサービスであればどのブラウザで見ても同じ体裁で表示されます。
②の場合は下記のようなソースで埋め込みます。
chrome
Firefox
Safari
こんな感じですね。そこまで大きなこだわりがなければ、表示・再生に不具合があるわけではないのでいいのですが、実はwordpressのショートコードを使うと簡単に体裁が揃います。
［video src="..."］試しにサンプルソースを入れたので、ブラウザを変えて見てみてください。どれも一緒になっていますよね？
ちなみに、裏側を紐解いてみると、MediaElement.jsというJavascriptのライブラリが動いているようです。静的なLPなどを作るときもこのライブラリを使えば出来そうですね。
他にも画像を横並びにするgalleryや音声ファイルを埋め込むaudioなどのショートコードタグがありました！以外と気が付かないと使わないwordpressのデフォルト機能の話でした。
今回の先輩コーダーはさとさんでした！
Sato Tomoe
<video src="sample.mp4" controls></video>