uni-app 视频api seek方法 在APP中安卓端无法跳转到指定的位置播放
uni-app 视频api seek方法 在APP中安卓端无法跳转到指定的位置播放
产品分类
uniapp/App
开发环境信息
| 项⽬目创建方式 | PC开发环境操作系统 | PC开发环境操作系统版本号 | HBuilderX类型 | HBuilderX版本号 | 手机系统 | 手机系统版本号 | 手机厂商 | 手机机型 | 页面类型 | 打包方式 |
|---|---|---|---|---|---|---|---|---|---|---|
| HBuilderX | Windows | Windows 10 专业版 | 正式 | 2.9.8 | Android | Android 10 | 华为 | JEF-AN20 | vue | 云端 |
示例代码
<template>
<view class="root" :style="{width,height:height+'px'}">
<video :id="videoId" :ref="videoId" @ended="end" :autoplay="false"
:show-center-play-btn="true" :controls="true" @exitFullScreen="exitFullScreen"
:style="{height:(height-20)+'px', width:'750rpx'}" @pause="pause"
@timeupdate="timeupdate" @fullscreenchange="fullscreenchange"
class="video" :src="url"></video>
</view>
</template>
<script>
export default {
data() {
return {
VideoContext: {},
state: true,
currentTime: 0,
duration: 0,
videoId: '',
url: 'http://imgmyqx.ofbei.com/upload1/20201207/5a755bafd1ceee8b93196173e3d9d563.mp4'
}
},
onReady() {
this.videoId = Date.now() + Math.ceil(Math.random()*10000000)+"";
this.VideoContext = uni.createVideoContext(this.videoId);
},
onLoad() {
const info = uni.getSystemInfoSync();
this.width = info.windowWidth+'px';
this.height = info.windowHeight;
this.VideoContext.seek(18.299);
this.VideoContext.play();
},
methods: {
timeupdate(e) {
console.log(e.detail);
this.duration = e.detail.duration
this.currentTime = e.detail.currentTime
},
pause(e) {
console.log('e--pause:'+JSON.stringify(e));
},
fullscreenchange(e) {
console.log('e--fullscreenchange:'+JSON.stringify(e));
},
exitFullScreen(e) {
console.log('e--exitFullScreen'+JSON.stringify(e));
}
}
}
</script>
<style>
</style>
操作步骤
云端打包后，观察现象，看是否符合预期。
预期结果
能够在指定的时间位置播放
实际结果
不能够在指定的时间位置播放
bug描述
uniapp 视频播放api, uni.createVideoContext 返回的video对象,的seek 方法，在Android端，华为nova 7 5G 手机上，不起作用。
更多关于uni-app 视频api seek方法 在APP中安卓端无法跳转到指定的位置播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html
解决了吗?我也遇到了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
更多关于uni-app 视频api seek方法 在APP中安卓端无法跳转到指定的位置播放的实战教程也可以访问 https://www.itying.com/category-93-b0.html
针对您提到的uni-app中视频API的seek方法在安卓端无法跳转到指定位置播放的问题，这通常是由于平台差异或具体实现细节导致的。以下是一个简化的代码示例，演示了如何在uni-app中使用视频组件以及seek方法，同时提供了一些可能的解决思路和代码片段来帮助您排查问题。
代码示例
首先，确保您已经在页面中添加了<video>组件，并绑定了相关事件：
<template>
<view>
<video
id="myVideo"
src="your-video-url.mp4"
controls
@loadedmetadata="onLoadedMetadata"
></video>
<button @click="seekToTime(30)">跳转到30秒</button>
</view>
</template>
<script>
export default {
methods: {
onLoadedMetadata(event) {
console.log('视频元数据加载完成');
// 可以在这里进行一些初始化操作，确保视频已准备好
},
seekToTime(seconds) {
const videoContext = uni.createVideoContext('myVideo');
videoContext.seek({
time: seconds, // 目标时间，单位秒
success: () => {
console.log(`成功跳转到 ${seconds} 秒`);
},
fail: (err) => {
console.error('跳转失败', err);
}
});
}
}
}
</script>
解决思路
-
确保视频元数据已加载： 在调用
seek之前，确保视频元数据（loadedmetadata事件）已加载完成。这是因为在元数据未加载前，视频的时长等信息可能还未可知。 -
检查时间单位：
seek方法中的时间单位是秒，确保传入的时间值正确无误。 -
错误处理： 使用
fail回调来捕获seek操作中的错误，这可能提供关于为什么跳转失败的线索。 -
平台差异处理： 虽然uni-app旨在跨平台，但不同平台（尤其是安卓和iOS）在处理视频时仍可能存在差异。可以尝试在安卓设备上调试并查看控制台日志，看是否有更具体的错误信息。
-
版本更新： 确保您的uni-app框架和依赖库都是最新版本，因为开发者社区可能已经修复了旧版本中的一些已知问题。
通过上述代码示例和解决思路，您应该能够更清晰地定位问题所在，并尝试解决在安卓端使用seek方法时遇到的问题。如果问题依旧存在，建议查阅uni-app的官方文档或社区论坛，看看是否有其他开发者遇到并解决了类似的问题。
