单击视频元素时如何在html5上播放视频答案

【问题标题】：How to keep video on html5 playing when clicked on video element单击视频元素时如何在html5上播放视频
【发布时间】：2021-01-11 15:40:44
【问题描述】：

我正在尝试创建简单的视频会议，我只想在屏幕共享视频元素上制作全屏功能，并且我想禁用所有其他控件，例如 音量、静音、搜索、播放、暂停和图片中的图片。

我已经成功隐藏（音量、静音、搜索、播放、暂停和图片中的图片）[不确定是否有办法禁用该功能]并且只有全屏按钮可用。 p>

我创建了简单的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

【问题讨论】：

你的分号在哪里？
我在编写javascript 程序时很少使用semicolon，我认为在我的情况下semicolon 不是问题..

标签： javascript vue.js video html5-video

【解决方案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>

【讨论】：