关于视频的一个组件

<template lang="pug">
  .Video_message
    video(v-if="!isIE" controls :id="id" width="300" height="400" controlslist="nodownload" disablePictureInPicture="true").video
      source(:src="value.video.videoUrl" type="video/ogg" )
      source(:src="value.video.videoUrl" type="video/mp4")
    div(v-else)  这是一条【视频消息】，请切换非IE浏览器查看，或到企微客户端查看
</template>
<script>
import Pubsub from '@/utils/pubsub'
import { isIE } from '@/utils'
const $ = document.querySelector.bind(document)
export default {
  name: 'msgVideo',
  data () {
    return {
      isIE
    }
  },
  props: {
    value: {
      default: () => ({}),
      type: Object
    }
  },
  computed: {
    id () {
      return `vid_${this.value.id}`
    }
  },
  async mounted () {
    window.Vue = this
    await this.$nextTick()
    const vidDom = $(`#${this.id}`)
    vidDom && vidDom.addEventListener('play', () => {
      const instance = Pubsub.instance
      if ((instance instanceof Element) && instance.id === this.id) return
      Pubsub.clear()
      Pubsub.add(vidDom)
    })
  }
}
</script>
<style lang="scss" scoped>
.Video_message {
  // width: 300px;
  // height: 400px;
}
video {
  width: 300px;
  height: 400px;
  border-radius: 5px;
}
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
</style>

• @/utils/pubsub

/**
 * @description 音频视频只能播放一个方法处理,结合订阅发布模式&单例模式实现
 * @class PubSub
 */
import BenzAMRRecorder from 'benz-amr-recorder'
const isElement = (dom) => dom instanceof Element
const isBenzAMRRecorder = (obj) => obj instanceof BenzAMRRecorder
class PubSub {
  constructor () {
    this.sub = []
  }

  add (instance) {
    this.sub.push(instance)
  }

  clear () {
    const [el] = this.sub
    isElement(el) && el.pause()
    isBenzAMRRecorder(el) && el.stop()
    this.sub = []
  }

  get instance () {
    const [el] = this.sub
    return el
  }
}
export default new PubSub()

• @/utils

// 判断是否是webkit
export const isWebkit = navigator.userAgent.includes('WebKit')

export const isIE = window.navigator.userAgent.indexOf('MSIE') >= 1