时间戳

首页 > 解决方案 > 带有使用视频标签的自定义取消静音按钮的 Vimeo 视频

javascript - 带有使用视频标签的自定义取消静音按钮的 Vimeo 视频

问题描述

目前，我正在通过带有 am html5<video>标签的 Vimeo 直接链接在页面加载时自动播放视频，这会在页面上非常快速地加载视频，并且 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 player.js。请参阅下面的代码。我现在遇到的问题是iframe加载缓慢，而且 vimeo API 似乎没有海报属性。

  <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>

有没有更好的方法来做到这一点，所以我们既有视频标签的速度，又有 iframe 取消静音的能力？我是否缺少视频或 iframe 标签的明显内容？我可以在 Vimeo API 中使用视频标签吗？

标签： javascripthtmlvimeo-api

解决方案

无需为此使用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
})

推荐阅读