Michael_Jheng的部落格

先按照[Vue.js教學筆記]Webpack模組整合工具之安裝進行安裝,建立專案名稱為vue-video-player-project,安裝設定如下,

由於有安裝ESLinit,所以在package.json中的scripts需要指令,來幫助程式快速整理,

"lintfix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"

為了方便測試,準備圖片與MP4在XAMPP下執行,

得到兩行連結,

http://localhost/mp4.PNG

http://localhost/videoplayback.mp4

vue-video-player-project安裝與使用皆參考以下文章,

vue-video-player

記一次vue2.0+ VUE視頻播放器實現HLS播放全過程

demo

開啟專案中的HelloWorld.vue,把程式清空如下所示,

安裝vue-video-player必要元件,輸入指令,

npm install vue-video-player --save

安裝完成來撰寫程式,程式如下,

<template>
  <video-player
    class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="{
      sources: [{
        type: 'video/mp4',
        src: 'http://localhost/videoplayback.mp4'
      }],
      poster: 'http://localhost/mp4.PNG'
    }"
  ></video-player>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    videoPlayer
  },
  data () {
    return {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

執行結果如下,