您好，我使用了您发的uniapp打包apk播放webm的文章中的方法，请问这种写法怎么可以请求到视频播放结束的ended方法？

Question

您好，我使用了您发的uniapp打包apk播放webm的文章中的方法，请问这种写法怎么可以请求到视频播放结束的ended方法？请赐教，感恩

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

您好！感谢您的提问。在使用 UniApp 打包成 APK 并播放 WebM 格式的视频 时，如果希望监听视频播放结束的 ended 事件，需要注意以下几点：

---

✅ 一、问题分析

您提到“使用了我发的文章中的方法”，但没有提供具体代码，因此我们假设您是通过 <video> 标签或 uni.createVideoContext 来播放 WebM 视频。

在 UniApp 中，由于平台差异（如 H5 和 小程序），某些 HTML5 的事件可能无法直接使用，比如 ended 事件。因此需要特别注意兼容性。

---

✅ 二、解决方案

1. 使用 <video> 标签 + @ended 事件

这是最常见的方式，适用于 H5 环境和部分小程序支持的平台（如微信小程序）。

<template>
  <view>
    <video :src="videoUrl" @ended="onVideoEnded" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.webm'
    };
  },
  methods: {
    onVideoEnded() {
      console.log('视频播放结束');
      // 这里可以执行播放结束后需要的操作
    }
  }
};
</script>

重点： 在 H5 和部分小程序中，@ended 是可以直接使用的。

---

2. 使用 uni.createVideoContext（适用于小程序）

如果您使用的是 uni.createVideoContext 创建的视频上下文，可以通过 onEnded 方法来监听播放结束事件。

<template>
  <view>
    <video id="myVideo" :src="videoUrl" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.webm'
    };
  },
  onReady() {
    const videoContext = uni.createVideoContext('myVideo');
    videoContext.onEnded(() => {
      console.log('视频播放结束');
      // 这里可以执行播放结束后需要的操作
    });
  }
};
</script>

重点： uni.createVideoContext 更适合小程序环境，特别是微信小程序。

---

3. 注意事项（重要！）

• WebM 格式支持情况：

  • H5 浏览器基本都支持 WebM。
  • 微信小程序不支持 WebM，需转为 MP4 或其他格式。
  • 其他小程序（如抖音、百度）也需确认是否支持 WebM。

• 跨平台兼容性：

  • 如果你打包为 APK，实际是基于 H5 渲染的，所以 @ended 事件在 H5 中是有效的。
  • 但如果目标平台不支持 WebM，可能会导致视频无法播放，进而影响 ended 事件触发。

---

✅ 三、总结

要成功监听视频播放结束的 ended 事件，请按照以下步骤操作：

1. 使用 <video> 标签并绑定 @ended 事件；
2. 或使用 uni.createVideoContext 并调用 onEnded() 方法；
3. 确保视频格式兼容目标平台（如 WebM 在 H5 中可用，但在小程序中不可用）；
4. 调试时可添加日志，确认事件是否被触发。

---

✅ 四、示例代码（完整版）

<template>
  <view>
    <video id="myVideo" :src="videoUrl" @ended="onVideoEnded" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.webm'
    };
  },
  methods: {
    onVideoEnded() {
      console.log('✅ 视频播放结束事件已触发！');
      // 播放结束后逻辑
    }
  }
};
</script>

---

如果您能提供具体的代码片段或遇到的具体错误信息，我可以进一步帮助您排查问题。祝您开发顺利！🙏