首页 > 网站开发 > JavaScript >
-
js如何操作video标签
一.简介
在做web ui自动化时,遇到操作视频的时候有时比较让人头疼,定位时会发现只有一个<video>标签,用selenium来实现的话比较麻烦,使用js后我们只需定位到video标签,然后通过js 中处理video的相关属性和方法就可实现,我们继续往下看。
二.实例用法
1.获取视频的总时长(duration)
# document.querySelector('video').duration # js语法 js = "return document.querySelector('video').duration" print(driver.execute_script(js))
2.获取当前播放的时长(currentTime)
js="return document.querySelector('video').currentTime"
currentTime还可以指定当前播放的时长
# 控制进度 time_list = [5, 30, 40, 50, 60, 70, 80, 90, 100] # 秒数 for i in time_list: js = "document.querySelector('video').currentTime="+str(i) driver.execute_script(js) time.sleep(2)
3.判断当前视频是播放还是暂停状态(paused)
# 判断视频处于暂停还是播放 true暂停,false播放 js = "return document.querySelector('video').paused" driver.execute_script(js)
4.暂停:pause(),播放:play()视频
# 暂停 js = "document.querySelector('video').pause()" driver.execute_script(js) # 播放 js = "document.querySelector('video').play()" driver.execute_script(js)
5.设置播放倍数(playbackRate)
# 设置播放倍数 js = "document.querySelector('video').playbackRate=10" # 设置10倍数播放 driver.execute_script(js)
当你在web端刷课/刷剧时,苦于页面设置进度最快也就三倍速,此时playbackRate可以帮助你解决这个烦恼
6.设置清晰度(src)
# 设置清晰度,通过设置播放源来设置 js = "document.querySelector('video').src='xxxx'"
设置清晰度是通过设置video标签中src属性来实现的,因此需要先知道src播放源
7.设置视频播放音量大小(volume)
# js = "retrun document.querySelector('video').volume" # 获取当前音量大小 js_su = "document.querySelector('video').volume=1" # 设置当前音量为最大 driver.execute_script(js_su)
volume的值:0表示音量最小,1表示最大,0.x表示设置音量大小为x0%(x为1-9数字)
若当前视频是静音状态,此时设置volume是没有效果的,因为执行volume
属性的取值范围为 0(静音)到 1(最大音量),不包括 -1(取消静音)。我们可以通过设置muted来取消静音状态后再去设置音量大小。
js = "document.querySelector('video').muted=false" # 解除禁,会暂停视频
muted为false是表示解除静音,此时视频会暂停。为true是开始静音。
8.设置循环播放(loop)
# loop是否循环播放,true设置循环,false不循环 # js = "return document.querySelector('video').loop" # 判断当前是否处于循环状态 js = "document.querySelector('video').loop=true" 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