Запуск метода внутри функции на узле - PullRequest
Новая
       45

Запуск метода внутри функции на узле

0 голосов
/ 02 сентября 2018

У меня проблемы с пониманием того, как работает приведенный ниже фрагмент кода. const video = player.querySelector ('. viewer'); 

function togglePlay() {
    const method = video.paused ? 'play' : 'pause';
    video[method];
}
togglePlay() //starts playing video

Точная часть, которую я не понимаю, это видео [метод], как это работает? Я пытался гуглить, но пока не повезло. Мы просто добавляем метод к видеообъекту? Если так, почему мы вызываем togglePlay (), он начинает воспроизводить видео ?!

1 Ответ

0 голосов
/ 02 сентября 2018

Это работает путем доступа к свойствам видеообъекта. Это означает, что мы используем видео как массив. Если видео приостановлено, мы находим метод воспроизведения, в противном случае мы находим метод паузы. Мы не создаем новые методы, мы просто находим методы, которые уже существуют в объекте.

Если вы хотите, вы можете переписать код, например, 

function togglePlay() {
     if(video.paused) {
          video.play() // could also be written as video["play"]()
     } else {
          video.pause() // could also be written as video["pause"]()
     }
}

Чтобы метод togglePlay работал так, как вы его написали, вам нужно изменить последнюю строку в функции togglePlay на эту.

видео [метод] к видео [метод] (); 

const video = document.getElementById("video");
function togglePlay() {
    const method = video.paused ? 'play' : 'pause';
    video[method]();
}
<!DOCTYPE html>
<html>
<body>

<video id="video" width="320" height="240" controls>
  <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
  <button onclick="togglePlay()">toggle play</button>
</body>
</html>
...