JxlVideo 視頻

滿足用戶在多元化瀏覽器中定制化播放視頻的需求。

基于 HTML 的 video 標簽封裝。

<template>
  <video
    ref="video"
    :loop="loop ? 'loop' : undefined"
    :autoplay="autoplay ? 'autoplay' : undefined"
    :muted="muted ? 'muted' : undefined"
    :preload="preload"
    :controls="controls ? 'controls' : undefined"
    :width="width"
    :height="height"
    :poster="poster || posterByVideoSnapshot"
    :disablePictureInPicture="disablePictureInPicture"
    :controlslist="enabledControlsList"
    :oncontextmenu="`return !${disableContextmenu ? disableContextmenu : enabledControlsList.includes('nodownload')}`"
  >
    <!--[if !IE]><!-->
    <!-- 火狐 -->
    <source :src="src" type="video/ogg">
    <!-- 谷歌 -->
    <source :src="src" type="video/webm">
    <!--<![endif]-->
    <!--[if IE]><!-->
    <!-- IE -->
    <source :src="src" type="video/mp4">
    <!--<![endif]-->
  </video>
</template>

<script>
export default {
  name: 'JxlVideo',
  props: {
    /**
     * 要播放的視頻的 URL。
     */
    src: {
      type: String,
      default: ''
    },
    /**
     * 規(guī)定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。
     */
    poster: {
      type: String,
      default: ''
    },
    /**
     * 視頻快照參數(shù)
     * 當 poster 為空時生效
     */
    videoSnapshot: {
      type: String,
      default: '?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'
    },
    /**
     * 設(shè)置視頻播放器的寬度。
     */
    width: {
      type: Number,
      default: 320
    },
    /**
     * 設(shè)置視頻播放器的高度。
     */
    height: {
      type: Number,
      default: 240
    },
    /**
     * 循環(huán)播放：如果出現(xiàn)該屬性，則當媒介文件完成播放后再次開始播放。
     */
    loop: {
      type: Boolean,
      default: false
    },
    /**
     * 自動播放：如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
     */
    autoplay: {
      type: Boolean,
      default: false
    },
    /**
     * 預(yù)加載播放：如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預(yù)備播放。如果使用 "autoplay"，則忽略該屬性。
     * 可選值：auto，metadata，none
     */
    preload: {
      type: String,
      default: 'none'
    },
    /**
     * 靜音播放：如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。
     */
    muted: {
      type: Boolean,
      default: false
    },
    /**
     * 播放控件：如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
     */
    controls: {
      type: Boolean,
      default: true
    },
    /**
     * 播放控件列表
     * 可選值：nofullscreen nodownload noremoteplayback noplaybackrate
     */
    controlsList: {
      type: Array,
      default: () => {
        return []
      }
    },
    /**
     * 禁止右鍵菜單
     */
    disableContextmenu: {
      type: Boolean,
      default: false
    },
    /**
     * 禁止畫中畫模式
     */
    disablePictureInPicture: {
      type: Boolean,
      default: false
    },
    /**
     * 禁止下載視頻
     */
    disableDownload: {
      type: Boolean,
      default: false
    },
    /**
     * 禁止全屏播放
     */
    disableFullscreen: {
      type: Boolean,
      default: false
    },
    /**
     * 禁止倍速播放
     */
    disablePlaybackRate: {
      type: Boolean,
      default: false
    },
    /**
     * 禁止遠程回放
     */
    disableRemotePlayback: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    /**
     * 通過視頻截圖獲取海報
     * @returns {string}
     */
    posterByVideoSnapshot() {
      return this.src + this.videoSnapshot
    },
    /**
     * 啟用控件列表
     * @returns {string}
     */
    enabledControlsList() {
      const extra = []
      if (this.disableFullscreen || this.controlsList.includes('nofullscreen')) {
        extra.push('nofullscreen')
      }
      if (this.disableDownload || this.controlsList.includes('nodownload')) {
        extra.push('nodownload')
      }
      if (this.disableRemotePlayback || this.controlsList.includes('noremoteplayback')) {
        extra.push('noremoteplayback')
      }
      if (this.disablePlaybackRate || this.controlsList.includes('noplaybackrate')) {
        extra.push('noplaybackrate')
      }
      return extra.join(' ')
    }
  },
  methods: {
    /**
     * 進入畫中畫模式
     */
    requestPictureInPicture() {
      this.$nextTick(_ => {
        this.$refs.video.requestPictureInPicture()
      })
    },
    /**
     * 退出畫中畫模式
     */
    exitPictureInPicture() {
      document.exitPictureInPicture()
    }
  }
}
</script>
<style scoped>
</style>

Video 屬性（Attributes）

新增屬性： video-snapshot、disable-contextmenu 、disable-picture-in-picture、disable-download、disable-fullscreen、disable-playback-rate、disable-remote-playback
原生屬性：controlslist 參數(shù)為字符串，多個參數(shù)之間用空格隔開
改善屬性：controls-list 在原生屬性 controls-list 上改進，改為用數(shù)組傳遞，符合大眾使用習(xí)慣。
改善屬性：poster 原生的效果是不傳遞則使用加載后的視頻作為封面，現(xiàn)在默認使用 video-snapshot 屬性，對視頻的快照作為 poster 的值

Video 快照 （Snapshot）

快照參數(shù)拼接

const src = 'http://a-image-demo.oss-cn-qingdao.aliyuncs.com/demo.mp4'; // 視頻地址
const poster = src + '?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'; // 封面地址

Video 方法（Methods）