在HTML開發中，我們常常需要在網頁中插入音頻或視頻，讓網頁更加生動有趣。而要實現這樣的功能，就需要用到CSS媒體播放。

首先，我們需要在HTML代碼中插入媒體標簽，如下所示：

<audio src="example.mp3"></audio>
<video src="example.mp4"></video>

然后，我們就可以使用CSS樣式來對媒體進行控制了。其中，最常用的CSS樣式包括：

audio {
width: 300px;
height: 50px;
}
video {
width: 400px;
height: 300px;
margin: 0 auto;
}

在上面的代碼中，我們可以設置媒體的寬度、高度等屬性，也可以使用margin等屬性進行布局控制。

除此之外，我們還可以使用CSS偽類來控制媒體的狀態，如下所示：

audio:hover {
cursor: pointer;
}
video:playing {
border: 1px solid red;
}

上面的代碼中，audio:hover樣式規定了鼠標懸浮在音頻上時的鼠標樣式，而video:playing則規定了視頻正在播放時的邊框樣式。

總之，CSS媒體播放可以讓我們更加靈活地控制網頁中的音頻和視頻，讓網頁變得更加生動有趣。