video无法动态改变src以及在ios无法自动播放的问题处理

问题：

移动端和pc端使用不同的视频

动态替换source不起作用，

动态替换视频的src，src写在video标签中，然后动态渲染dom

代码如下

{isPhone ? (
//手机端渲染这个video标签
            <video
              className="w-full h-full object-cover "
              ref={videoTag}
              autoPlay
              loop
              muted
              poster={'/images/video-poster.png'}
              src="//i2.wp.com/xxx.mp4"
            >
            </video>
          ) : (
//非手机 / pc端渲染这个video标签
            <video
              className="w-full h-full object-cover "
              ref={videoTag}
              autoPlay
              loop
              muted
              poster={'/images/video-poster.png'}
              src="//i2.wp.com/xxx.webm"
            ></video>
          )}

but

写完之后发现 视频在手机端一直加载不出来

排查最终发现是视频的编码格式问题

video标签支持的视频格式如下

关于video标签所支持的视频格式和编码：
MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG4文件
WebM = 带有VP8视频编码和Vorbis音频编码的 WebM文件
Ogg = 带有Theora视频编码和Vorbis音频编码的Ogg文件

转换格式之后正常显示

but

又出现问题了

安卓设备视频正常显示

但ios中视频不会显示 没有播放

原因是：
视频使用了autoplay

ios设备默认禁止autoplay？

最终解决方法是：
添加preload属性 preload=“auto”
MDN官网对这个属性的解释如下
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video#preload

preload

该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：
? none: 表示不应该预加载视频。
? metadata: 表示仅预先获取视频的元数据（例如长度）。
? auto: 表示可以下载整个视频文件，即使用户不希望使用它。
? 空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。

其中auto: 表示可以下载整个视频文件，即使用户不希望使用它。
添加了preload=“auto” 之后，解决了以上问题并正常显示
最终代码：

{isPhone ? (
            <video
              className="w-full h-full object-cover "
              ref={videoTag}
              autoPlay
              preload="auto"
              loop
              playsInline
              muted
              poster={'/images/video-poster.png'}
              src="//i2.wp.com/xxx.mp4"
            >
            </video>
          ) : (
            <video
              className="w-full h-full object-cover "
              ref={videoTag}
              autoPlay
              loop
              muted
              poster={'/images/video-poster.png'}
              src="//i2.wp.com/xxx.webm"
            ></video>
          )}