uniapp中使用webview内嵌网页来使用视频点播功能,在axios请求后webview白屏,但是只要把palyauth vid直接写上就能正常显示出来,这个该怎么解决呢
问题已经解决了,应该就是内嵌网页导致的数据异步,在挂载后里面获取url参数再进行阿里云视频实例化会显示不出来,需要直接在script内部获取,这样就能显示了
在 UniApp 中使用 <web-view>
组件内嵌网页实现视频点播功能时,若在 axios 请求后 webview 出现白屏,但将 playauth 或 vid 直接写入就能正常播放,这可能是由于动态请求数据后传递给内嵌网页出现问题,或者内嵌网页未能正确处理异步请求的结果。
解决此类问题可以考虑以下几个方面:
确保请求成功并正确赋值:
数据传递时机:
<web-view>
组件加载完成之后再进行数据请求,并在请求完成后更新内嵌网页的 URL 或传递参数。<web-view>
的 onLoad
事件,确保其加载完毕后再执行数据请求。URL 构造:
内嵌网页处理逻辑:
缓存问题:
示例代码片段:
// 假设 this.videoInfo 是从 Axios 请求得到的包含 playauth 或 vid 的对象
async getData() {
try {
const response = await axios.get('your-api-url');
this.videoInfo = response.data;
// 更新 webview 的 src 属性
this.webViewSrc = `your-video-player-url?playauth=${this.videoInfo.playauth}`;
} catch (error) {
console.error('Failed to fetch video info', error);
// 显示错误提示或处理错误状态
}
}
// 在组件中
<web-view ref="webView" :src="webViewSrc" @load="onWebViewLoad"></web-view>
methods: {
onWebViewLoad() {
if (!this.videoInfo.playauth) {
this.getData();
}
},
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。