Vue阿里云视频播放器——aliplayer的使用

本文将从以下几个方面介绍vue aliyun-aliplayer的使用方法：

一、引入aliplayer

如果你已经有了Vue项目，那么可以通过npm来安装aliplayer:

yarn add aliyun-aliplayer

或者

npm i aliyun-aliplayer

在Vue项目中，可以在main.js中引入aliplayer

import 'video.js/dist/video-js.css'
import 'aliyun-player/dist/aliyun-player-sdk-min.js'

二、使用aliplayer播放器

在组件中引入aliplayer：

<template>
 <div>
  <div id="player-container" ref="playerContainer"></div>
 </div>
</template>

<script>
import videojs from 'video.js'
import 'videojs-flash'
import 'aliplayer/dist/aliplayer-min.js'

export default {
  data() {
    videojs.options.flash.swf = require('video.js/dist/video-js.swf')
    return {
      player: null
    }
  },
  mounted() {
    this.playerInit()
  },
  methods: {
    playerInit() {
      const options = {
        width: '100%',
        height: '100%',
        autoplay: false,
        controls: true,
        preload: 'auto',
        sources: [{
          src: 'https://player.alicdn.com/video/aliyunmedia.mp4',
          type: 'video/mp4'
        }]
      }
      this.player = new Aliplayer(options, function(player) {
        console.log('播放器初始化完成')
      })
      this.player.setPlayerSize(this.$refs.playerContainer.offsetWidth, this.$refs.playerContainer.offsetHeight)
    }
  }
}
</script>

三、关于aliplayer的组件化使用

借助Vue组件化的思想，我们可以更方便的使用aliplayer播放器。首先，我们封装一个player组件：

<template>
 <div class="videoplayer" :style="{ width: width + 'px', height: height + 'px' }">
  <div class="player-wrap">
   <div :id="videoContainerId" :ref="el => this[el] = el">
    <aliplayer 
      :options="playerOptions" 
      ref="player" 
      :style="{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1, display: isActive ? 'block' : 'none' }">
    </aliplayer>
   </div>
   <div class="player-poster" v-if="poster">
    <img :src="poster" :alt="title">
   </div>
   <div class="player-placeholder" v-if="!poster"></div>
   <div class="player-loading" v-show="loading"></div>
    <video 
      :id="nativePlayerId" 
      :ref="el => this[el] = el" 
      class="native-player" 
      :autoplay="autoPlay" 
      :preload="autoPlay ? 'auto' : 'metadata'" 
      :src="videoUrl"
      :poster="poster"
      :style="{zIndex: 0, display: isActive ? 'none' : 'block' }">
    </video>
  </div>
 </div>
</template>

<script>
import Aliplayer from 'aliyun-player'

export default {
  name: 'VideoPlayer',
  props: {
    width: {
      type: Number,
      required: true
    },
    height: {
      type: Number,
      required: true
    },
    videoUrl: {
      type: String,
      required: true
    },
    poster: {
      type: String,
      default: ''
    },
    autoPlay: {
      type: Boolean,
      default: false
    },
    controls: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isActive: false
    }
  },
  computed: {
    videoContainerId() {
      return `aliplayer-${this._uid}-container`
    },
    nativePlayerId() {
      return `aliplayer-${this._uid}-native-player`
    },
    playerOptions() {
      return {
        autoplay: this.autoPlay,
        controls: this.controls,
        poster: this.poster,
        sources: [{ 
          // 兼容移动端，m3u8支持多码率，mp4不支持
          // 根据设备选择播放模式
          // videoWrap: vjs-tech, 技术选项
          // type选项，视频类型
          video: this.videoUrl,
          type: this.$utils.getVideoType(this.videoUrl),
        }],
      }
    }
  },
  methods: {
    setCurrentTime(time) {
      const player = this.$refs.player.aliPlayer
      player.setCurrentTime(time)
    },
    play() {
      if (this.isActive) {
        return
      }
      this.isActive = true
      if (this.$utils.isMobile()) {
        const player = this.$refs.player.aliPlayer.videoWrap.tech.el_
        player.autoplay = true
        player.play()
        player.removeAttribute('controls')
      } else {
        this.$refs[this.nativePlayerId].play()
      }
    },
    playerLoading(state) {
      this.loading = state
    },
    pause() {
      if (!this.isActive) {
        return
      }
      this.isActive = false
      if (this.$utils.isMobile()) {
        const player = this.$refs.player.aliPlayer.videoWrap.tech.el_
        player.pause()
      } else {
        this.$refs[this.nativePlayerId].pause()
      }
    },
    end() {
      this.isActive = false
    },
    destroy() {
      this.$refs.player.destroyAliPlayer()
    },
  },
  mounted() {
    const player = this.$refs.player.aliPlayer
    player.on('ready', () => {
      this.$emit('load')
    })
    player.on('error', () => {
      this.$emit('error')
    })
    player.on('play', () => {
      this.$emit('play')
    })
    player.on('pause', () => {
      this.$emit('pause')
    })
    player.on('seeked', () => {
      this.$emit('seeked')
    })
    player.on('ended', () => {
      this.$emit('ended')
    })
    player.on('waiting', () => {
      this.playerLoading(true)
    })
    player.on('playerTimeUpdate', () => {
      this.playerLoading(false)
    })
  }
}
</script>

四、阿里云视频播放器API

除了上面的例子以外，Aliplayer还支持一些API，例如：

初始化、销毁

this.player = new Aliplayer(options, function(player) {
  console.log('播放器初始化完成')
})
this.player.destroyAliPlayer()

播放、暂停、停止

const player = this.$refs.player.aliPlayer
player.play()
player.pause()
player.stop()

设置音量、静音

const player = this.$refs.player.aliPlayer
player.setVolume(80) // 设置音量，值范围为0-1
player.setMute(true) // 静音

获取视频时长、当前时间

const player = this.$refs.player.aliPlayer
const duration = player.getDuration() // 获取视频总时长
const currentTime = player.getCurrentTime() // 获取当前播放时间

总结

通过本文的学习，我们可以使用aliplayer来实现Vue项目中的视频播放功能。另外，我们还学习了如何将aliplayer封装成一个Vue组件，方便我们在项目中使用，并且介绍了aliplayer常用的API，希望可以对大家有所帮助。