从 URL 加载的视频在 html 页面中不起作用

问题描述 投票：0回答：1

我使用的是 OSX 14.6，并且想将此视频（以 webm 格式存储在此处 和 此处以 mp4 格式存储）嵌入到此网页中

<!DOCTYPE html>
<html>
<body>

<center>

<video width="640" height="480" controls autoplay muted playsinline loop>
    <!-- read locally -->
    <!-- <source src="animation.mp4" type="video/mp4"> -->
    <!-- read from url as mp4 -->
    <source src="https://www.dropbox.com/scl/fi/rgxwvsl9wz9i0qn52kdmg/animation.mp4" type="video/mp4">
    <!-- read from url as webm -->
    <source src="https://www.dropbox.com/scl/fi/kv0sc5r5ljnyf4v7szl7a/animation.webm" type="video/webm">    
    Your browser does not support the video tag.
  </video>

</center>

</body>
</html>

当我在 Chrome（版本 128.0.6613.138）或 Safari 17.6 上加载网页时，视频无法播放，请参见屏幕截图。另一方面，如果我从硬盘驱动器本地读取 .mp4 文件，如行中所示

<source src="animation.mp4" type="video/mp4">

视频可以正常播放。是的，我尝试了这个解决方案，但它不起作用。

为什么？

谢谢你

html video mp4 webm
1个回答
0
投票

问题的原因是您从 Dropbox 获取的 URL 并不直接指向视频文件，而是指向网页。 浏览器希望直接从标签内的资源访问视频文件。另一方面，Dropbox 共享的链接通常会指向下载页面或预览页面。

获取直接链接：

要获取 Dropbox 中文件的直接下载链接，请按如下方式编辑 URL：

使用 dl.dropboxusercontent.com 而不是 www.dropbox.com。 将 ?raw=1 添加到 URL 末尾。 例如，您的 mp4 文件的新 URL 为：

html 复制代码

对于您的 WebM 文件：

html 复制代码

检查 CORS 设置：

某些浏览器可能使用 CORS（Cross-Ori

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.