vue3-video-play插件

最新推荐文章于 2024-04-26 20:16:50 发布

会飞的鱼—

最新推荐文章于 2024-04-26 20:16:50 发布

阅读量853

点赞数

文章标签： vue.js npm javascript

本文链接：https://blog.csdn.net/qq_47657875/article/details/130551691

版权

1. 安装

npm i vue3-video-play

2. 引入

import vue3videoPlay from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'

3. 使用

  <vue3videoPlay
    width="100%"
    v-bind="options"
    ref="videoPlayer"
    :currentTime="currentTime"
    @timeupdate="handleTimeUpdate"
  />

let options = reactive({   
        width: "800px", //播放器高度
        height: "450px", //播放器高度
        color: "#409eff", //主题色
        title: "1111", //视频名称
        src: props.video_url, //视频源
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: true, //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制,
        speed: true,
        current: '', //已播放时长
        controlBtns: [
          "audioTrack",
          "quality",
          "speedRate",
          "volume",
          "setting",
          "pip",
          "pageFullScreen",
          "fullScreen",
        ], //显示所有按钮,
     })

  const currentTime = ref(0)
  const handleTimeUpdate = (event) => {
      //   console.log('变化', currentTime.value)
      currentTime.value = event.target.currentTime
    }