JavaScript – 多媒体

在现代网页场景下，多媒体已经成为了重要的一部分。除了传统的文字和图片外，现在的网页还包含了音频、视频等多媒体内容。JavaScript 是一种强大的编程语言，在多媒体方面也有很多强大的功能，本篇文章将为你介绍如何使用 JavaScript 来处理多媒体。

音乐

在网页中播放音乐可以给用户提供更加丰富的体验。HTML5 中引入的 audio 元素可以使用 JavaScript 控制音乐的播放、暂停等操作。

播放音乐

<audio id="music" src="music.ogg"></audio>
<button onclick="document.getElementById('music').play()">播放</button>

在上面的代码中，我们使用 audio 标签来插入一段音乐，并为其设置了一个 ID，然后在 button 按钮的 onclick 事件中使用了 JavaScript 来控制该音乐播放。

暂停音乐

<audio id="music" src="music.ogg"></audio>
<button onclick="document.getElementById('music').pause()">暂停</button>

使用该代码可以控制音乐进行暂停操作。

重播音乐

<audio id="music" src="music.ogg"></audio>
<button onclick="document.getElementById('music').currentTime=0">重播</button>

使用该代码可以控制音乐进行重播操作。

视频

和音乐一样，JavaScript 也可以用来控制网页中的视频播放，我们可以通过 HTML5 中新增的 video 元素来进行视频的播放控制。

播放视频

<video id="video" src="demo.mp4"></video>
<button onclick="document.getElementById('video').play()">播放</button>

在这段代码中，我们使用 video 标签插入了一段视频，并在 button 按钮的 onclick 事件中使用 JavaScript 来控制该视频的播放操作。

暂停视频

<video id="video" src="demo.mp4"></video>
<button onclick="document.getElementById('video').pause()">暂停</button>

使用该代码可以控制视频进行暂停操作。

全屏播放

<video id="video" src="demo.mp4"></video>
<button onclick='document.getElementById("video").requestFullscreen()'>全屏</button>

使用该代码可以控制视频进行全屏播放。

图像

在网页中展示图片是我们最为熟悉的操作之一，但是我们同样可以通过 JavaScript 来进行图片的处理，例如图片的放大缩小、旋转等操作。

放大缩小图片

<img id="image" src="flower.jpg" width="500px" height="auto">
<button onclick="document.getElementById('image').style.width='100%'">放大</button>
<button onclick="document.getElementById('image').style.width='500px'">缩小</button>

在这段代码中，我们插入了一张图片，并使用 JavaScript 中的 .style 对象来控制了图片的宽度，以实现缩放的效果。

旋转图片

<img id="image" src="flower.jpg" width="500px" height="auto">
<button onclick="document.getElementById('image').style.transform='rotate(90deg)'">顺时针旋转</button>
<button onclick="document.getElementById('image').style.transform='rotate(-90deg)'">逆时针旋转</button>

使用该代码可以控制图片进行旋转操作。