在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/