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>