Vue 视频音频播放_vue2 mp3 mp4播放

<hlsPlayer :rowData="rowData" ref="child" />
<videoPlayer :rowData="rowData" ref="childTwo" />

1.安装video.js依赖

npm install --save video.js

2.全局引入

import Video from 'video.js'
import 'video.js/dist/video-js.css'

3.使用 （封装组件）

实现效果：

 音频组件：

<template>
  <Modal
      v-model="modals"
      width="400"
      :styles="{height:'400px',overflow:'hidden'}"
      scrollable
      footer-hide
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
  >
    <div>
      <aplayer :playerOptions="aOption" v-if="isAudio"></aplayer>
      <vplayer :playerOptions="vOption" style="height: 300px;" v-if="!isAudio"></vplayer>
    </div>
  </Modal>
</template>
 
<script>
import {aplayer,vplayer} from 'vue-hls-player'
export default {
  name: "hlsPlayer",
  props:{
    rowData:Object,
    default:null
  },
  comments:{aplayer,vplayer},
  data(){
    return {
      modals:false,
      isAudio:true,
      titleFrom:'媒体',
      aOption:{
        type: "application/x-mpegURL",
        src: 'http://ph1vqefl0.bkt.clouddn.com/hlsnature2',
        preload: false,
        autoplay: false,
        isLoop: false,
        controls: 'progress,current,durration',
      },
      vOption:{
        type: "application/x-mpegURL",
        src: 'http://ph1vqefl0.bkt.clouddn.com/hlsnature2',
        preload: false,
        autoplay: false,
        isLoop: false,
        playsinline: false,
        poster: 'https://oimdztrab.qnssl.com/Frp4SyVe5PosdkUKRaE-krjK7B5z',
        controls: 'progress,current,durration,volume',
        crossOrigin: false
      }
    }
  },
  watch:{
    rowData(node){ 
      this.aOption['src'] = node.playUrl;
    }
  },
  created() {
 
  },
  methods:{
    handleReset(){}
  }
}
</script>
 
<style scoped>
 
</style>

 视频组件：

<template>
  <Modal
      v-model="modals"
      width="400"
      :styles="{height:'400px',overflow:'hidden'}"
      scrollable
      footer-hide
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
  >
    <div>
      <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
      ></video-player>
    </div>
  </Modal>
 
</template>
 
<script>
export default {
  name: "videoPlayers",
  props:{
    rowData:Object,
    default:null
  },
  data () {
    return {
      modals:false,
      titleFrom:'媒体',
      // 视频播放
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: [{
          type: "",
          src: 'http://vjs.zencdn.net/v/oceans.mp4'
        }],
        poster: "",
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }
    }
  },
  watch:{
    rowData(node){ 
      this.playerOptions['sources'][0]['src'] = node.playUrl;
      this.playerOptions['poster'] = node.opusUrl; 
       
    }
  },
  created() {
    // this.playerOptions['sources'][0]['src'] = '接口地址';
  },
  methods:{
    handleReset(){}
  }
}
</script>
 
<style scoped>
.video-js .vjs-icon-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}
</style>

4.详细使用教程

(1)引入

import hlsPlayer from "@/components/uplayVideo/hlsPlayer";
import videoPlayer from "@/components/uplayVideo/videoPlayer";

（2）注册

 components: {
    hlsPlayer,
    videoPlayer,
  },

（3）页面中使用

（4）绑定事件（在这里我是通过插槽绑定在表格上的）

 为了方便复制也为你准备了现成的CV  但是不要忘了修改请求头 slot: "content",这里需要自己加上  

<template slot-scope="{ row }" slot="content">
              <div @click="audioClick(row)">
                <span>{{ row.content }} </span>
              </div>
            </template>
 

（5）方法函数

audioClick(row) {
      this.rowData = {};
      if (row.contentType == 6) {
        this.rowData.playUrl = row.content;
        this.$refs.child.modals = true;
      } else if (row.contentType == 1) {
        this.rowData.playUrl = row.content;
        this.rowData.opusUrl = row.showUrl;
        this.$refs.childTwo.modals = true;
      }
    },

函数详解

this.rowData = {};  是防止组件封装的watch  监听不到

 if (row.contentType == 6)  是判断你当前点击的元素是什么类型，比如作者这里就有mp3 mp4  音频和视频两种资源，这个都是通过你表格的当前行row 这个属性去判断的，如果您发现后端提供给你的数据没有判断类型的东西，请与后端进行沟通

 this.rowData.playUrl = row.content;  是把你当前的视频音频地址传入子组件

 this.$refs.child.modals = true;  是通过父传子的方式控制子组件的显示隐藏的

作者封装组件时默认都是统一做了隐藏