![見出し画像](https://assets.st-note.com/production/uploads/images/124252637/rectangle_large_type_2_1629d43a7c0834f92ef89d23b469708e.png?width=1200)
PowerCMS Xでかんたん動画編集
CMS上での動画編集を検討されている方、お持ちのウェブサイト内に動画を掲載したい、と思われている方向けのPowerCMS Xで動画編集を試す基本的な流れです
用意するもの
PowerCMS X の管理画面が操作できる状態
軽めの動画ファイル(mp4)
作業時間10分
動画の登録
1.メニュー内のシステムオブジェクトより「ファイル」を押下します
![](https://assets.st-note.com/img/1702270444061-WncizAuWJZ.png)
2.「ファイルの一覧」より「新しいファイル」を押下します
![](https://assets.st-note.com/img/1702266650619-j76pFtKS0c.png)
3.「新しいファイル」にて「ファイル」カラムに手元の動画をドラッグ&ドロップします
![](https://assets.st-note.com/img/1702266706705-lwcbGQbiHU.png)
4.下部の保存ボタンを押下して動画の登録は完了です
動画の編集
1.メニュー内のシステムオブジェクトより「ファイル」を選択します
![](https://assets.st-note.com/img/1702277483776-wMiclrYgd5.png)
2.「ファイルの一覧」にて先ほど追加した動画を押下します
![](https://assets.st-note.com/img/1702267553643-2OQ4rDeDEP.png)
3.「ファイルの編集」にて、任意の編集を行います
![](https://assets.st-note.com/img/1702268250396-6iSlOKZaQV.png?width=1200)
「ビデオ」カラム:
編集状態の一次保存およびプレビューやVTT(動画関連情報)の作成が可能です「キャプション」カラム:
キャプションの追加や追加したキャプションを一覧が一覧されます
「キャプションの追加」画面では以下のような細かな設定が可能です
![](https://assets.st-note.com/img/1702270190538-cBMsaxJMp6.png?width=1200)
「開始と終了」カラム:
キャプションを表示する開始時間と終了時間を設定します
再生しながらカメラボタンを押下すると押下時の再生時間が登録されます
手動登録も可能です「キャプション」カラム:
「開始と終了」カラムで設定した時間の範囲で表示するキャプションを入力します
入力値を選択して「ふりがな」ボタンを押下すると自動でふりがなが付与されます「表示位置」カラム:
動画内に表示されるキャプションの位置を設定します「文字の色」カラム:
動画内に表示されるキャプションの色を設定します「テキスト処理」カラム:
ルビや分かち書きの設定を行います「チャプター」カラム:
動画再生時にチャプターを利用する場合に「はい」に設定します
チャプターは動画の再生位置を任意の複数に分割する機能です
上記の設定が完了したら、下部の確定ボタンで閉じます
「ファイルの編集」画面に戻り、下部の保存ボタン押下で動画の編集は完了です
特定モデルへの動画カラムの設置と動画の選択
記事モデルへの動画カラム追加の流れです
1.メニュー内のシステムオブジェクトより「システムオブジェクトより「フィールド」を押下します
![](https://assets.st-note.com/img/1702277659424-RIWwoQ7LPA.png)
2.「フィールドの一覧」にて「新しいフィールド」を押下します
![](https://assets.st-note.com/img/1702277683863-FTkO3jK6r6.png)
3.「名前」と「ベースネーム」に任意の名称を入れ、「フィールド型」で「ビデオ」を選択します
![](https://assets.st-note.com/img/1702277718431-BHTXkWyPjk.png)
4.「モデル」にて選択ボタンより「記事」を選択し、下部の「保存」ボタンを押下することで記事編集画面に動画設定用カラムが登録されます
![](https://assets.st-note.com/img/1702277745667-QAPKgFQGXH.png)
5.記事の編集画面に移動、4で追加した動画設定用のカラムにサンプル動画を追加すれば、モデルへの登録は完了です
6.ビューに動画再生用のコードを追加、HTML生成後、動画の閲覧が可能になります
参考
ウェブサイトで動画を扱う場合、サーバーへの負荷のお話がついてまわりますが、PowerCMS X では、HLS形式の動画変換機能が備わっており、CMS単体でストリーミング配信も可能です
PowerCMS X ver.3.03でCMSで管理する動画の字幕を追加・編集する新機能を追加 https://powercmsx.jp/press_release/release_ver3_03.html