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='https://www.cnblogs.com/lihongtaoya/archive/2023/06/20/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.uj5u.com/qiye/555712.html

標籤：其他

上一篇：搭建自動化 Web 頁面性能檢測系統 —— 實作篇

下一篇：返回列表