更新记录

1.4.9（2023-09-15）

• 解决3.8.12版本或相近版本的编辑器会出现_typeof is not defined的报错的问题

1.4.8（2023-09-11）

• 不再通过script引入文件

平台兼容性

使用须知

• 1、这个播放器是利用原生h5<video>标签来实现的，所以只支持app-vue、h5
• 2、支持视频格式有ogg、mp4、webm、m3u8、flv
• 3、支持弹幕功能
• 4、有什么不懂可以加群 1087735942

props属性

event事件

内置方法

弹幕（barrage）

弹幕配置（barrageConfig）

flv切片列表（segments）

flv配置（flvConfig）

插槽slots

快速开始

    <!-- 引入播放器 -->
    <yingbing-video src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4">
    </yingbing-video>

自动播放

    <!-- 新版的chrome浏览器和IOS一样，用户未进行任何操作时不能播放视频和音频，如果一定要自动播放，需要设置为静音模式，再让用户手动关闭静音 -->
    <yingbing-video autoplay muted src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>

添加弹幕列表

    <!-- 引入播放器 -->
    <yingbing-video :barrages="barrages" barrage-show src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>

export default {
    data() {
        return {
            barrages: [{
                key: 'fctc651a9pm2j20bia8j',
                time: 1,
                text: '这是新增的一条弹幕',
                fontSize: 24,
                color: '#0ff',
            },{
                key: 'fctc651a9pm2j20bia8j',
                time: 1,
                text: '这是新增的一条弹幕',
                fontSize: 24,
                color: '#0ff',
            }]
        }
    }
}

绘制弹幕

    <!-- 引入播放器 -->
    <yingbing-video ref="video" barrage-show src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>

export default {
    onReady () {
        setTimeout (() => {
            this.$refs.video.drawBarrage({
                text: '这是绘制的实时弹幕',
                color: '#ff0033',
                fontSize: 20,
                time: 12//不传time 则根据当前播放进度绘制弹幕出现时间
            })
        }, 5000)
    }
}

截取画面

    <!-- 引入播放器 -->
    <yingbing-video ref="video" @captureFinish="onCaptureFinish" src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4"/>
    <button @tap="capture">截图</button>

export default {
    methods: {
        capture () {
            this.$refs.video.capture()
        },
        //截图完成事件
        onCaptureFinish (e) {
            console.log(e)
        }
    }
}

切换视频

    <!-- 引入播放器 并显示切换下一个视频按钮 -->
    <yingbing-video next-btn-show @nextBtnClick="onNextBtnclick" :src="src"/>

export default {
    data () {
        src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4'
    },
    methods: {
        //切换下一个视频
        onNextBtnclick () {
            this.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4'
        }
    }
}

使用插槽

    <yingbing-video src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4">
        <!-- 默认插槽 -->
        <div>加载中</div>
        <!-- 控制栏插槽 -->
        <template #controls>
            <div style="position:absolute;top:0;left:0;right:0;">视频标题</div>
        </template>
    </yingbing-video>