next.js 不同的视频源在移动的和设备不工作

5ssjco0h  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(175)

我正在寻找一个解决方案,我可以在每个设备(桌面/移动的)播放两个不同的视频文件。使用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”作为第一个潜在的解决方案,以便浏览器重新加载文件。但这并没有帮助。谢谢你的建议

vfwfrxfs

vfwfrxfs1#

这是一个相当常见的问题,因为它并不总是那么直观,但是当你改变HTML5视频元素的源时,你还需要告诉元素加载,使它实际加载新的源。
你可以在这里看到一个我使用过的react示例,它按预期工作:https://stackoverflow.com/a/75225060/334402

相关问题