uni-app中video组件第一秒播放不了，只能通过手指快进才能播放，有人知道原因嘛

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app中video组件第一秒播放不了，只能通过手指快进才能播放，有人知道原因嘛

  1. video视频只能播放MP4。却不能播放mp4?这么奇怪？
  2. 视频如果从0秒开始播放。会一直在加载中。但是快进或者设置video从1秒开始却能正常播放
    • controls=false 按官方的说明应该是不会显示 播放、暂停、进度、全屏。都是无效。IOS 安卓都一样
  3. 可以给video加浮层嘛？比如加一个退回的按钮。需求为：不显示任何进度。点击视频中任何一处可以暂停或播放
    • 有大神嘛。难受
开发环境 版本号 项目创建方式

Harmonyos Next教程
6 回复

2、视频如果从0秒开始播放。会一直在加载中。但是快进或者设置video从1秒开始却能正常播放 这个是你设置了这个参数initial-time:为0不能播放是吗？


这个解决了。。之前是用流输出的。。现在改成了直接加载视频地址

video视频只能播放MP4。却不能播放mp4?这么奇怪？ 提供下视频地址

3.controls=“false” 按官方的说明应该是不会显示 播放、暂停、进度、全屏。都是无效。IOS 安卓都一样 这个参数是布尔值试试

谢谢。。确实是加了双引号的问题

在uni-app中遇到video组件第一秒无法播放，而只能通过手动快进才能播放的问题，通常与视频文件的加载、缓冲策略或组件的初始化状态有关。以下是一些可能的代码示例和排查思路，帮助你定位和解决这一问题。

1. 检查视频源与格式

首先确保视频文件的格式和编码是被uni-app支持的。常见的支持格式包括MP4、WebM等。

<template>
  <view>
    <video
      id="myVideo"
      src="path/to/your/video.mp4"
      controls
      autoplay
      @loadedmetadata="onLoadedMetadata"
      @timeupdate="onTimeUpdate"
    ></video>
  </view>
</template>

2. 监听视频加载状态

通过监听loadedmetadata事件来确认视频元数据是否已加载完成。

export default {
  methods: {
    onLoadedMetadata(event) {
      console.log('Video metadata loaded');
      // 可以在这里尝试手动播放视频，看是否能解决问题
      // this.$refs.myVideo.play(); // 如果使用了ref而非id，可以这样调用
    },
    onTimeUpdate(event) {
      console.log('Current time:', event.detail.currentTime);
    }
  }
}

3. 尝试预加载视频

设置preload属性为auto，让浏览器在页面加载时就开始预加载视频数据。

<video
  id="myVideo"
  src="path/to/your/video.mp4"
  controls
  autoplay
  preload="auto"
></video>

4. 使用ref手动控制播放

如果通过属性设置无法解决问题，可以尝试使用ref手动控制视频播放。

<template>
  <view>
    <video
      ref="myVideo"
      src="path/to/your/video.mp4"
      controls
      @loadedmetadata="tryPlay"
    ></video>
  </view>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      // 尝试在页面渲染完成后立即播放
      this.tryPlay();
    });
  },
  methods: {
    tryPlay() {
      const video = this.$refs.myVideo[0]; // uni-app中ref返回的是数组
      if (video.readyState >= 3) { // HAVE_ENOUGH_DATA
        video.play();
      } else {
        setTimeout(() => this.tryPlay(), 100); // 延迟重试
      }
    }
  }
}
</script>

总结

以上代码示例提供了检查视频格式、监听加载状态、预加载视频以及手动控制播放的方法。如果问题依旧存在，建议检查视频文件本身是否有问题（如损坏、编码问题等），或者尝试在不同的设备和网络环境下播放，以排除环境因素的影响。

回到顶部