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

 时间:2024-11-02 04:38:03

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

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

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

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

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

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

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

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

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

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

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

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

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

如何使用JS控制video视频的播放
如何使用JS控制video视频的播放
  • 武林外传手游情缘任务怎么做
  • jquery怎样获得父节点的父节点的兄弟节点
  • 易语言点击按钮变换文字
  • 易语言选择列表框子程序下如何使用如果命令
  • 简单BAT文件的编写
  • 热门搜索
    文明手抄报内容 关于文明礼仪的手抄报 劳动手抄报内容 长征手抄报 四年级英语手抄报 环保小卫士手抄报 廉洁文化进校园手抄报 中秋节手抄报简单漂亮 一二年级消防手抄报 艾滋病手抄报