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.獲取視頻彈幕信息