js如何操作video標籤 - tw511教學網

一.簡介

在做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.獲取視訊彈幕資訊