我正在寻找一个解决方案,我可以在每个设备(桌面/移动的)播放两个不同的视频文件。使用react钩子,我编写了一个函数,返回viewport是桌面还是移动的。在视频组件中,我有以下代码。
{isMobile && block.imagePortrait?.url ? (
<video autoPlay muted loop className={'no'}>
<source src={block.imagePortrait.url + '?c=' + cacheBuster} type="video/mp4" />
</video>
) : (
<video autoPlay muted loop className={'xy'}>
<source src={block.imageLandscape.url + '?c=' + cacheBuster} type="video/mp4" />
</video>
)}
在控制台中,电影的SRC代码变化很好,但在浏览器(Firefox/Chrome和Safari)本身中,始终显示桌面版本。
我安装了“cacheBuster”作为第一个潜在的解决方案,以便浏览器重新加载文件。但这并没有帮助。谢谢你的建议
1条答案
按热度按时间vfwfrxfs1#
这是一个相当常见的问题,因为它并不总是那么直观,但是当你改变HTML5视频元素的源时,你还需要告诉元素加载,使它实际加载新的源。
你可以在这里看到一个我使用过的react示例,它按预期工作:https://stackoverflow.com/a/75225060/334402