單擊視頻元素時如何保持 html5 上的視頻播放

Question

我正在嘗試創建簡單的視頻會議，我只想在屏幕共享視頻元素上生成全屏功能，我想禁用所有其他控件，如音量、靜音、搜索、播放、暫停和圖片中的圖片。

我已經成功隱藏（音量，靜音，搜索，播放，暫停和圖片中的圖片） [不確定是否有辦法禁用該功能]並且只有可用的全屏按鈕。

並且我創建了簡單的事件eventlistener以在我單擊視頻元素時保持視頻播放並防止暫停。

videoScreen.addEventListener('click', () => {
   videoScreen.play()
})

但是當我點擊視頻元素時，我的視頻會凍結。

這是我創建視頻元素的代碼

const videoGrid = document.getElementById('videoShareScreen')

const screenOwner = document.createElement('span')
screenOwner.innerHTML = `${this.shareScreen.userName}'s Screen`
videoGrid.appendChild(screenOwner)
        
const videoScreen = document.createElement('video')
videoScreen.className = `screen-video screen-${this.shareScreen.userID}`
videoScreen.srcObject = this.shareScreen.stream
videoScreen.muted = true
videoScreen.controls = true
videoScreen.disablePictureInPicture = true
videoScreen.addEventListener('loadedmetadata', () => {
    videoScreen.play()
})
videoScreen.addEventListener('click', () => {
    videoScreen.play()
})
videoGrid.appendChild(videoScreen)

僅供參考：我正在使用vueJS

Answer 1

您必須禁用controls ，然后添加一些可以單擊以進入全屏的圖像（圖標）或文本。 如果您使用過以下內容，則無法避免在單擊視頻時自動暫停：

"videoScreen.controls = true".

你必須使用

videoScreen.setAttribute("onclick", "myFunction()" ); //vueJS is.. videoScreen.onclick = myFunction() ..?

或者

videoScreen.addEventListener("click", myFunction );

其中myFunction看起來像（示例）：

function myFunction() 
{
    videoScreen.play();
    alert("you clicked on video");
}

下面是一些基本的 HTML5 代碼來測試，然后將類似的邏輯應用到你的 Vue JS 項目中：

<html>
<body>

<video id="myVid" width="500" height="400">
<source src="somefile.mp4" type="video/mp4">
</video>

<script>

var videoScreen = document.getElementById('myVid');

videoScreen.addEventListener("click", myFunction );

function myFunction() 
{
    videoScreen.play();
    alert("you clicked on video");
}

</script>

</body>
</html>

單擊視頻元素時如何保持 html5 上的視頻播放

問題描述

1 個解決方案

解決方案1
0 2020-09-27 15:27:35

單擊視頻元素時如何保持 html5 上的視頻播放

問題描述

1 個解決方案

解決方案1 0 2020-09-27 15:27:35

解決方案1
0 2020-09-27 15:27:35