Видео Vimeo с пользовательской кнопкой включения звука с использованием тега видео - PullRequest
Новая
       27

Видео Vimeo с пользовательской кнопкой включения звука с использованием тега видео

2 голосов
/ 15 апреля 2020

В настоящее время я автоматически воспроизводлю видео при загрузке страницы по прямой ссылке Vimeo с тегом am html5 <video>, это очень быстро загружает видео на страницу, а атрибут poster также помогает определить предполагаемое время загрузки: 

<video id="video" poster="abc.jpeg?$staticlink$" playsinline muted>
      <source type="video/mp4" src="https://player.vimeo.com/external/408636.hd.mp4?s=1552e499fb1e3aa2bf881c2ae762aa23988b5d&profile_id=175">
</video>

Теперь я хочу включить звук с помощью кнопки на странице, я решил сделать это, теперь я должен использовать проигрыватель Vimeo API . js. Смотрите код ниже. Проблема, с которой я сейчас сталкиваюсь, заключается в медленной загрузке iframe, и API vimeo, похоже, не имеет атрибута poster. 

  <html>
    <div id="video" width="100%" height="100%"></div>
    <button class="volume">VOLUME ON</button>
  </html>

  <script>
    var volBtn = document.querySelector('.volume')

    var options = {
      url: "https://vimeo.com/123/456",
      loop: true,
      autoplay: true,
      background: true
    };

    var videoPlayer = new Vimeo.Player('video', options);

    volBtn.addEventListener('click', () => {
      videoPlayer.setVolume(1);
    })
  </script>

Есть ли лучший способ сделать это, поэтому у нас есть оба Скорость видео теги, и способность iframes включить звук? Я что-то упускаю из-за тегов видео или iframe? Можно ли использовать тег видео с API Vimeo?

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Вам не нужно использовать Vimeo API , вместо этого вы можете использовать свойство HTMLMediaElement.muted: 

// NOTE: cache the "video" element to prevent unnecessary re-selecting of the same object
const video = document.querySelector("#video");
document
  // select the volume button
  .querySelector(".volume")
  // bind a click event
  .addEventListener("click", () =>
    // unmute the video
    video.muted = false
  );

Если вы хотите переключаться функция отключения звука, используйте этот обработчик событий вместо: 

() =>
  // toggle mute feature
  video.muted = !video.muted;

Удачи.

1 голос
/ 18 апреля 2020

Нет необходимости использовать player.js для этого. Это так же просто, как: 

const volBtn = document.querySelector('.volume')
const video = document.querySelector('#video')
volBtn.addEventListener('click', function() { videoEl.muted = false })

Также обратите внимание, что настройка громкости приглушенного видео с помощью HTMLMediaElement API оставляет его приглушенным. Так что 

volBtn.addEventListener('click', function() { videoEl.volume = 1 })

не будет работать так, как вы ожидаете. Но это будет 

volBtn.addEventListener('click', function() {
 videoEl.muted = false
 videoEl.volume = 1
})
...