JS控制视频播放技巧

null

1、 创建一个名为test.html的文件，用于演示如何通过JavaScript控制视频播放功能。

2、 在 test.html 页面中，通过 button 标签添加四个按钮，分别实现播放/暂停、放大、中等、缩小功能，用于调控视频播放效果。同时利用 video 标签嵌入一个视频，并设置相应属性以支持操作控制。

3、 为各个按钮添加点击事件，点击时触发对应函数，实现对视频播放效果的控制，具体实现代码如下所示。

4、 通过document.getElementById()获取视频元素，编写playPause()函数实现播放与暂停功能。当调用该函数时，先判断视频当前状态，若处于暂停则调用play()方法开始播放，否则调用pause()方法停止播放，从而实现点击切换播放状态的效果。

5、 定义一个名为makeBig的函数，点击大按钮时，将视频宽度设为560像素并播放。

6、 定义makeNormal()和makeSmall()两个函数，点击中按钮时将视频宽度设为420像素并播放，点击小按钮时将视频宽度调整为320像素并播放，实现不同尺寸下的视频播放效果切换。

7、 用浏览器打开test.html，查看JavaScript控制视频播放的运行效果。