# 音声・動画

HTML のメディアブロックを編集し、アップロード済みのファイルを選びます。

import ContentEditor from '@/components/editor/ContentEditor.astro';

## 動画を追加する

`/` メニューの Video で空の動画ブロックを挿入し、メディアピッカーでアップロードするか、準備済みの動画を選びます。ソースで通常の HTML を書くこともできます。既存のブロックを選択すると、ファイルを変更できます。

## ビジュアルモードで編集する

メディアブロックを編集してから、ソースに切り替えて文書に残る HTML を確認します。

<ContentEditor content="audio-video" />

```html
<figure>
  <video
    src="https://media.prosefly.com/_video/visual-editor-1.mp4"
    width="1920"
    height="1080"
    controls
    playsinline
  ></video>
  <figcaption>Prosefly のビジュアル編集。</figcaption>
</figure>
```

動画の設定には、再生コントロール、インライン再生、先読みの動作があります。figure のキャプションは文書の一部として、メディアと一緒に編集できます。

## 音声を追加する

音声には HTML のメディアブロックを使います。ソースで記述し、ビジュアルモードで利用可能な操作を使ってください。下の例の URL は、メディアライブラリの URL に置き換えます。

```html
<audio src="https://example.com/episode.mp3" controls></audio>
```

音声は、文書やリソースのスキーマで定義された属性として扱うこともできます。その場合は、本文ブロックではなく属性の操作欄で編集します。

## サイトでの再生を確認する

アップロードした音声・動画は Git とは別に管理され、URL で参照します。公開ページでの再生はサイトの HTML とコンポーネントに従います。エディターのプレビューが公開時の自動再生やコントロールを決めるわけではないため、サイト側でも確認してください。アップロードと配信レポートは[メディア](/docs/ja/media/)をご覧ください。