uni-app 视频播放器插件

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

uni-app 视频播放器插件

video组件全屏后没有标题和返回按钮。

1 回复

在uni-app中实现视频播放器插件,你可以利用uni-app官方提供的组件或第三方插件来完成。下面是一个基于uni-app自带<video>组件的简单视频播放器示例,以及一个集成第三方视频播放器插件(例如uni-video-player)的示例。

示例一:使用uni-app自带的<video>组件

首先,确保你的项目已经创建并初始化。然后,在你的页面中添加以下代码:

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

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

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

示例二:使用第三方插件uni-video-player

首先,安装uni-video-player插件(假设你使用的是HBuilderX,可以直接在插件市场搜索并安装)。

然后,在你的页面中引用并使用该插件:

<template>
  <view class="container">
    <uni-video-player
      ref="videoPlayer"
      :src="videoSrc"
      :autoplay="true"
      :controls="true"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></uni-video-player>
  </view>
</template>

<script>
import uniVideoPlayer from '@/components/uni-video-player/uni-video-player.vue';

export default {
  components: {
    uniVideoPlayer
  },
  data() {
    return {
      videoSrc: 'https://www.example.com/path/to/your/video.mp4'
    };
  },
  methods: {
    onPlay() {
      console.log('Video is playing');
    },
    onPause() {
      console.log('Video is paused');
    },
    onEnded() {
      console.log('Video has ended');
    }
  }
}
</script>

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

这两个示例展示了如何在uni-app中实现基本的视频播放器功能。第一个示例使用了uni-app自带的<video>组件,而第二个示例则使用了第三方插件uni-video-player,提供了更多的自定义功能和更好的用户体验。根据具体需求,你可以选择适合你的方案。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!