iframe 视频速度调节 - Javascript

在网页中使用 iframe 嵌入视频时，有时需要提供更多的交互性，允许用户调节视频播放速度。这里介绍一种利用 Javascript 实现调节 iframe 视频速度的方法。

实现原理

使用 iframe 嵌入视频时，可以通过嵌入的 iframe 标签访问视频对象，进而通过 Javascript 调节视频播放速度。具体实现步骤如下：

1. 获取 iframe 对象
2. 获取 iframe 中的 video 标签对象
3. 调节 video 标签对象的 playbackRate 属性，实现速度调节

代码实现

下面是一个实现嵌入 Vimeo 视频的示例代码。其中，通过 id 属性获取 iframe 对象，再通过 contentWindow 属性获取 video 标签对象。

<iframe src="https://player.vimeo.com/video/123456789" id="vimeo-iframe"></iframe>

<script>
  var iframe = document.getElementById('vimeo-iframe');
  var video = iframe.contentWindow.document.getElementsByTagName('video')[0];
  video.playbackRate = 2.0; // 将视频播放速度加倍
</script>

相应地，可以在网页中添加控制界面，让用户可以通过按钮或滑动条调节视频播放速度。下面是一个简单的示例代码，通过重复调节播放速度实现加速、减速和恢复正常速度的功能。

<button onclick="changeSpeed(+0.1)">加速</button>
<button onclick="changeSpeed(-0.1)">减速</button>
<button onclick="changeSpeed(0)">恢复</button>
<input type="range" min="0.5" max="2" step="0.1" value="1" oninput="changeSpeed(this.value)">
<div id="iframe-container">
  <iframe src="https://player.vimeo.com/video/123456789" id="vimeo-iframe"></iframe>
</div>

<script>
  var iframe = document.getElementById('vimeo-iframe');
  var video = iframe.contentWindow.document.getElementsByTagName('video')[0];
  var container = document.getElementById('iframe-container');

  function changeSpeed(delta) {
    video.playbackRate += delta;

    var speed = video.playbackRate.toFixed(1);
    container.setAttribute('data-speed', speed);
  }
</script>

<style>
  #iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
  }
  #iframe-container[data-speed="1.0"] iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #iframe-container[data-speed!="1.0"] iframe {
    filter: blur(2px) opacity(0.3);
  }
  #iframe-container[data-speed]::after {
    content: attr(data-speed) "x";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
  }
</style>

总结

通过上述实现方法，可以很容易地在网页中添加嵌入视频的功能，并提供更多的交互性。需要注意的是，在使用 iframe 嵌入视频时，需要确保视频来自可信源，以避免安全风险。