在vue中如何实现点播功能

H5提供给我们 <video> 标签
用他可以实现一个简单的h5视频

<video src="xxx.mp4" controls="controls">
	
</video>

但是：
他仅在 Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。

注意：Internet Explorer 8 以及更早的版本不支持 <video> 标签。

这里我要说的是使用video.js实现视频播放功能

有人说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，我最后测试，根本不需要什么低版本的高版本的，7版本以上的没有任何问题。

那么如何使用呢？

一、安装 npm i video.js -S

二、在main.js中引入
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

三、在组件中使用

<template>
    <div>
        <video
          id="sslcsq"
        >
        <source
            src="https://img.tukuppt.com/video_show/130518/00/02/37/5b5985d44e9a9_10s_big.mp4"
            type="video/mp4"
        >
        </video>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.actions()
  },
  methods: {
    actions () {
      // 初始化视频方法
      // eslint-disable-next-line no-undef
      this.$video(sslcsq, {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        // 自动播放属性,muted:静音播放
        // autoplay: 'muted',
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        // 设置视频播放器的显示宽度（以像素为单位）
        width: '800px',
        // 设置视频播放器的显示高度（以像素为单位）
        height: '400px'
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

这里样式没有去写 主要实现点播功能
具体功能实现请看官网：https://videojs.com/