更新记录

1.1.2（2024-06-25） 下载此版本

加载时显示loading图标

1.1.1（2024-06-21） 下载此版本

修复多个 ml-player 情况下 使用showPlayer失效问题

1.1.0（2024-06-17） 下载此版本

删除无用日志文件

平台兼容性

uni-app

其他

ml-player

ml-player 介绍

1. 使用 uniapp 的原生 video 标签播放，解决了 video 在APP以及H5等 宽度定死的情况下，高度无法自适应的问题，以及 video 的层级问题。
2. ml-player 中增加了，videoClick 单击事件、doubleClick 双击事件、视频倍速、预览图等功能。
3. ml-player只对 video 做了增强，未改变 uniapp 中的原始方法。
4. 可以更改视频的展示形式。

使用说明

1. APP端需要配置manifest.json -> App模块配置 -> 勾选VideoPlay(视频播放)。
2. 运行到微信小程序videoSrc要为http/https开头。

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

代码演示

<template>
  <ml-player
    :video="videoInfo"
    :videoOptions="options"
    @play="videoPlay"
    @pause="videoPause"
    @videoClick="videoClick"
    @doubleClick="doubleClick"
  ></ml-player>
</template>

<script setup>
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  const videoInfo = ref({}); // 视频信息配置项

  const winInfo = uni.getSystemInfoSync();
  const width = winInfo.windowWidth; // 设备宽度
  const height = winInfo.windowHeight; // 设备高度

  // 视频播放器配置项
  const options = { 
    // width,  // 播发器的宽度，不传与设备保持一致
    // height, // 播放器的高度，不传是设备高度的1/3
    enableClick: true, // 开始视频单击事件，默认false
    enableDblClick: true, // 开始视频的双击事件，默认false
    autoplay: false, // 不自动播放，默认true
    // controls: true, // 显示视频控制条，默认true
    fillHeight: true // 播放器的高度，填充播放器高度与设备同高，播放器高度占满全屏，默认false
  };

  const playing = ref(false); // 是否正在播放
  let videoContext = null; // 播放器上下文对象

  /**
   * 视频开始播放
   * @param { UniApp.VideoContext } context 播放器上下文对象
   */
  function videoPlay(context ){
    videoContext = context;
    playing.value = true;
  }

  /**
   * 视频暂停播放
   * @param { UniApp.VideoContext } context 播放器上下文对象
   */
  function videoPause(context){
    videoContext = context;
    playing.value = false;
  }

  /**
   * 点击了视频事件
   * @param { UniApp.VideoContext } context 播放器上下文对象
   * @param { Object } info 视频信息
   */
  function videoClick(context, info) {
    console.log("视频信息：", info)
    videoContext = context;
    if (playing.value) {
      videoContext?.pause();
    } else {
      videoContext?.play();
    }
  }

  /**
   * 视频双击事件
   * @param { UniApp.VideoContext } _context 播放器上下文对象
   * @param { Object } info 视频信息
   */
  function doubleClick(_context, info) {
    console.log(info)
    uni.showToast({ title: "双击了视频", icon: "none", mask: false });
  }

  /**
   * 请求接口，获取视频信息
   */
  const getVideoInfo = () => {
      // 模拟请求后台，获取到视频信息
    return 
      {
        videoId: list.value.length + 1,
        title: "抖音美女主播，JK超短裙学生妆美女跳舞展示，爱了爱了。",
        poster: "https://i02piccdn.sogoucdn.com/2acf176d90718d73",
        url: "https://txmov2.a.yximgs.com/upic/2020/11/08/19/BMjAyMDExMDgxOTQxNTlfNTIzNDczMzQ0XzM4OTQ1MDk5MTI4XzFfMw==_b_Bc770a92f0cf153407d60a2eddffeae2a.mp4",
        uploadTime: "2023-11-08 19:41",
        ipLocation: "上海",
        author: {
          authorId: 101,
          avatar: "https://i02piccdn.sogoucdn.com/4f85fc70df81d04a",
          nickName: "陌路",
          genderName: "男"
        }
      }
  }

  onLoad(() => {
    videoInfo.value = getVideoInfo();
  });
</script>

<style scoped lang="scss">
</style>

props

video：视频资源配置项

videoOptions：播放器配置项

80%的配置与uniapp中的保持一致，与 uniapp 中的配置保持一致：详见（https://uniapp.dcloud.net.cn/component/video.html）； 部分配置 uniapp 中不存在，为本组件新增的配置

video：弹幕配置项

与 uniapp 中的配置保持一致：详见（https://uniapp.dcloud.net.cn/component/video.html）

事件 Events

事件参数的上下文对象与uniapp的保持一致，详见（https://uniapp.dcloud.net.cn/api/media/video-context.html#createvideocontext） 事件参数中的 event 与 uniapp 中的保持一致：详见（https://uniapp.dcloud.net.cn/component/video.html） 事件参数中的 video 与 props 中的入参 video 保持一致

注意事项

• APP需要按照文档进行配置。
• APP端单击事件，需要使用.nvue文件。
• APP端需要配置manifest.json -> App模块配置 -> 勾选VideoPlay(视频播放)。