单击视频元素时如何保持 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