  <template>
  <el-dialog
    :visible.sync="videoDialogVisible"
    :close-on-click-modal="false"
    width="800px"
    :show-close="false"
    top="15vh"
    class="video-dialog"
    :append-to-body="true"
  >
    <p class="arrow">
      <el-button
        icon="el-icon-download"
        @click="download()"
        style="download"
        type="primary"
        size="mini"
      >下载</el-button>
      <span
        style="float :right;padding-right:40px;font-size: 20px;color: rgb(223 227 234);cursor: pointer;"
        @click="videoDialogVisible = false;"
      >
        <i style="font-size: 20px;" class="el-icon-close"></i>
      </span>
    </p>
    <div class="test_two_box" v-if="videoDialogVisible">
      <video id="myVideo" class="video-js">
        <source
          :src="videoSrc"
          type="video/mp4"
        />
      </video>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { Message } from "element-ui";
import req from "@/request.js";
export default {
  name: "TestTwo",
  props: ["fileRow"],
  data() {
    return {
      videoDialogVisible: false,
      videoSrc:''
    };
  },
  // computed: {
  //    downloadUrl: function() {
  //     return window.context.portal+'/file/v1/downloadFile?fileId=' +  this.fileRow.id;
  //   }
  // },
  watch: {
    'fileRow.id': function(newVal, oldVal) {
      if(newVal){
        let _this = this;
        req.get(window.context.portal+'/file/onlinePreviewController/v1/getFileById_'+newVal,'arraybuffer').then(response=>{
            _this.videoSrc = window.URL.createObjectURL(new Blob([response.data], { type: 'video/mp4' }));
        });
      }
    }
  },
  methods: {
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "800px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "573x",
        playbackRates: [0.5, 1, 1.5, 2], 
        language: "zh-CN"
      });
    },
    show() {
      this.videoDialogVisible = true;
      let this_ = this;
      setTimeout(function() {
        this_.initVideo();
      }, 50);
    },
    //附件下载
    download(){
      req.download(this.downloadUrl);
    }
  }
};
</script>
 <style lang="scss" scoped>
.video-dialog /deep/  .el-dialog__header {
  display: none;
}
.video-dialog /deep/ .el-dialog__body {
  height: 100%;
  padding: 0px;
}
</style>