Vue中使用vue-video-player插件播放视频时src动态配置-指定范围整数随机获取拼接url

Posted 2023-04-08 霸道流氓气质

场景

Vue中使用vue-video-player插件播放本地mp4视频文件：

Vue中使用vue-video-player插件播放本地mp4视频文件_霸道流氓气质的博客-CSDN博客

上面在播放本地mp4文件时，路径写死，如果实现动态url设置。

 

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、设置src时赋值空

      playerOptions: 
        width: "800px",
        height: "600px",
        language: "zh-CN",
        muted: true,// 默认情况下将会消除任何音频
        autoplay: true,// 如果true,浏览器准备好时开始回放。
        controls: false, //不显示暂停、声音、进度条组件
        loop: true, // 视频一结束就重新开始。
        sources: [
          
            type: "video/mp4",
            src: '',
          ,
        ],
      ,

2、在点击预览或者播放时动态赋值url

      let url = "/video/video"+Math.floor((3+1- 1) * Math.random() + 1)+".mp4" // url地址
      this.playerOptions['sources'][0]['src'] = url;

这里url通过模拟1到3之间的整数拼接获取，因为这里准备了三个mp4文件

 

3、然后在点击预览或播放时动态生成或赋值url

    videoChange() 
      this.videoOpen = true;
      //生成1到3之间的随机整数
      let url = "/video/video"+Math.floor((3+1- 1) * Math.random() + 1)+".mp4" // url地址
      this.playerOptions['sources'][0]['src'] = url;
    ,

注意这里的videoChange是在父组件的预览按钮的点击事件中调用

    videoChange() 
      this.$refs.carVideo.videoChange()
    ,

如果动态传值可自行传递并拼接url

播放组件完整示例代码

<template>
  <el-dialog
    title="视频监控"
    :visible.sync="videoOpen"
    width="800px"
    height="600px"
    append-to-body
    @close="videoClose"
    class="video_box"
  >
    <!--视频窗口展示-->
    <div id="playWnd" class="playWnd">
      <videoPlayer
        class="vjs-custom-skin videoPlayer"
        ref="videoplayer"
        :playsinline="true"
        width="800px"
        height="600px"
        :options="playerOptions"
        customEventName="changed"
      >
      </videoPlayer>
    </div>
  </el-dialog>
</template>

<script>

import  videoPlayer  from "vue-video-player";
import 'video.js/dist/video-js.css'
export default 
  name: "HkVideo",
  components: 
    videoPlayer,
  ,
  data() 
    return 
      videoOpen: false,
      playerOptions: 
        width: "800px",
        height: "600px",
        language: "zh-CN",
        muted: true,// 默认情况下将会消除任何音频
        autoplay: true,// 如果true,浏览器准备好时开始回放。
        controls: false, //不显示暂停、声音、进度条组件
        loop: true, // 视频一结束就重新开始。
        sources: [
          
            type: "video/mp4",
            src: '',
          ,
        ],
      ,
    ;
  ,
  mounted()

  ,
  methods: 
    //预览功能
    preview() 
      console.log("preview");
    ,
    //停止全部预览功能
    stopAllPreview() ,
    //关闭视频窗口
    closeWindow() 
    ,
    // 查看摄像
    videoChange() 
      this.videoOpen = true;
      //生成1到3之间的随机整数
      let url = "/video/video"+Math.floor((3+1- 1) * Math.random() + 1)+".mp4" // url地址
      this.playerOptions['sources'][0]['src'] = url;
    ,
    // 关闭摄像头弹窗
    videoClose() 
      this.videoOpen = false;
      this.closeWindow();
    ,
  ,
;
</script>
<style scoped lang="scss">
.video_box 
  width: 100%;
  height: 100%;


.plugin 
  width: 100%;
  height: 100%;


.playWnd 
  width: 800px;
  height: 600px;
  margin: 0;


.video_box 
  ::v-deep .el-dialog__body 
    padding: 0 !important;
  

</style>

vue-video-player的使用总结

由于公司的项目是网上教育的，像网易云课堂那种教育网站，因而会有很多课程需要在线观看的，所以视频插件是必不可少的。

由于我用vue开发项目，所以找视频插件也找和vue贴近的。最后选择了vue-video-player。这个视频插件还是挺好用的，好多事件都是可控的，挺方便的。

首先 npm install vue-video-player -S;

然后再main.js进行配置：

然后就可以在组件中使用了。

常用参数：

然后就可以按需使用一些事件，由于我们项目需要播放的时候进行视频埋点，还有暂停的时候需要统计用户的暂停时间，还有等视频播放完

之后加个评分弹窗。因而我使用了三个事件，播放事件，暂停事件，播放结束之后事件。

如何动态切换视频源呢？

就先写这些，后面想到关于该插件的其他信息再补充。