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: ''
    },
    /**
     * 规定视频正在下载时显示的图像，直到用户点击播放按钮。
     */
    poster: {
      type: String,
      default: ''
    },
    /**
     * 视频快照参数
     * 当 poster 为空时生效
     */
    videoSnapshot: {
      type: String,
      default: '?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'
    },
    /**
     * 设置视频播放器的宽度。
     */
    width: {
      type: Number,
      default: 320
    },
    /**
     * 设置视频播放器的高度。
     */
    height: {
      type: Number,
      default: 240
    },
    /**
     * 循环播放：如果出现该属性，则当媒介文件完成播放后再次开始播放。
     */
    loop: {
      type: Boolean,
      default: false
    },
    /**
     * 自动播放：如果出现该属性，则视频在就绪后马上播放。
     */
    autoplay: {
      type: Boolean,
      default: false
    },
    /**
     * 预加载播放：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
     * 可选值：auto，metadata，none
     */
    preload: {
      type: String,
      default: 'none'
    },
    /**
     * 静音播放：如果出现该属性，视频的音频输出为静音。
     */
    muted: {
      type: Boolean,
      default: false
    },
    /**
     * 播放控件：如果出现该属性，则向用户显示控件，比如播放按钮。
     */
    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 参数为字符串，多个参数之间用空格隔开
改善属性：controls-list 在原生属性 controls-list 上改进，改为用数组传递，符合大众使用习惯。
改善属性：poster 原生的效果是不传递则使用加载后的视频作为封面，现在默认使用 video-snapshot 属性，对视频的快照作为 poster 的值

Video 快照 （Snapshot）

快照参数拼接

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）