Vue3之使用vue-video-player

1.使用npm下载vue-video-player

npm i vue-video-player -S

2.在入口文件main.js引入

import { createApp } from 'vue'
import App from './App.vue'

// 视频插件
import VideoPlayer from 'vue-video-player/src'
import 'video.js/dist/video-js.css' 
import 'vue-video-player/src/custom-theme.css'

const app = createApp(App);
app.use(VideoPlayer)
app.mount('#app')

在这里插入图片描述

3.创建video.vue文件,这个文件主要配置vue-video-player

<template>
  <!--在视频外面加一个容器-->
  <div class="input_video">
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
    ></video-player>
  </div>
///这是注掉的内容
<!--  
<div class="content">
    &lt;!&ndash; poster: 封面url &ndash;&gt;
    &lt;!&ndash; src: 视频url &ndash;&gt;
    <video-player
       src="/videos/demo.mp4"
        class="video-player vjs-big-play-centered"
    controls
    :loop="true"
    :volume="0.6"
    ></video-player>
  </div>
  -->
</template>

<script setup>
import {reactive} from "vue";
//视频播放
const playerOptions=reactive(
    {
      playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
      autoplay: false, //如果true,浏览器准备好时开始回放。
      muted: false, // 默认情况下将会消除任何音频。
      loop: true, // 视频一结束就重新开始。
      preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
      language: 'zh-CN',
      aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
      fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
      sources: [{
        type: "video/mp4",
        // src: './static/videos/demo.mp4'//url地址
        // src: '.../.../.../.../.../.../.../.../.../public/videos/demo.mp4'//url地址
        src: 'videos/demo.mp4'//url地址
      }],
      poster: "", //你的封面地址
      // width: document.documentElement.clientWidth,
      notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      controlBar: {
        timeDivider: true,//当前时间和持续时间的分隔符
        durationDisplay: true,//显示持续时间
        remainingTimeDisplay: false,//是否显示剩余时间功能
        fullscreenToggle: true  //全屏按钮
      }
    }
)


/*import { ref } from 'vue';

const visibly = ref(false)
const handleClose = () => {
  visibly.value = false
}
// const src=require("/videos/demo.mp4")
const videoUrl = ref()
const openDialog = (val) => {
  videoUrl.value = val
  visibly.value = true
}
defineExpose({openDialog})*/
</script>

<style lang="scss">
.input_video {
  width: 400px;
  height: 400px;
  margin: 0 auto;

  .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
    height: 250px;
  }
}

/*.content {
  width: 100%;
  height: 350px;
  margin: 0 auto;

  .video-js {
    //设置视频高宽
    height: 255px;
    //height: 100%;
    width: 100%;
  }
}*/
</style>

4、需要使用视频播放的地方就引入该文件

<template>
  <div class="fix">
    <div class="content_bg ">
      <video-player style="width: 100%;height: 400px;"></video-player>
    </div>
  </div>
</template>

<script setup>
import VideoPlayer from './video-Play/video-player.vue'

</script>

<style lang="scss" scoped>

</style>

一、以上代码原来报错

*vue-video-player 报错The media could not be loaded, either because the server or network failed or because the format is not supported*

原因:
我的src的路径即视频文件存放到本地了,路径直接写src: 'videos/demo.mp4'而不用"/videos/demo.mp4"

若路径写不正确运行npm run build命令打包项目时错误一堆,惨痛教训

二、刚开始运行安装命令时,在入口文件引入报错,会显示找不到文件,在node_moudles里也找不到,后来又运行了,然后运行打包命令后发现引入不会报错了,后修改src路径后正常显示了

npm i vue-video-player -S


后来运行
npm install video.js @videojs-player/vue --save


参考文章:
https://blog.csdn.net/qq_42570449/article/details/121708044

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

就躺了吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值