js如何操作video标签

坐看雲起

一.简介

在做web ui自动化时，遇到操作视频的时候有时比较让人头疼，定位时会发现只有一个标签，用selenium来实现的话比较麻烦，使用js后我们只需定位到video标签，然后通过js 中处理video的相关属性和方法就可实现，我们继续往下看。
二.实例用法

1.获取视频的总时长（duration）

1. # document.querySelector('video').duration  # js语法
2. js = "return document.querySelector('video').duration"
3. print(driver.execute_script(js))

复制代码

2.获取当前播放的时长（currentTime）

1. js="return document.querySelector('video').currentTime"

复制代码

currentTime还可以指定当前播放的时长

1. # 控制进度
2. time_list = [5, 30, 40, 50, 60, 70, 80, 90, 100]  # 秒数
3. for i in time_list:
4.     js = "document.querySelector('video').currentTime="+str(i)
5.     driver.execute_script(js)
6.     time.sleep(2)

复制代码

3.判断当前视频是播放还是暂停状态（paused）

1. # 判断视频处于暂停还是播放  true暂停，false播放
2. js = "return document.querySelector('video').paused"
3. driver.execute_script(js)

复制代码

4.暂停：pause()，播放：play()视频

1. # 暂停
2. js = "document.querySelector('video').pause()"
3. driver.execute_script(js)
4. # 播放
5. js = "document.querySelector('video').play()"
6. driver.execute_script(js)

复制代码

5.设置播放倍数（playbackRate）

1. # 设置播放倍数
2. js = "document.querySelector('video').playbackRate=10"  # 设置10倍数播放
3. driver.execute_script(js)

复制代码

当你在web端刷课/刷剧时，苦于页面设置进度最快也就三倍速，此时playbackRate可以帮助你解决这个烦恼
6.设置清晰度（src）

1. # 设置清晰度，通过设置播放源来设置
2. js = "document.querySelector('video').src='xxxx'"

复制代码

设置清晰度是通过设置video标签中src属性来实现的，因此需要先知道src播放源
7.设置视频播放音量大小（volume）

1. # js = "retrun document.querySelector('video').volume"  # 获取当前音量大小
2. js_su = "document.querySelector('video').volume=1"  # 设置当前音量为最大
3. driver.execute_script(js_su)

复制代码

volume的值：0表示音量最小，1表示最大，0.x表示设置音量大小为x0%（x为1-9数字）
若当前视频是静音状态，此时设置volume是没有效果的，因为执行volume 属性的取值范围为 0（静音）到 1（最大音量），不包括 -1（取消静音）。我们可以通过设置muted来取消静音状态后再去设置音量大小。

1. js = "document.querySelector('video').muted=false"  # 解除禁，会暂停视频

复制代码

muted为false是表示解除静音，此时视频会暂停。为true是开始静音。
8.设置循环播放（loop）

1. # loop是否循环播放，true设置循环，false不循环
2. # js = "return document.querySelector('video').loop"  # 判断当前是否处于循环状态
3. js = "document.querySelector('video').loop=true"
4. driver.execute_script(js)

复制代码

三.其它用法

js官网参考：https://developer.mozilla.org/en-US/docs/Learn/Performance/video
poster：视频封面
preload：预加载
autoplay：自动播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
四.遗留问题

本人学习后发现有两个问题暂没解决，知道的小伙伴可留言告知
1.全屏/退出全屏（chatgpt说的是requestFullscreen()可执行全屏，但我试了没有反应，本人谷歌浏览器）
2.获取视频弹幕信息

来源:https://www.cnblogs.com/lihongtaoya/p/17494369.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！