b-video

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

视频。相关api: bl.createVideoContext

object-fit 有效值：

src 支持的格式

Bug & Tip

• 当前页面仅支持初始化一个视频播放器。
• video 的 API 调用在 loadedmetadata 回调前调用无效，只有播放器预载完数据后才能使用。
• video 在 iOS 平台且 SDKVersion == 3.26.0 (App 6.20.0)，应用主题与系统不一致时，会出现渲染错乱，建议使用 bl.updateApp 引导用户进行 App 更新。
• enable-play-gesture 与 vslide-gesture 属性，有一个开启，就同时开启。
• 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>