react.js - 在react中播放avi视频？

Question

请问在react中怎么才能在页面中播放avi视频

import Avi from '@/assets/image/backgroudAvi.avi'

<div className={'video-play'}>
     <video className={'video'} muted={'muted'} autoPlay loop>
        <source src={Avi}/>
     </video>
</div>

现在的情况是元素能看到引入的avi文件路径，但是在页面中就是一片空白什么都没有，div和video的宽高都是正常的

Answer 1

浏览器不支持avi，得服务端转码mp4之类的格式。

Answer 2

H5的video标签默认只支持.mp4、.webm、.ogg格式的视频,如果要播放.avi格式的视频要么把转换格式,要么通过诸如video.js等第三方库应该可以;另外，muted是布尔类型，可简写

Answer 3

<source src="xxx/file.avi" type='video/avi'>

加上type='video/avi'试试

Answer 4

在React中直接播放AVI视频可能会遇到问题，因为HTML5的<video>标签原生并不支持AVI格式。HTML5 <video> 元素主要支持MP4、WebM和Ogg等格式。对于AVI格式，你需要采取一些额外的步骤来使其能够在网页上播放。

解决方案

1. 转换视频格式：
   将AVI视频转换为HTML5支持的格式，如MP4。你可以使用各种视频转换工具，如FFmpeg、HandBrake等。

   使用FFmpeg转换AVI到MP4的示例命令：

   ffmpeg -i input.avi -c:v libx264 -crf 23 -preset veryfast output.mp4

2. 更新React组件：
   将转换后的视频文件替换到React组件中。

   import Mp4Video from '@/assets/image/backgroud.mp4'; // 假设转换后的文件名为backgroud.mp4
   
   function VideoPlayer() {
     return (
       <div className="video-play">
         <video className="video" muted autoPlay loop>
           <source src={Mp4Video} type="video/mp4" />
           {/* 可以在这里添加后备方案，如使用Flash（不推荐，因为Flash已过时）或提示信息 */}
           Your browser does not support the video tag.
         </video>
       </div>
     );
   }
   
   export default VideoPlayer;

3. 确保视频路径正确：
   检查import语句中的路径是否正确指向了转换后的视频文件。
4. 浏览器兼容性：
   确保你的目标浏览器支持HTML5 <video> 标签和MP4格式。
5. 调试：
   如果视频仍然不显示，检查浏览器的开发者工具中的控制台和网络标签页，看是否有错误或404响应。

注意事项

• 确保服务器配置正确，以便能够正确提供视频文件。
• 如果视频文件很大，考虑使用视频加载库（如react-player）来优化加载和播放体验。
• 考虑到用户体验，为不支持自动播放的浏览器提供用户交互来启动视频播放。