Блог

Главная - Вопросы по программированию - Как сохранить воспроизведение видео в html5 при нажатии на видеоэлемент

Как сохранить воспроизведение видео в html5 при нажатии на видеоэлемент

#javascript #vue.js #video #html5-video

#javascript #vue.js #Видео #html5-видео

Вопрос:

я пытаюсь создать простую видеоконференцию, и я хочу создать только полноэкранную функцию на видеоэлементе с общим доступом к экрану, и я хочу отключить все другие элементы управления, такие как громкость, отключение звука, поиск, воспроизведение, пауза и картинки в картинках.

я уже успешно скрываю (громкость, отключение звука, поиск, воспроизведение, пауза и картинки в картинках) [не уверен, есть ли способ отключить эти функции] и доступна только полноэкранная кнопка.

и я создаю простой eventlistener способ сохранить воспроизведение видео, когда я нажимаю на видеоэлемент и предотвращаю паузу.

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

но когда я нажимаю на элемент video, мое видео зависает.

вот мой код для создания видеоэлемента

 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

Комментарии:

1. Где ваши точки с запятой?

2. я редко использую semicolon при написании javascript программы, я думаю, что в моем случае semicolon это не проблема..

Ответ №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>