uni-app x video 组件 长URL无法加载视频资源
uni-app x video 组件 长URL无法加载视频资源
示例代码：
<template>
<video src="https://cn-beijing-data.aliyundrive.net/PArCbXhk%2F5670474%2F607a77be118a45ea150d4b01bba9f7f29617c41d%2F607a77befe870faaa16f4719b3d667f64160b246?callback=eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9iajI5LmFwaS1ocC5hbGl5dW5wZHMuY29tL3YyL2ZpbGUvZG93bmxvYWRfY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJodHRwSGVhZGVyLnJhbmdlPSR7aHR0cEhlYWRlci5yYW5nZX1cdTAwMjZidWNrZXQ9JHtidWNrZXR9XHUwMDI2b2JqZWN0PSR7b2JqZWN0fVx1MDAyNmRvbWFpbl9pZD0ke3g6ZG9tYWluX2lkfVx1MDAyNnVzZXJfaWQ9JHt4OnVzZXJfaWR9XHUwMDI2ZHJpdmVfaWQ9JHt4OmRyaXZlX2lkfVx1MDAyNmZpbGVfaWQ9JHt4OmZpbGVfaWR9XHUwMDI2cGRzX3BhcmFtcz0ke3g6cGRzX3BhcmFtc31cdTAwMjZ2ZXJzaW9uPSR7eDp2ZXJzaW9ufSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQiLCJjYWxsYmFja1N0YWdlIjoiYmVmb3JlLWV4ZWN1dGUiLCJjYWxsYmFja0ZhaWx1cmVBY3Rpb24iOiJpZ25vcmUifQ%3D%3D&callback-var=eyJ4OmRvbWFpbl9pZCI6ImJqMjkiLCJ4OnVzZXJfaWQiOiJiMTQ3OTdhOTRlMzE0MDQ5YjJiMmJlNzBmNWJiYjExZSIsIng6ZHJpdmVfaWQiOiIzMDg4MDM0MCIsIng6ZmlsZV9pZCI6IjY0NmIyOGU4NjA5ZmVhZDBmNDQ5NGEzMTk5NzA3ODJlYTdhMWRhZjciLCJ4OnBkc19wYXJhbXMiOiJ7XCJhcFwiOlwiNzY5MTdjY2NjZDQ0NDFjMzk0NTdhMDRmNjA4NGZiMmZcIn0iLCJ4OnZlcnNpb24iOiJ2MyJ9&di=bj29&dr=30880340&f=646b28e8609fead0f4494a319970782ea7a1daf7&pds-params=%7B%22ap%22%3A%2276917ccccd4441c39457a04f6084fb2f%22%7D&response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%2769%25E3%2580%2581%25E5%258A%259F%25E5%25A4%25AB%25E7%2591%259C%25E4%25BC%25BD.2017%2520%25E3%2580%2590%25E5%25BE%25AE%25E4%25BF%25A1%25E5%2585%25AC%25E4%25BC%2597%25E5%258F%25B7%25EF%25BC%259A945KM%25E3%2580%2591.mkv&security-token=CAISvgJ1q6Ft5B2yfSjIr5fjO%2B7a1e4T5aiedUzcrzIkStV%2F2K7KqDz2IHhMf3NpBOkZvvQ1lGlU6%2Fcalq5rR4QAXlDfNUmnVVfMqFHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLs0ARrv4r1fMUqW2X543AUgFLhy2KKMPY99xpFgh9a7j0iCbSGyUu%2FhcRm5sw9%2Byfo34lVYneQ%2FlNwTOHLuHwufJ7FxfIREfquk63pvSlHLcLPe0Kjzzleo2k1XRPVFF%2B535IaHXuToXDnvSi4iC8%2F%2FXtuMkagAFv4bxr%2BA5MRqvSRQa%2BaZ4INeVKglLJTW5EdRORIHhz0USk4npBODOCPFHcw13sZ7f8DnA7lD54y%2F7lKLc5vNUf%2FB0MiF3sNrMDu6Y5ZezCIpHbbnqWv3JbLqOSYYh6t%2Fi1hBzdnnJL4jpUy8%2BLWTt5HEWq0zJ%2BgMfvU5uoLpwRzyAA&u=b14797a94e314049b2b2be70f5bbb11e&x-oss-access-key-id=STS.NTVpTn812RjuwjmK2qFZS7kaJ&x-oss-expires=1714462375&x-oss-signature=9oHfks9FqCNVJ%2FRcG3L781OHgCFU08nyxRgVjBWuZlA%3D&x-oss-signature-version=OSS2" style="height:400rpx;width: 750rpx;" controls=true autoplay=true direction=-90 ></video>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-bottom: 50rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
操作步骤：
<template>
<video src="https://cn-beijing-data.aliyundrive.net/PArCbXhk%2F5670474%2F607a77be118a45ea150d4b01bba9f7f29617c41d%2F607a77befe870faaa16f4719b3d667f64160b246?callback=eyJjYWxsYmFja1VybCI6Imh0dHA6Ly9iajI5LmFwaS1ocC5hbGl5dW5wZHMuY29tL3YyL2ZpbGUvZG93bmxvYWRfY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJodHRwSGVhZGVyLnJhbmdlPSR7aHR0cEhlYWRlci5yYW5nZX1cdTAwMjZidWNrZXQ9JHtidWNrZXR9XHUwMDI2b2JqZWN0PSR7b2JqZWN0fVx1MDAyNmRvbWFpbl9pZD0ke3g6ZG9tYWluX2lkfVx1MDAyNnVzZXJfaWQ9JHt4OnVzZXJfaWR9XHUwMDI2ZHJpdmVfaWQ9JHt4OmRyaXZlX2lkfVx1MDAyNmZpbGVfaWQ9JHt4OmZpbGVfaWR9XHUwMDI2cGRzX3BhcmFtcz0ke3g6cGRzX3BhcmFtc31cdTAwMjZ2ZXJzaW9uPSR7eDp2ZXJzaW9ufSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQiLCJjYWxsYmFja1N0YWdlIjoiYmVmb3JlLWV4ZWN1dGUiLCJjYWxsYmFja0ZhaWx1cmVBY3Rpb24iOiJpZ25vcmUifQ%3D%3D&callback-var=eyJ4OmRvbWFpbl9pZCI6ImJqMjkiLCJ4OnVzZXJfaWQiOiJiMTQ3OTdhOTRlMzE0MDQ5YjJiMmJlNzBmNWJiYjExZSIsIng6ZHJpdmVfaWQiOiIzMDg4MDM0MCIsIng6ZmlsZV9pZCI6IjY0NmIyOGU4NjA5ZmVhZDBmNDQ5NGEzMTk5NzA3ODJlYTdhMWRhZjciLCJ4OnBkc19wYXJhbXMiOiJ7XCJhcFwiOlwiNzY5MTdjY2NjZDQ0NDFjMzk0NTdhMDRmNjA4NGZiMmZcIn0iLCJ4OnZlcnNpb24iOiJ2MyJ9&di=bj29&dr=30880340&f=646b28e8609fead0f4494a319970782ea7a1daf7&pds-params=%7B%22ap%22%3A%2276917ccccd4441c39457a04f6084fb2f%22%7D&response-content-disposition=attachment%3B%20filename%2A%3DUTF-8%27%2769%25E3%2580%2581%25E5%258A%259F%25E5%25A4%25AB%25E7%2591%259C%25E4%25BC%25BD.2017%2520%25E3%2580%2590%25E5%25BE%25AE%25E4%25BF%25A1%25E5%2585%25AC%25E4%25BC%2597%25E5%258F%25B7%25EF%25BC%259A945KM%25E3%2580%2591.mkv&security-token=CAISvgJ1q6Ft5B2yfSjIr5fjO%2B7a1e4T5aiedUzcrzIkStV%2F2K7KqDz2IHhMf3NpBOkZvvQ1lGlU6%2Fcalq5rR4QAXlDfNUmnVVfMqFHPWZHInuDox55m4cTXNAr%2BIhr%2F29CoEIedZdjBe%2FCrRknZnytou9XTfimjWFrXWv%2Fgy%2BQQDLItUxK%2FcCBNCfpPOwJms7V6D3bKMuu3OROY6Qi5TmgQ41Uh1jgjtPzkkpfFtkGF1GeXkLFF%2B97DRbG%2FdNRpMZtFVNO44fd7bKKp0lQLs0ARrv4r1fMUqW2X543AUgFLhy2KKMPY99xpFgh9a7j0iCbSGyUu%2FhcRm5sw9%2Byfo34lVYneQ%2FlNwTOHLuHwufJ7FxfIREfquk63pvSlHLcLPe0Kjzzleo2k1XRPVFF%2B535IaHXuToXDnvSi4iC8%2F%2FXtuMkagAFv4bxr%2BA5MRqvSRQa%2BaZ4INeVKglLJTW5EdRORIHhz0USk4npBODOCPFHcw13sZ7f8DnA7lD54y%2F7lKLc5vNUf%2FB0MiF3sNrMDu6Y5ZezCIpHbbnqWv3JbLqOSYYh6t%2Fi1hBzdnnJL4jpUy8%2BLWTt5HEWq0zJ%2BgMfvU5uoLpwRzyAA&u=b14797a94e314049b2b2be70f5bbb11e&x-oss-access-key-id=STS.NTVpTn812RjuwjmK2qFZS7kaJ&x-oss-expires=1714462375&x-oss-signature=9oHfks9FqCNVJ%2FRcG3L781OHgCFU08nyxRgVjBWuZlA%3D&x-oss-signature-version=OSS2" style="height:400rpx;width: 750rpx;" controls=true autoplay=true direction=-90 ></video>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-bottom: 50rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
预期结果：
- 修复 uniappx viedo组件 使用长url
- 可以正常播出视频
实际结果：
- 无法正常加载资源
bug描述：
- uniapp x video 组件 超长url 视频无法加载 在nvue 测试 正常播放
更多关于uni-app x video 组件 长URL无法加载视频资源的实战教程也可以访问 https://www.itying.com/category-93-b0.html
7 回复
有没有一种可能本来就无法访问
更多关于uni-app x video 组件 长URL无法加载视频资源的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中，使用 video 组件时，如果遇到长 URL 无法加载视频资源的问题，可能是由于以下原因导致的：
1. URL 长度限制
某些浏览器或平台对 URL 的长度有限制，如果 URL 过长，可能会导致请求失败。你可以尝试缩短 URL 或使用 URL 缩短服务。
2. 编码问题
确保 URL 是正确编码的。长 URL 中可能包含特殊字符，这些字符需要进行 URL 编码。你可以使用 encodeURIComponent 函数对 URL 进行编码。
let encodedURL = encodeURIComponent(yourLongURL);
3. 跨域问题
如果视频资源在不同的域名下，可能会遇到跨域问题。确保服务器支持跨域资源共享（CORS），或者将视频资源放在同一域名下。
4. 缓存问题
有时候浏览器缓存可能会导致视频无法加载。你可以尝试在 URL 中添加一个随机参数来避免缓存问题。
let videoURL = yourLongURL + '?timestamp=' + new Date().getTime();
5. 服务器配置
检查服务器配置，确保服务器能够正确处理长 URL 的请求。某些服务器可能对 URL 长度有默认限制，你可以调整服务器配置来允许更长的 URL。
6. 使用 src 属性
确保你在 video 组件中正确设置了 src 属性。例如：
<video :src="videoURL" controls></video>
7. 调试工具
使用浏览器的开发者工具（如 Chrome DevTools）来查看网络请求，检查是否有错误信息或请求失败的原因。
8. 使用 uni.downloadFile
如果直接使用 video 组件无法加载视频，你可以尝试使用 uni.downloadFile 先将视频下载到本地，然后再播放。
uni.downloadFile({
url: yourLongURL,
success: (res) => {
if (res.statusCode === 200) {
this.videoURL = res.tempFilePath;
}
}
});
然后在 video 组件中使用 this.videoURL 作为 src。
9. 使用 uni.request
如果你需要处理复杂的 URL，可以使用 uni.request 获取视频资源的真实地址，然后再进行加载。
uni.request({
url: yourLongURL,
success: (res) => {
this.videoURL = res.data.url; // 假设返回的 JSON 数据中包含视频的 URL
}
});