更新记录

2.0.0（2024-09-22） 下载此版本

重构代码，使用了composition-api；修复解决个别情况下样式出现错乱问题

1.2.1（2024-08-06） 下载此版本

修复 多个视频同一页面首次点击会同步播放问题

1.2.0（2024-03-16） 下载此版本

新增自动跳转到历史位置及提示

平台兼容性

uni-app

sunny-video视频倍速播放器

组件名：sunny-video

平台差异说明

• 目前已应用到APP（安卓、iOS）、微信（小程序、H5）
• 其它平台未测试

安装方式

• 本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。
• uni-app插件市场链接 —— https://ext.dcloud.net.cn/plugin?id=11982

基本用法

• APP端需要配置manifest.json>App模块配置勾选VideoPlay(视频播放)
• App端：3.6.14 以及 手机系统 iOS16 以上video全屏 需要配置应用支持横屏： 在manifest.json 文件内 app-plus 节点下新增 screenOrientation 配置，设置值为["portrait-primary","portrait-secondary","landscape-primary","landscape-secondary"]。如下：

  "app-plus" : {
  "screenOrientation" : [
       "portrait-primary",
       "portrait-secondary",
       "landscape-primary",
       "landscape-secondary"
  ]
  }

  vue2使用必看

• 自2.0.0开始，本组件使用composition-api, 如果你希望在vue2中使用，需要在main.js中的vue2部分中添加如下关键代码块

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

• 更多说明请查看官方教程vue-composition-api

如果你未遇到编译错误，可以忽略下段内容

• 自2.0.0开始，本组件用到了TypeScript你可遇到出现编译错误，如下:

  File was processed with these loaders:
  *./node modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  import VideoProps from./props"
  import {getPx, addunit.convertsecondsToHMs} from'./utils
  import type {stateData,rateListData }from './type'

• 可以尝试如下解决办法：
  1. 如果你是cli项目，尝试安装@vue/cli-plugin-typescript和typescript，执行npm install typescript @vue/cli-plugin-typescript 或 yarn add typescript @vue/cli-plugin-typescript，同时在根目录创建tsconfig.json，并进行个性化配置，查看推荐配置： 更多说明请查看官方教程TypeScript 支持
  2. 非cli项目，请更新HBuilder X，或者官方的TS版本过低导致的问题请到\HBuilderX\plugins\compile-typescript目录下，执行npm install typescript -D或yarn add typescript -D

代码演示

<template>
    <view>
        <sunny-video 
            ref="sunnyVideoRef" 
            title="测试视频" 
            src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" 
            poster="https://ask.dcloud.net.cn/static/images/side/ask_right_unicloud_class.jpg"
            :trialTime="20"
            :seekTime="5"
            @timeupdate="timeupdate" 
        />
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            timeupdate(e){
            }
        }
    }
</script>

<style>
</style>

Props

事件 Events

方法 Methods

• 需要通过ref获取组件才能调用

注意事项

• APP全屏需要按照文档基本用法进行配置，
• APP端如果需要全屏倍速及试看，需要使用.nvue文件
• vue2项目中使用，需要按照文档vue2使用必看进行配置
• 问题反馈交流群：122150481
• 如果你遇到编译失败的错误，请查看vue2使用必看尝试解决