H5代码video标签引入视频在浏览器的兼容性问题解决办法

H5标签video引入视频，在谷歌浏览器正常但是在火狐浏览器和版本较低的浏览器或者IE浏览器却无法观看视频，只能看到音频，是什么原因？

代码如下

<video class="video" muted  loop="loop" style="display: block;" controls="controls">
          <source src="https://zm-flashbase-test-public.oss-cn-shanghai.aliyuncs.com/websit/video/A3000-1.mp4" type="video/mp4">
          <source src="../../images/video/product/A3000-1.mp4" type="video/mp4" >
          {{ $t("tips") }}
</video>

注意到使用了两个 <source> 元素来提供视频文件的不同来源。
这通常是一个很好的做法，因为不同的浏览器支持不同的视频格式。

1. 从外部链接加载：https://zm-flashbase-test-public.oss-cn-shanghai.aliyuncs.com/websit/video/A3000-1.mp4
2. 从相对路径加载：../../images/video/product/A3000-1.mp4

首先，请确保您的文件路径正确。其次，考虑到在谷歌浏览器中视频可以正常播放，但在其他浏览器中出现问题，这可能是由于不同浏览器对视频编解码器支持的差异导致的。

常见的视频编解码器包括 H.264（常用于 .mp4 文件）和 WebM（常用于 .webm 文件）。您可以尝试提供不同格式的视频文件来兼容不同的浏览器。例如，您可以提供 .webm 格式的视频作为备用选项。

另外，请确保您的浏览器没有屏蔽视频播放，也确保您的网络连接稳定。

我们来对比下不展示的视频格式，左边不展示，右边展示如下：

视频使用 MPEG-4 AAC 和 HEVC 编解码器，那么问题可能出现在浏览器对这些编解码器的支持上。
不同的浏览器和版本对于视频编解码器的支持可能有所不同。为了解决这个问题，可以尝试以下方法：

1. 转换视频格式： 尝试将视频转换为更通用的格式，如 H.264 编码的 .mp4 文件。这样可以提高在各种浏览器上的兼容性。

2. 提供备用格式： 除了 MPEG-4 AAC 和 HEVC 格式外，您可以提供其他格式的视频作为备用选项，如 WebM 格式。这样可以确保更多浏览器和设备能够播放您的视频。

3. 检查浏览器兼容性： 确保您使用的浏览器支持您选择的视频编解码器。您可以查阅各个浏览器的官方文档或支持页面，了解它们对于不同编解码器的支持情况。

4. 更新浏览器版本： 如果用户的浏览器版本较旧，可能会导致对新的视频编解码器的支持不足。鼓励用户升级到最新版本的浏览器，以获得更好的视频播放支持。

通过这些方法，可以增加视频在各种浏览器中正常播放的机会。