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="https://xxx.mp4"
>
</video>
) : (
//非手机 / pc端渲染这个video标签
<video
className="w-full h-full object-cover "
ref={videoTag}
autoPlay
loop
muted
poster={'/images/video-poster.png'}
src="https://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="https://xxx.mp4"
>
</video>
) : (
<video
className="w-full h-full object-cover "
ref={videoTag}
autoPlay
loop
muted
poster={'/images/video-poster.png'}
src="https://xxx.webm"
></video>
)}