透明 MOV 文件没有出现在我的 React 网页中

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

我正在尝试在 React 中使用透明视频，我最初使用的是 webM，但它在某些设备上不支持，所以我尝试转向 MOV。但是，无法在 React + Vite 中运行。我已经尝试将其添加到我的 vite 配置中

assetsInclude: ["**/*.mov"]
，但它们仍然没有出现。

我创建了一个轻量级项目，展示了它如何在这里不起作用：https://codesandbox.io/p/sandbox/flamboyant-gianmarco-9qngsy?file=%2Fsrc%2FApp.tsx%3A19%2C13

或者，您可以通过在任何 HTML 预览器中测试以下版本来重新创建问题：

    <!DOCTYPE html>
    <html>
    <body>
    
    test 1: <br>
    <video className="video">
    <source src="https://9qngsy-5173.csb.app/crown.mov" type="video/mov" />
    </video>
    
    <br> test 2: <br>
    <video className="video">
    <source src="https://9qngsy-5173.csb.app/crown.mov" type="video/quicktime" />
    </video>
    
    <br> test 3: <br>
    <video src="https://9qngsy-5173.csb.app/crown.mov" className="video">
    </video>
    
    <br> test 4: <br>
    <video className="video">
    <source src="https://9qngsy-5173.csb.app/crown.mov" type="video/quicktime" />
    </video>
    
    </body>
    </html>

reactjs html5-video vite quicktime
1个回答
0
投票

”我尝试转移到 mov。但是，无法让它在 React + Vite”

中工作

并非所有浏览器都支持 MOV 文件，因此请在兼容的浏览器上进行测试。
例如，Safari 和 Chrome 都可以播放 MOV，但在 Firefox 中您将无法播放（因为它需要 webM 来实现视频透明度）。

“我已经尝试添加...但它们仍然没有出现。”

此行用于在 Chrome 浏览器中显示您的 MOV：
（此处没有 Apple 设备可在 Safari 浏览器上进行测试，可能需要 

type=
设置更严格。此外，视频的“透明度”通道本身未经过测试).

<video src="https://9qngsy-5173.csb.app/crown.mov" className="video">
</video>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.