更新记录

2.1.9（2022-11-15）

• 修改bug：没有抛出ended事件

2.1.8（2022-10-31）

• 添加参数
  • initialTime: 指定视频初始播放位置，单位为秒 (s)
• 添加事件
  • ended: 当播放到末尾时触发 ended 事件

2.1.7（2022-09-19）

• 修改bug：取消全屏，隐藏全部遮罩

平台兼容性

hic-video-player 视频播放器组件

只是在 uniapp 的 video 组件外多包一层

用法

示例1

通过src传参

<view style="width: 100vw; height: 400rpx;">
    <hic-video-player
        :src="url"
        :poster="poster"
        title="明智之举"
        upperRightText="VAE"></hic-video-player>
</view>

export default {
    data() {
        return {
            url: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/mda-kjq8j5b86q720jcr.mp4',
            poster: 'http://n.sinaimg.cn/sinacn10/640/w720h720/20180624/27c7-heirxye9435927.jpg'
        }
    }
}

示例2

通过definition切换清晰度

<view style="width: 100%; height: 400rpx;">
    <hic-video-player
        :definition="definition"
        autoplay
        title="明智之举"
        upperRightText="VAE"></hic-video-player>
</view>

export default {
    data() {
        return {
            definition: [   // 清晰度视频地址列表
                { key: 'sd', name: '标清', src: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/mda-kjq8j5b86q720jcr.mp4' },
                { key: 'hd', name: '高清', src: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/hd/mda-kjq8j5b86q720jcr.mp4' },
                { key: 'sd_', name: '超清', src: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/sc/mda-kjq8j5b86q720jcr.mp4' }
            ],
        }
    }
}

示例3

非wifi网络提示流量播放

vuex存数据，本次打开应用提示过一次，不再提示（完整代码见示例项目）

<view id="realVideo">
    <hic-video-player
        :definition="definition"
        :poster="poster"
        autoplay
        title="明智之举"
        controls-toggle-title
        upperRightText="VAE"
        :width="width" :height="height"
        :tipNotWifi="!playVideoByTraffic"
        @trafficPlayVideo="trafficPlayVideo"></hic-video-player>
</view>

import { mapGetters, mapMutations } from 'vuex';
export default {
    data() {
        return {
            // 封面图片地址
            poster: 'http://n.sinaimg.cn/sinacn10/640/w720h720/20180624/27c7-heirxye9435927.jpg',
            // 清晰度视频地址列表
            definition: [
                { key: 'sd', name: '标清', src: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/mda-kjq8j5b86q720jcr.mp4' },
                { key: 'hd', name: '高清', src: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/hd/mda-kjq8j5b86q720jcr.mp4' },
                { key: 'sd_', name: '超清', src: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/sc/mda-kjq8j5b86q720jcr.mp4' }
            ],
            width: '',
            height: '',
        }
    },
    computed: {
        // 使用流量播放视频
        ...mapGetters(['playVideoByTraffic'])
    },
    mounted() {
        uni.createSelectorQuery().in(this).select('#realVideo').boundingClientRect(res => {
            this.width = res.width + 'px';
            let height = (res.width / 16) * 9;
            this.height = Math.round(height*100)/100 + 'px';
            // 视频宽高比 16:9
        }).exec();
    },
    methods: {
        // 本次打开应用，提示过一次，不再提示
        ...mapMutations(['trafficPlayVideo'])
    }
}

vuex：store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        promptOnce: false   // 是否 提示过一次
    },
    getters: {
        playVideoByTraffic: (state) => {
            // 使用流量播放视频
            return state.promptOnce;
        }
    },
    mutations: {
        trafficPlayVideo(state) {
            state.promptOnce = true;
        }
    }
});

export default store;

示例4

通过 playbackrate 设置倍速播放

<view style="width: 100vw; height: 400rpx;">
    <hic-video-player
        :src="url"
        :poster="poster"
        playbackrate
        title="明智之举"
        upperRightText="VAE"></hic-video-player>
</view>

export default {
    data() {
        return {
            url: 'https://vd4.bdstatic.com/mda-kjq8j5b86q720jcr/mda-kjq8j5b86q720jcr.mp4',
            poster: 'http://n.sinaimg.cn/sinacn10/640/w720h720/20180624/27c7-heirxye9435927.jpg'
        }
    }
}

示例5

通过useLivePlayer，设置使用live-player实时音视频播放组件

使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目 (opens new window)、百度小程序类目 (opens new window)），审核通过后在各家小程序管理后台自助开通该组件权限。

详细说明见官方文档

<template>
    <view style="width: 100vw; height: 400rpx;">
        <hic-video-player
            :definition="definition"
            autoplay
            title="live-player"
            useLivePlayer></hic-video-player>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                definition: [
                    { key: 'sd', name: '标清', src: 'http://xxx.flv' },
                    { key: 'hd', name: '高清', src: 'http://xxx.flv' },
                    { key: 'sd_', name: '超清', src: 'http://xxx.flv' }
                ],
            }
        }
    }
</script>

来自业务需求，实现了部分props属性，有时间慢慢优化.....(⌐■_■)

API

hic-video-player Props

definition Options

参考：[{ key: 'sd', name: '标清', src: 'http://xxx' }]

hic-video-player Events

hic-video-player Methods

hic-video-player Slots

说明

• hideVideo：是否隐藏视频组件

  • 未实现同层渲染的移动端，视频组件层级最高。如果页面需要显示弹框，会被视频组件遮挡。

  • 解决方法：通过props参数，设置 hideVideo 为 true，隐藏视频组件。

  • 组件内部通过 v-show 替换视频组件，显示封面图片。

• autoFullScreen：设备方向变化，是否自动全屏

  • 通过监听加速度数据，判断设备方向（专业术语是什么啊...? T^T），设备方向变化，调用视频组件的requestFullScreen方法，进入全屏
  • 一个小问题：video组件，手机长边向下屏幕朝左，会自动全屏，再将手机转动180°，视频方向没有发生变化...（没找到解决方法...live-player会自动旋转180°，没有这个问题）
  • 平台差异，查看官方文档：uniapp 加速度计 accelerometer

• 关于运行到浏览器，播放https视频，视频播放出错的问题.....

  • 找了几个http的视频，播放没有问题，应该是....http协议不支持播放https的视频吧....（浅浅一只前端，百度一圈的结果）

  • 视频地址来自：插件市场：nvue自定义播放器（只支持安卓,ios）

  [
      { key: 'sd', name: '标清', src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164016&resourceType=video&editionType=low&source=aliyun&playUrlType=url_oss' },
      { key: 'hd', name: '高清', src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164016&resourceType=video&editionType=normal&source=aliyun&playUrlType=url_oss' },
      { key: 'sd_', name: '超清', src: 'http://baobab.kaiyanapp.com/api/v1/playUrl?vid=164016&resourceType=video&editionType=high&source=aliyun&playUrlType=url_oss' }
  ]