I am currently working on creating a straightforward video conference setup and I specifically want to only allow the fullscreen feature when sharing the video element. I also want to disable all other controls such as volume, mute, seek, play, pause, and picture-in-picture.
So far, I have successfully hidden these features (volume, mute, seek, play, pause, and picture-in-picture) and kept only the fullscreen button visible. However, I have encountered an issue where clicking on the video element causes the video to freeze.
In order to address this problem, I have implemented a simple event listener to ensure that the video keeps playing when clicked on:
videoScreen.addEventListener('click', () => {
videoScreen.play()
})
Here is my code for creating the video element:
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)
Just to provide some additional context, I am using vueJS for this project.