如何将Google Drive内的txt文件作为HTML marquee跑马灯的文本来源

前置操作 #

• 将你存放在Google Drive的目标txt文件分享权限设置为「知道链接的所有人均可查看」
• 从txt的分享链接中提取文件ID：例如分享链接为https://drive.google.com/file/d/123456abc/view，则123456abc就是文件ID
• 拼接txt文件的直链：https://drive.google.com/uc?export=download&id=替换为你提取的txt文件ID

修改后的完整代码 #

<html>
<head>
     <meta name="viewport" content="width=device-width">
</head>
<!-- CSS代码 -->
<style>
.GeneratedMarquee {
font-family:Helvetica, sans-serif;
font-size:2em;
line-height:1.3em;
color:#ffffff;
background-color:#000000;
padding:.2em;
}
.center {
  display: block;
  margin: 0 auto;
}
</style>
<body style="background-color:black">
<!-- HTML代码 -->
    <video autoplay loop muted playsinline width="90%" height="90%" name="media" class="center">
    <source src="https://drive.google.com/uc?export=download&id=1d5M6i3z0mI5L1mu0kgqdGGi3tiGqHASJ" type='video/mp4'>
    </video>

    <marquee id="marqueeText" class="GeneratedMarquee" direction="left" scrollamount="8" behavior="scroll"></marquee>

<script>
// 此处替换为你拼接好的txt文件直链
const txtUrl = "https://drive.google.com/uc?export=download&id=替换为你的txt文件ID";
fetch(txtUrl)
  .then(response => response.text())
  .then(text => {
    // 将获取到的txt内容填入跑马灯元素
    document.getElementById("marqueeText").innerText = text;
  })
  .catch(err => console.error("文本加载失败：", err));
</script>
</body>
</html>

注意事项 #

• 若txt内容加载失败，请先检查txt的分享权限是否正确，文件ID是否填写无误
• 单次请求的txt文件大小不要超过10MB，避免加载过慢影响跑马灯展示效果

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