uni-app 插件需求 问题反馈 video

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

uni-app 插件需求 问题反馈 video

视频相关问题

  1. 官方安卓端的video和iOS端的video都是用的原生么，还是用了什么其他的开源插件？

  2. video有这么几个问题：

    • 就是开头黑屏，然后再播放，这是最让人头大的（特别是制作短视频上下滑动的时候，闪得厉害）。 到论坛来，翻了很多篇文章，大同小异，都是用一张图片把video盖住，然后就没有黑屏了，但是既然盖住了视频，到时候就应该加载视频，这时候就应该把盖住的图片隐藏了，这个时候就应该判断是什么时候隐藏图片了，但是呢文档里面没看见什么方法可以判断视频加载完成（APP端）可以隐藏图片。 之后在timeupdate里找到了一个当前时间的东西，只要判断当前时间是不是大于0就能知道是不是加载完成了。本以为到最后一步了，谁知道，只要视频间滑动稍快一点，timeupdate既然不执行了，要重新滑上去滑下来，而且还要慢慢滑才会执行，这就很迷了，用户滑来滑去很正常的操作还中间偶尔不执行，这样的话封面就不会隐藏了，体验大幅下降。

    • video视频组件没有缓冲和预加载的能力，每次滑动还不能记住视频，消耗大量流量，像短视频这类应用，即滑即播是最重要的，流量都是其次的，预加载的能力是很重要的，起码得返回一个加载缓冲的方法，告诉开发者，这样一个现在的进度，一个缓冲的进度，就能解决很多很多问题。

    • 可以参考一下腾讯云播放器sdk开源免费封装好的sdk，如果可以的话能升级是最好的，起码加一个缓冲进度。

  3. 附件或者 demo 的话我已经发布到插件市场了：可以下载测试：地址：https://ext.dcloud.net.cn/plugin?id=5656


Harmonyos Next教程
1 回复

针对您提出的uni-app中关于video插件的需求和问题反馈，以下是一个具体的代码案例以及相关的注意事项，旨在帮助您更好地集成和使用video组件。

uni-app Video组件使用示例

在uni-app中，video组件用于嵌入视频播放功能。以下是一个简单的使用示例：

<template>
  <view class="container">
    <video
      id="myVideo"
      src="https://www.example.com/path/to/your/video.mp4"
      controls
      autoplay
      loop
      muted
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}
video {
  width: 300px;
  height: auto;
}
</style>

注意事项与问题排查

  1. 视频源地址：确保src属性中的视频地址正确无误，并且该视频可以在浏览器中正常播放。

  2. 自动播放与静音：在某些浏览器中，为了用户体验考虑，自动播放的视频可能需要静音。上述示例中已设置autoplay和muted属性。

  3. 跨域问题：如果视频托管在不同的域上，可能会遇到跨域资源共享（CORS）问题。确保服务器设置了正确的CORS头部。

  4. 事件监听：通过监听play、pause、ended等事件，可以执行相应的逻辑处理，如更新UI状态等。

  5. 性能优化：对于长视频或高清视频，考虑使用视频的分段加载或选择合适的编码格式以优化播放性能。

  6. 兼容性问题：不同平台（如小程序、H5、App等）可能对video组件的支持有所差异，建议参考uni-app官方文档进行针对性调整。

通过上述代码示例和注意事项，您应该能够在uni-app中顺利集成和使用video组件。如果遇到具体问题，建议查阅uni-app社区或官方文档获取更多帮助。

回到顶部