video 标签当使用了 autoplay="true" 时设置 duration 在 uni-app 打包成 Android 平台 duration 不生效

video 标签当使用了 autoplay=“true” 时设置 duration 在 uni-app 打包成 Android 平台 duration 不生效

开发环境 版本号 项目创建方式
Mac 13-inch, M1, 2020 HBuilderX
Android Android 14
三星 SM-S9010

示例代码：

  <!-- 播放器 -->  
  <view class="fullscreen-video">  
    <!-- 视频播放器 -->  
        <view>  
                <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"  
                    autoplay="true" :duration="duration"  enable-danmu danmu-btn controls></video>  
        </view>  
  </view>  
```

```typescript
<script setup lang="ts">  
/**  
 * 视频消息组件  
 */  
import { ref, onMounted, onUnmounted } from 'vue';  

const videoContext = ref<UniApp.VideoContext | null>(null);  
const duration = ref<number>(50);  
// 处理视频错误  
const handleVideoError = (e: any) => {  
  uni.showToast({ title: '视频播放失败', icon: 'none' });  
};  

onMounted(() => {  
  videoContext.value = uni.createVideoContext('messageVideo', this);  
});  

onUnmounted(() => {  
  videoContext.value?.pause();  
});  
</script>
```

### 操作步骤：
参考代码示例 

### 预期结果：
Android 在 autoplay 为 true 时可以设置成功 duration 属性。

### 实际结果：
无效

### bug描述：
video 标签当使用了 autoplay="true" 时设置 duration 在打包成 Android 平台 duration 不生效。其他平台均可生效，仅 Android平台展示的还是默认识别的时间。

更多关于video 标签当使用了 autoplay="true" 时设置 duration 在 uni-app 打包成 Android 平台 duration 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于video 标签当使用了 autoplay="true" 时设置 duration 在 uni-app 打包成 Android 平台 duration 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的Android平台兼容性问题。在uni-app中，当video组件设置autoplay=true时，Android原生播放器会优先使用视频本身的元数据duration，而忽略我们通过属性设置的duration值。

解决方案建议：

  1. 改用videoContext的seek方法在播放时跳转到指定位置：
onMounted(() => {
  videoContext.value = uni.createVideoContext('myVideo', this);
  videoContext.value.seek(duration.value);
});
  1. 或者延迟设置autoplay，先加载视频后再自动播放：
<video :autoplay="isAutoplay" @loadedmetadata="handleLoaded"/>

const isAutoplay = ref(false);
const handleLoaded = () => {
  isAutoplay.value = true;
  videoContext.value.seek(duration.value);
}
回到顶部