uni-app IOS端Video组件指定视频初始播放位置无效

uni-app IOS端Video组件指定视频初始播放位置无效

开发环境 版本号 项目创建方式
Mac MacOS Catalina 10.15.7 HBuilderX 
## 示例代码：

```vue
<template>    
    <view>    
        <video id="myVideo" src="http://video.haier.wxcy.tv/dz/msjt/2f8ed4c1b2cf41f78a629e2df4b90b01.mp4"    
            :initial-time="10" autoplay="true" :duration="endTime" @ended="videoEnd" @timeupdate="videoTimeUpdate"></video>    
    </view>    
</template>    

<script>    
export default {    
    data() {    
        return {    
            endTime: 150,    
            videoContext: null    
        }    
    },    
    onLoad() {    

    },    
    onReady() {    
        this.videoContext = uni.createVideoContext('myVideo');    
        //IOS端无效    
        this.videoContext.seek(10);    
    },    
    methods: {    
        videoEnd() {    
            console.log("播放结束");    
        },    
        videoTimeUpdate(e) {    
            console.log("当前播放位置：" + e.target.currentTime);    
            if (e.target.currentTime >= this.endTime) {    
                this.videoContext.stop();    
            }    
        }    
    }    
}    
</script>

操作步骤：

Video组件绑定initial-time参数，动态修改参数值无效

预期结果：

视频加载成功后，应当从设置的秒数时间开始播放

实际结果：

视频加载成功后，设置时间无效！

bug描述：

IOS端Video组件设置参数initial-time（指定视频初始播放位置）无效！Android端无此问题！


更多关于uni-app IOS端Video组件指定视频初始播放位置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

用示例代码hello uni-app能出现你的问题吗？ 不能的话你需要排查出来具体你哪个页面，甚至哪一行导致的。 找出来具体原因后提供一个能复现你描述的bug的最小化demo，让我们及时定位问题，及时修复。

更多关于uni-app IOS端Video组件指定视频初始播放位置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


麻烦确认下示例代码在IOS端是否存在问题！

IOS13.6.1，iPhone 6s Plus测试正常，未复现问题。

顶一下啊！

我也遇到这个问题了

我直接用你的代码测试，完全没有问题

uni-app IOS端Video组件初始播放位置问题分析

这是一个在iOS平台上Video组件初始播放位置设置无效的已知问题。根据您提供的代码和描述，我来分析原因和可能的解决方案：

问题原因

  1. iOS平台对视频播放的控制机制与Android不同，特别是在初始加载阶段
  2. initial-time属性在iOS上可能不会立即生效，需要等待视频完全加载
  3. 通过videoContext.seek()方法在onReady中调用时，视频可能还未准备好接受seek操作

解决方案

  1. 使用@loadedmetadata事件：在视频元数据加载完成后再设置播放位置
<template>
    <view>
        <video id="myVideo" src="http://video.haier.wxcy.tv/dz/msjt/2f8ed4c1b2cf41f78a629e2df4b90b01.mp4"
            :initial-time="10" autoplay="true" :duration="endTime" 
            @ended="videoEnd" @timeupdate="videoTimeUpdate" @loadedmetadata="videoLoaded"></video>
    </view>
</template>

<script>
export default {
    methods: {
        videoLoaded() {
            setTimeout(() => {
                this.videoContext.seek(10);
            }, 500); // 添加短暂延迟确保seek操作有效
        }
    }
}
</script>
  1. 使用@play事件：在视频开始播放时设置位置
<template>
    <video @play="handlePlay"></video>
</template>

<script>
export default {
    methods: {
        handlePlay() {
            this.videoContext.seek(10);
        }
    }
}
</script>
回到顶部