//Video.js 視頻配件
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
import * as echarts from 'echarts'  //引入Echarts，
Vue.prototype.$echarts = echarts  //定義為全局變量

//通過相對路徑來引入
 <el-row :gutter="30">
      <el-col :span="20" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="../../../assets/images/1.mp4" type="video/mp4" >
            </video>
          </div>
        </el-card>
      </el-col>
    </el-row>
    //絕對路徑引入需要把文件放在public下
 <el-row :gutter="30">
      <el-col :span="20" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="/1.mp4" type="video/mp4" >
            </video>
          </div>
        </el-card>
      </el-col>
    </el-row>
export default {
  name: "TestTwo",
  data() {
    return {
    };
  },
  mounted() {
    this.initVideo();
  },
    methods: {
    initVideo() {
      //初始化視頻方法
      let myPlayer = this.$video(myVideo, {
        //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。
        controls: true,
        volume: 0.1,
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        //自動播放屬性,muted:靜音播放
        autoplay: "muted",
        // autoplay: "true",
        //建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數據。
        preload: "auto",
        //設置視頻播放器的顯示寬度（以像素為單位）
        width: "500px",
        //設置視頻播放器的顯示高度（以像素為單位）
        height: "310px",
        language: "zh-CN",
        aspectRatio: "9:6", // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
        fluid: true, // 當true時,Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
      });
    },
  },

    <el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="視頻" align="center" prop="url">
       <template slot-scope="scope">
         <video  controls id="video-class":src="scope.row.url"></video>
       </template>
       //例如：https:localhost:8080/加你本地配置的路徑
export default {
  name: "TestTwo",
  data() {
    return {
    videoList: []
    };
  },
  methods: {
    /** 查詢視頻播放列表 */
    getList() {
      this.loading = true;
      listVideo(this.queryParams).then(response => {
        this.videoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },