npm i vue3-video-play --save
或
yarn add vue3-video-play

<script lang="ts">
import { videoPlay } from 'vue3-video-play'  // 引入視頻播放的組件
import 'vue3-video-play/dist/style.css'  // 引入相關(guān)的css
export default defineComponent({
    name: "TypicalExampleIndex",
    components: { // 注冊成為子組件
        videoPlay
    },
    setup(){}
})
</script>

        <div class="map-content">
                    <videoPlay class="my-video" ref="videoPlayer" v-bind="playerOptions" :playsinline="true">
                    </videoPlay>
                </div>
其中v-bind 后面的playerOptions為視頻播放的相關(guān)配置信息
            playerOptions: {
                width: "852px", //播放器高度
                height: "588px", //播放器高度
                color: "#0e5f6d", //主題色
                title: "", //視頻名稱
                muted: false, //靜音
                webFullScreen: false,
                speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
                autoPlay: false, //自動播放
                loop: false, //循環(huán)播放
                mirror: false, //鏡像畫面
                ligthOff: false, //關(guān)燈模式
                volume: 0.5, //默認音量大小
                control: true, //是否顯示控制
                poster: '',
                controlBtns: [
                    "audioTrack",
                    "quality",
                    "speedRate",
                    "volume",
                    "pip",
                    "fullScreen",
                ], //顯示所有按鈕,
                src: "http://www.baidu.mp4", // 視頻在線地址
            }