多语言展示
当前在线:1565今日阅读:60今日分享:41

如何使用JS控制video视频的播放

video标签创建的视频,除了可以在使用在标签内定义属性的方式控制播放效果外,还可以使用JS中的DOM对象对视频进行控制。下面介绍如何使用JS控制video视频的播放。
方法/步骤
1

新建一个html文件,命名为test.html,用于介绍如何使用JS控制video视频。

2

在test.html页面,使用button标签创建四个按钮,分别是播放/暂停、大、中、小,用于控制视频的播放效果。同时,使用video标签创建一个视频,代码如下:

3

给每个按钮绑定onclick点击事件,当按钮被点击时,分别执行相应的函数来控制视频的播放效果,代码如下:

4

使用document.getElementById()获得视频对象,创建“播放/暂停”的playPause()函数,使用play()方法控制视频的播放,使用pause()控制视频的暂停。

5

创建makeBig()函数,当点击'大'按钮时,使视频以宽度560px来播放视频。代码如下:

6

创建makeNormal()函数与makeSmall()函数,当点击“中”按钮时,使视频以宽度420px来播放视频,当点击“小”按钮时,使视频以宽度320px来播放视频。

7

在浏览器打开test.html文件,测试js控制视频播放的效果。

推荐信息