vue3 使用 vue3-video-play 进行在线视频播放_vue3-video-player

首先：下载依赖

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'  // 引入相关的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为视频播放的相关配置信息
 
 
 
            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, //循环播放
                mirror: false, //镜像画面
                ligthOff: false, //关灯模式
                volume: 0.5, //默认音量大小
                control: true, //是否显示控制
                poster: '',
                controlBtns: [
                    "audioTrack",
                    "quality",
                    "speedRate",
                    "volume",
                    "pip",
                    "fullScreen",
                ], //显示所有按钮,
                src: "http://www.baidu.mp4", // 视频在线地址
 
            }

最终的视频播放页面效果图