更新记录

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

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

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

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

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

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

平台兼容性

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

代码演示

<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