uni-app video 标签中使用 initial-time 属性在 iOS 中导致无法播放的问题

uni-app video 标签中使用 initial-time 属性在 iOS 中导致无法播放的问题

开发环境 版本号 项目创建方式
Mac 11.4 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：11.4

HBuilderX类型：正式

HBuilderX版本号：3.3.10

手机系统：iOS

手机系统版本号：iOS 14

手机厂商：苹果

手机机型：iPhone 8

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<video  
    id="realPlayVideo"  
    :autoplay="true"  
    :loop="true"  
    :src="realPlayURL"  
    :http-cache="false"  
    :initial-time="120"  
    :show-progress="false"  
    :title="deviceName"  
    @play="startHandle"  
    @pause="stopHandle"  
    @error="videoErrorCallback"  
    @fullscreenchange="enterFullScreenOrNot"  
><\/video>

操作步骤：

  1. 将initial-time设置为120。
  2. 播放一个RTSP视频流。
  3. 在iOS中进行实验，发现无法播放。

预期结果： 播放当前最新的直播画面。

实际结果： Android可以播放，但是 iOS无法播放。

bug描述： 在项目中我们使用了 video 标签进行播放 rtsp 媒体流的监控直播画面，iOS 和 Android都能正常播放，但是由于加载视频流时需要较长的时间，例如加载视频A,经历了5秒，则开始播放的画面为5秒前的画面，加载时长为10秒，则开始播放时的画面为10秒前的画面，这样存在较大的延迟。我们将 initial-time 设置为 120，在安卓中，如果视频加载时间为5秒，而我们将起始播放时间设为了120秒，但是120秒处没有资源，则视频被强制拉回最新的播放页面，从而解决了加载时常导致的延迟问题，但是在iOS进行实验时，发现该属性设为0之外的后任何数值，视频都无法正常加载，且无法播放。（或者还有其他方案可以解决这个延迟问题吗？）


更多关于uni-app video 标签中使用 initial-time 属性在 iOS 中导致无法播放的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个问题解决了没啊？

更多关于uni-app video 标签中使用 initial-time 属性在 iOS 中导致无法播放的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 video 标签时，initial-time 属性用于设置视频开始播放的时间点。然而，在 iOS 设备上，使用 initial-time 属性可能会导致视频无法正常播放的问题。这通常是由于 iOS 对视频播放的某些限制或处理方式与 Android 不同所导致的。

可能的原因

  1. iOS 对视频播放的处理机制：iOS 对视频播放的处理可能与 Android 不同，特别是在处理 initial-time 属性时，可能会导致视频无法正常加载或播放。
  2. 视频格式或编码问题：某些视频格式或编码在 iOS 上可能不被完全支持，尤其是在指定了 initial-time 的情况下。
  3. 缓存或预加载问题：iOS 可能对视频的缓存或预加载机制有不同的处理方式，导致在指定了 initial-time 后，视频无法正确加载。

解决方案

  1. 避免使用 initial-time 属性：如果可能，尽量避免使用 initial-time 属性，或者通过其他方式实现类似的功能。例如，可以在视频加载完成后，通过 seek 方法跳转到指定时间点。

    <video id="myVideo" src="video.mp4" [@loadedmetadata](/user/loadedmetadata)="onLoadedMetadata"></video>

methods: {
  onLoadedMetadata(event) {
    const video = event.target;
    video.currentTime = 10; // 跳转到第10秒
  }
}

  2. 使用 seek 方法：在视频加载完成后，使用 seek 方法跳转到指定时间点，而不是依赖 initial-time 属性。

    <video id="myVideo" src="video.mp4" [@canplay](/user/canplay)="onCanPlay"></video>

methods: {
  onCanPlay(event) {
    const video = event.target;
    video.currentTime = 10; // 跳转到第10秒
  }
}

  3. 检查视频格式和编码：确保视频格式和编码在 iOS 上被完全支持。常见的支持格式包括 MP4（H.264 编码）。

  4. 使用 uni.createVideoContext：在 uni-app 中，可以使用 uni.createVideoContext 来创建视频上下文，并通过 seek 方法跳转到指定时间点。

    <video id="myVideo" src="video.mp4"></video>

mounted() {
  const videoContext = uni.createVideoContext('myVideo', this);
  videoContext.seek(10); // 跳转到第10秒
}
回到顶部