最近心血来潮想弄一个视频播放器玩玩,找到很多的插件,有DPlayer、vue-video-playe、西瓜视频播放器,但是最终还是选择了artplayer这款,因为我觉得页面好看,扩展性强,能满足多场景需求,话不多说,开启这次的踩坑之旅.

先放上地址吧:

GitHub: https://github.com/zhw2590582/ArtPlayer

文档地址:https://artplayer.org/

满意的话可以给作者一个小星星哦

这里使用的是vue的方式去进行开发

安装

npm install artplayer

第三方插件

注意,这里安装了第三方库 hls 和 flv,不需要的可以不用装

flv安装,附上git地址:https://github.com/Bilibili/flv.js

npm install --save flv.js

hls安装,附上git地址:https://github.com/video-dev/hls.js

npm install --save hls.js

组件

先放成品,再去分析

<template>
  <div>
          <Artplayer
            :key="menuKey"
            :option="option"
            :style="style"
            @get-instance="getInstance"
          />
  </div>
</template>

<script>
//这里引入视频组件组件和第三方插件
import Artplayer from 'artplayer/examples/vue/Artplayer'
import flvjs from 'flv.js'
import Hls from 'hls.js'
export default {
  name: 'Index',
  components: {
    Artplayer
  },
  data() {
    return {
      menuKey: 1,
      option: {
        container: '.artplayer-app',
        url: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4',
        customType: {
          m3u8: function(video, url) {
            var hls = new Hls()
            hls.loadSource(url)
            hls.attachMedia(video)
          },
          flv: function(video, url) {
            const flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: url
            })
            flvPlayer.attachMediaElement(video)
            flvPlayer.load()
          }
        },
        // 视频的海报，只会出现在播放器初始化且未播放的状态下
        poster: '',
        // 视频标题，目前会出现在视频截图和迷你模式下
        title: '',
        // 播放器主题颜色，目前只作用于进度条上
        theme: '#ffad00',
        // 播放器的默认音量
        volume: 0.5,
        // 使用直播模式，会隐藏进度条和播放时间
        isLive: false,
        // 是否默认静音
        muted: false,
        // 是否自动播放
        autoplay: false,
      },
      style: {
        width: '50vw',
        height: '40vh',
        margin: '0 auto'
      }
    }
  },
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    getBtn(url) {
      // console.log(url)
      this.option.url = url
      ++this.menuKey
    },
    getInstance(art) {
      // console.log(art)
    }
  }
}
</script>

先说一下我的这的场景,就是点击按钮,对用户输入的地址进行解析播放

如图,这里想用户进行输入之后,就进行url的实时变化响应,视频切换为用户输入的

但是,插件也明确说了

不支持动态修改

怎么办呢???

在这里我想出来了3种办法,一一实践

1.用watch深度监听URL的变化,当发生变化后,重新渲染组件,达到更新,但是行不通,虽然监听到url 变化了,但是页面没有重新渲染

2.借用v-if 手动的进行动态创建,我好像这里没成功

3.就是这里所使用到的方法

<Artplayer
            :key="menuKey"
            :option="option"
            :style="style"
          />

点击按钮之后,动态的改变key值,达到重新渲染的目的

 btn(url) {
      // console.log(url)
      this.option.url = url
      ++this.menuKey
    }

有可能官方文档没有读清楚,官方还有好的方法,有可能我这走了弯路,大家借鉴即可!