vue播放視頻

vue播放視頻

• 安裝依賴

npm install video.js
npm install aes-decrypter
npm install m3u8-parser
npm install mpd-parser
npm install mux.js
npm install url-toolkit
npm install videojs-contrib-hls

• 前端跨域

proxyTable: {
    '/api': {  //使用"/api"來代替"http://f.apiplus.c" 
        target: 'http://127.0.0.1:8000/', //源地址 
        changeOrigin: true, //改變源 
        pathRewrite: { 
            '^/api': '' //路徑重寫 
        } 
    } 
},

• 經常使用代碼塊

<template>
  <div id='play'>
      <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" >
          <source :src="src" >
      </video>
  </div>
</template>
<script>
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
  name:'play',
  data(){
      return {
          src:''
      }
  },
  created(){
      // 應該去後臺獲取播放地址，實際上模擬地址了
      this.src = '/api/static/video/list.m3u8';
  },
  mounted(){
      videojs('my-video', {
          bigPlayButton: true,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true
      }, function () {
          this.play()
      })
  }
}
</script>