一.簡介
在做web ui自動化時，遇到操作視頻的時候有時比較讓人頭疼，定位時會發(fā)現(xiàn)只有一個<video>標(biāo)簽，用selenium來實現(xiàn)的話比較麻煩，使用js后我們只需定位到video標(biāo)簽，然后通過js 中處理video的相關(guān)屬性和方法就可實現(xiàn)，我們繼續(xù)往下看。
二.實例用法
1.獲取視頻的總時長（duration）
# document.querySelector('video').duration # js語法 js = "return document.querySelector('video').duration" print(driver.execute_script(js))
2.獲取當(dāng)前播放的時長（currentTime）
js="return document.querySelector('video').currentTime"
currentTime還可以指定當(dāng)前播放的時長
# 控制進度 time_list = [5, 30, 40, 50, 60, 70, 80, 90, 100] # 秒數(shù) for i in time_list: js = "document.querySelector('video').currentTime="+str(i) driver.execute_script(js) time.sleep(2)
3.判斷當(dāng)前視頻是播放還是暫停狀態(tài)（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.設(shè)置播放倍數(shù)（playbackRate）
# 設(shè)置播放倍數(shù) js = "document.querySelector('video').playbackRate=10" # 設(shè)置10倍數(shù)播放 driver.execute_script(js)
當(dāng)你在web端刷課/刷劇時，苦于頁面設(shè)置進度最快也就三倍速，此時playbackRate可以幫助你解決這個煩惱
6.設(shè)置清晰度（src）
# 設(shè)置清晰度，通過設(shè)置播放源來設(shè)置 js = "document.querySelector('video').src='xxxx'"
設(shè)置清晰度是通過設(shè)置video標(biāo)簽中src屬性來實現(xiàn)的，因此需要先知道src播放源
7.設(shè)置視頻播放音量大?。╲olume）
# js = "retrun document.querySelector('video').volume" # 獲取當(dāng)前音量大小 js_su = "document.querySelector('video').volume=1" # 設(shè)置當(dāng)前音量為最大 driver.execute_script(js_su)
volume的值：0表示音量最小，1表示最大，0.x表示設(shè)置音量大小為x0%（x為1-9數(shù)字）
若當(dāng)前視頻是靜音狀態(tài)，此時設(shè)置volume是沒有效果的，因為執(zhí)行volume 屬性的取值范圍為 0（靜音）到 1（最大音量），不包括 -1（取消靜音）。我們可以通過設(shè)置muted來取消靜音狀態(tài)后再去設(shè)置音量大小。
js = "document.querySelector('video').muted=false" # 解除禁，會暫停視頻
muted為false是表示解除靜音，此時視頻會暫停。為true是開始靜音。
8.設(shè)置循環(huán)播放（loop）
# loop是否循環(huán)播放，true設(shè)置循環(huán)，false不循環(huán) # js = "return document.querySelector('video').loop" # 判斷當(dāng)前是否處于循環(huán)狀態(tài) js = "document.querySelector('video').loop=true" driver.execute_script(js)
三.其它用法
js官網(wǎng)參考：https://developer.mozilla.org/en-US/docs/Learn/Performance/video
poster：視頻封面
preload：預(yù)加載
autoplay：自動播放
controls：瀏覽器自帶的控制條
width：視頻寬度
height：視頻高度
四.遺留問題
本人學(xué)習(xí)后發(fā)現(xiàn)有兩個問題暫沒解決，知道的小伙伴可留言告知
1.全屏/退出全屏（chatgpt說的是requestFullscreen()可執(zhí)行全屏，但我試了沒有反應(yīng)，本人谷歌瀏覽器）文章來源：http://www.zghlxwxcb.cn/news/detail-492256.html
2.獲取視頻彈幕信息文章來源地址http://www.zghlxwxcb.cn/news/detail-492256.html
到了這里，關(guān)于js如何操作video標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
