video

基础库版本 >= 3.16.0 开始支持，低版本需做兼容处理。

视频。相关api: bl.createVideoContext

src 支持的格式

object-fit 有效值

free-flow-type 合法值

freeflow 回调说明

event.detail

event.detail.type 说明

event.detail.data 说明

Bug & Tip

• 当前页面仅支持初始化一个视频播放器。
• video 的 API 调用在 loadedmetadata 回调前调用无效，只有播放器预载完数据后才能使用。
• video 在 iOS 平台且 SDKVersion == 3.26.0 (App 6.20.0)，应用主题与系统不一致时，会出现渲染错乱，建议使用 bl.updateApp 引导用户进行 App 更新。
• enable-play-gesture 与 vslide-gesture 属性，有一个开启，就同时开启。
• videofirstrender 事件，在视频播放后，首个画面展示出来之后会触发。循环播放视频时，也会触发。
• v-show隐藏后 video 会暂停

示例代码

<template>
    <b-video
        id="myVideo"
        :src="src"
        :controls="controls"
        :danmu-btn="danmuBtn"
        :enable-danmu="enableDanmu"
        :autoplay="autoplay"
        :loop="loop"
        :muted="muted"
        :initial-time="initialTime"
        :enable-progress-gesture="enableProgressGesture"
        :show-mute-btn="showMuteBtn"
        :object-fit="objectFit"
        :enable-play-gesture="enablePlayGesture"
        :vslide-gesture="vslideGesture"
        @play="eventChange"
        @pause="eventChange"
        @ended="eventChange"
        @timeupdate="eventChange"
        @waiting="eventChange"
        @error="eventChange"
        @progress="eventChange"
        @loadedmetadata="eventChange"
        @controlstoggle="eventChange"
    ></b-video>
</template>

<script>
    export default {
        data() {
            return {
                src: 'BV18J411E7r1',
                controls: true,
                danmuBtn: false,
                enableDanmu: false,
                autoplay: false,
                loop: false,
                muted: false,
                initialTime: 0,
                enableProgressGesture: true,
                objectFit: 'contain',
                showMuteBtn: false,
                enablePlayGesture: false,
                vslideGesture: false
            };
        },
        methods: {
            // 事件触发
            eventChange(e) {
                console.log('----- event -----', e)
            }
        }
    };
</script>