Question

我无法根据设备大小更新视频领域内容。我目前正在执行以下代码。

查看开发工具中的代码，看起来所有内容都使用正确的src文件进行更新，但是a-videosphere似乎无法使用新的视频源进行更新或重新加载。

我尝试在aframe中拥有两个不同的视频资源，但它只是占用带宽并使加载方式变慢。

非常感谢任何帮助

<head> 
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>    
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- SCRIPT TO CHANGE VIDEO BASED ON SCREEN SIZE -->
<script>
$(function(){
if ($(window).width() < 769) {
$("#v1").attr("src", "img/Mobile.mp4");}
else if ($(window).width() > 768){
$("#v1").attr("src", "img/Full.mp4");}
});
</script>

</head>

<body>
<a-scene vr-mode-ui="enabled: false">

<a-assets>
    <video id="video" loop crossorigin="anonymous" playsinline>
         <source id="v1" src="" type="video/mp4">
    </video>
</a-assets>

 <a-videosphere id="videosphere" src="#video" rotation="0 -95 0"></a-videosphere>

 <a-entity id="camera" camera="fov: 75" look-controls></a-entity>

</a-scene>

</body>

Answer 1

资产用于预加载/缓存。任何更改都必须在实体而不是资产中完成。

$("#videosphere").attr("src", "img/Mobile.mp4");}

根据屏幕大小动态更新aframe Videosphere

1 个答案: