uniapp 微信小程序腾讯视频插件在手机上播放一两秒后自动跳到最后怎么办？

Question

这是uniapp写的一个微信小程序；

我使用腾讯视频插件；

配置是没有问题应该，在电脑中开发者工具中是可以正常使用的。

在手机中体验时，视频会播一两秒后，就会自动跳到最后一秒，然后也拖不动。

<script setup lang="ts">

</script>

<template>
    <view class="w-full h-full bg-black">
      <player-component
        id="tvp-id"
        playerid="tvp"
        vid="g3179w437mg"
        class="w-full h-full"
      />
    </view>

</template>

vendor.js:7301 App: onLaunch have been invoked
vendor.js:7285 App: onShow have been invoked
index.js:195 App route: 
- path: pages/home/index
- openType: appLaunch
- renderer: webview
- componentFramework: exparser
vendor.js:6162 [Component] generic "wx-custom-layer" is not instantiated. The default component is used instead.
patch @ vendor.js:6162
vendor.js:6162 [Component] generic "wx-custom-toast" is not instantiated. The default component is used instead.
patch @ vendor.js:6162
vendor.js:6162 setting playerid is deprecated, please use selectComponent
patch @ vendor.js:6162
vendor.js:7813 Update view with init data
vendor.js:7813 pages/home/index: onLoad have been invoked
vendor.js:7638 pages/home/index: onShow have been invoked
vendor.js:7214 pages/home/index: onRouteDone have been invoked
vendor.js:6165 Invoke event onReady in page: pages/home/index
vendor.js:6165 pages/home/index: onReady have been invoked

腾讯视频插件官方文档

使用了GPT5进行解答失败。
使用相关文档中的办法进行解答失败。

Answer 1

根据你描述的问题及代码分析，视频播放异常的原因可能是微信小程序插件在真机环境下的兼容性问题。以下是针对性解决方案：

根本原因分析

1. 插件初始化问题：控制台警告 setting playerid is deprecated 表明你使用的 playerid 属性已被弃用
2. 移动端环境差异：手机端对视频自动播放策略（iOS/Android）更严格
3. 插件生命周期冲突：开发者工具和真机的渲染机制存在差异

解决方案

1. 使用官方推荐初始化方式（替代已弃用属性）

<script setup lang="ts">
import { ref, onReady } from "@dcloudio/uni-app"

const player = ref(null)

onReady(() => {
  const query = uni.createSelectorQuery()
  query.select('#tvp-id').node()
  query.exec((res) => {
    player.value = res[0].node
    player.value.play()
  })
})
</script>

<template>
  <view class="w-full h-full bg-black">
    <player-component
      id="tvp-id"
      vid="g3179w437mg"
      autoplay
      class="w-full h-full"
    />
  </view>
</template>

2. 增加用户交互触发（规避自动播放限制）

<template>
  <view class="w-full h-full bg-black" @click="handlePlay">
    <player-component
      id="tvp-id"
      vid="g3179w437mg"
      :autoplay="false"
      class="w-full h-full"
    />
    <button class="play-btn">点击播放</button>
  </view>
</template>

<script setup>
const handlePlay = () => {
  const query = uni.createSelectorQuery()
  query.select('#tvp-id').node()
  query.exec((res) => {
    res[0].node.play()
  })
}
</script>

3. 强制指定视频配置（防止异常跳转）

<player-component
  id="tvp-id"
  vid="g3179w437mg"
  :config="{
    controls: true,
    playbackRate: 1.0,
    autoplay: true,
    muted: true, // iOS必须静音
    ignoreAutoPlayPolicy: true // 安卓专用
  }"
/>

必须检查的关键点

1. SDK版本兼容：

   // manifest.json
   "mp-weixin" : {
     "plugins": {
    "player": {
      "version": "2.3.2", // 确保≥2.3.0
      "provider": "wxa75efa648b60994b"
    }
     }
   }

2. 基础库设置：
   在微信公众平台 → 设置 → 基础库最低版本设为 2.24.4+
3. 真机调试检查项：
4. 打开调试模式查看 console.error
5. 在 app.json 添加 "requiredBackgroundModes": ["audio"]

备用解决方案

如果仍失败，使用官方推荐的播放组件接入方式：

<template>
  <txv-video 
    vid="g3179w437mg"
    playerid="txv1"
    :autoplay="false"
    style="width:100%;height:300px"
    @ready="handleReady" 
  />
</template>

<script>
export default {
  methods: {
    handleReady(e) {
      this.player = e.detail.player
      this.player.play()
    }
  }
}
</script>

注意：真机测试前务必在微信开发者工具设置：详情→本地设置→勾选「不校验合法域名」

修复效果验证

1. Android测试：在 onLoad 加入 setTimeout(()=>player.play(), 1000)
2. iOS测试：必须保持 muted: true 并绑定用户交互事件

如果问题仍然存在，可能是视频源格式问题（建议更换为 vid:"v3206frc7x6" 测试官方示例视频）