uni-app 插件需求 解决本地视频自动循环播放 有偿 需求示例基本满足 插件为nvue自定义播放器(只支持安卓 ios)

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

uni-app 插件需求 解决本地视频自动循环播放 有偿 需求示例基本满足 插件为nvue自定义播放器(只支持安卓 ios)

开发环境与版本信息

信息类别 内容
开发环境 uni-app
版本号 未提及
项目创建方式 未提及

针对这个插件【nvue自定义播放器(只支持安卓,ios) 】https://ext.dcloud.net.cn/plugin?id=785
需要实现几个简单功能
由于本人新手,上手很慢,看了一下插件基本可以满足我的需求:
我的最终目的:打包一个安卓app,
01.首次打开自动获取安卓设备机器吗绑定一个id(因为这个app安装到多个平板设备,不同设置不同id,下载播放不同广告)
02.自动请求下载api传送的视频广告列表(jsion视频列表,后台管理广告视频已经开发完成,有请求接口,需要自动请求接口即可)
03.请求下载本地后,自动循环播放本地视频

测试演示示例,基本上可以满足,由于是新手上手很慢,不知道本地视频如何自动循环,示例是网络视频是可以自动循环播放的
有偿需要高手解决,应该不难的,示例基本都已经满足
我的QQ:184537219 有能解决的可以联系我,再次感谢,谢谢


1 回复

针对您提出的uni-app插件需求,即实现本地视频自动循环播放的功能,以下是一个基于nvue自定义播放器的代码案例。这个案例将展示如何在Android和iOS平台上实现本地视频的自动循环播放。请注意,由于nvue的限制,某些API和组件的使用可能略有不同。

首先,您需要创建一个nvue页面,并在其中嵌入一个自定义的视频播放器组件。以下是一个简单的示例:

nvue页面代码(index.nvue)

<template>
  <div>
    <video
      id="localVideo"
      src="/static/local_video.mp4"
      controls
      autoplay
      loop
      [@ended](/user/ended)="onVideoEnded"
      style="width: 100%; height: auto;"
    ></video>
  </div>
</template>

<script>
export default {
  methods: {
    onVideoEnded(event) {
      // 正常情况下,由于设置了loop属性,视频应该会自动循环播放。
      // 但为了保险起见,可以在视频结束时检查并重新加载视频。
      const videoElement = this.$mp.page.selectComponent('#localVideo');
      if (!videoElement.paused) {
        // 如果视频没有暂停,则手动重置视频
        videoElement.pause();
        videoElement.currentTime = 0;
        videoElement.play();
      }
    }
  }
}
</script>

<style>
/* 样式可以根据需求进行调整 */
</style>

注意事项

  1. src属性:确保/static/local_video.mp4路径正确,且视频文件已正确放置在项目的static目录下。
  2. loop属性:HTML5 <video> 标签的loop属性用于指定视频是否应该循环播放。在这个例子中,我们已经设置了loop属性,因此理论上视频应该会自动循环。
  3. @ended事件:虽然设置了loop属性,但为了确保在所有情况下都能正确处理视频结束事件,我们添加了[@ended](/user/ended)事件监听器。在这个监听器中,我们检查视频是否已暂停,如果没有,则手动重置视频。
  4. nvue限制:nvue页面与普通的vue页面在API和组件支持上有所不同。请确保您的uni-app项目已正确配置以支持nvue页面。

以上代码应能满足您对于本地视频自动循环播放的基本需求。如果在实际应用中遇到任何问题,您可以根据错误信息进行进一步的调试和优化。希望这个示例对您有所帮助!

回到顶部