如何为嵌入网页的Google Drive视频添加播放倍速调节按钮

你之前使用iframe嵌入Google Drive预览页的方案无法实现自定义倍速控制，因为浏览器跨域限制无法访问iframe内部的DOM元素，调整方案如下：改用HTML5原生<video>标签加载Google Drive公开文件的直链，复用你已写好的音频倍速逻辑即可实现需求。

完整实现代码 #

<!DOCTYPE html>
<html>
<body>
<style>
body {
  display: grid;
  justify-items: center;
  grid-row-gap: 10px;
}
#actions {
  background: white;
}
#actions button {
  outline: none;
  background-color: #555555;
  border-radius: 12px;
  border: none;
  color: white;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}
/* 可选：自定义视频播放器尺寸 */
video {
  width: 640px;
  height: 480px;
}
</style>

<button onclick="getPlaySpeed()" type="button">What is the playback speed?</button>
<!-- 替换为video标签，src用Google Drive文件直链，保留controls自带播放控件 -->
<video id="video" controls>
  <source src="https://drive.google.com/uc?export=download&id=14PDQfE1wvt4jrAj-CeW1tFV-W3pCtS7D" type="video/mp4">
</video>

<p>视频播放倍速</p>
<div id="actions">
  <button onclick="setPlaySpeed(1.00)" type="button">1.00x</button>
  <button onclick="setPlaySpeed(1.25)" type="button">1.25x</button>
  <button onclick="setPlaySpeed(1.50)" type="button">1.50x</button>
  <button onclick="setPlaySpeed(1.75)" type="button">1.75x</button>
  <button onclick="setPlaySpeed(2.0)" type="button">2.0x</button>
</div>

<script>
var video = document.getElementById("video");
// 可自定义默认播放倍速
video.playbackRate = 1.0;
function setPlaySpeed(speed) {
  video.playbackRate = speed;
}
// 补全你原有代码里调用的getPlaySpeed方法
function getPlaySpeed() {
  alert(`当前播放倍速为：${video.playbackRate}x`);
}
</script>
</body>
</html>

关键调整说明 #

• 替换嵌入方式：放弃iframe嵌入预览页，改用原生video标签加载Google Drive公开文件直链，直链格式为https://drive.google.com/uc?export=download&id=你的文件ID，你只需要把后面的ID替换成自己的视频文件ID即可
• 逻辑复用：倍速控制逻辑和你之前实现的音频倍速逻辑完全一致，只需要把操作对象从audio元素改为video元素即可
• 档位可自定义：你可以自行在actions容器里增减按钮，调整支持的倍速档位

注意事项 #

• Google Drive上的视频文件必须设置为「任何知道链接的人都可以查看」的公开权限，否则直链无法正常加载
• 如果需要更大的视频加载稳定性，你也可以把mp4文件下载下来放到自己的网站服务器上，替换video标签的src属性即可，倍速控制逻辑不用修改

内容的提问来源于stack exchange，提问作者mp96