vue-视频加载播放

<div class="map-info-suspension map-info-right video-box" v-if="video" style="width:460px;">
        <video preload="auto"
                   :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
          <source :src="videoSrc" type="video/mp4">
        </video>
        <!--<img src="@/assets/images/video-demo.jpg" class="video">-->
      <p class="video-title">园区简介</p>
      <div id="contentId"
           :class="[styleFlag ? 'overflow-style' : 'video-content']"
           @click="removeStyle">
        暂无简介...
      </div>
    </div>
<script>
import Video from 'video.js';
import {getParkContent} from "@/views/map/display/load";
import {getToken} from '@/utils/auth'
import 'video.js/dist/video-js.css';
import * as echarts from 'echarts';
export default {
      name:'mapIndex',
      data() {
        return {
          videoSrc:process.env.VUE_APP_BASE_API+"/system/park/getVideoFile?token="+getToken(),
          //videoSrc: '@/assets/video/yixiuqu.mp4',
          videoImg: '@/assets/images/video-demo.jpg',
          playStatus: '',
          muteStatus: '',
          isMute: true,
          isPlay: false,
          width: '460', // 设置视频播放器的显示宽度（以像素为单位）
          height: '260', // 设置视频播放器的显示高度（以像素为单位）
          preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          autoplay: '',
         
          styleFlag:true,

      }
    },
    mounted(){
       /* this.barChart(this.barChart_xdata[0],this.barChart_ydata[0]);*/
      getParkContent().then(response => {
        if(response.code==200){
          document.getElementById("contentId").innerText=response.data.content;
        }
      });
    },
    methods: {
      changeActive($event){
        document.getElementById("initLi").className='';
        $event.currentTarget.className="liMous";
      },
      removeActive($event){
        $event.currentTarget.className="";
      },
      
        removeStyle(){
          this.styleFlag=!this.styleFlag;
        }
    },
}
</script>

<style scoped>
  .map{
    position: absolute;
    height:100%;
    width: 100%;
    z-index: 2;
    overflow:hidden;
    background:url(../assets/images/map-demo2.jpg);
    background-size: cover;
  }
  .map-info-center{
    width: 325px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .map-info-top-full{
    position: absolute;
    top: 35px;
    left: 50px;
    width: calc(100% - 100px);
    height: 54px;
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 3px 8px 0px
      rgba(30, 72, 111, 0.35);
    border-radius: 10px;
  }
  .el-icon-arrow-down {
    font-size: 18px;
  }
  .map-info-right{
    top: 102px;
    right: 50px;
  }
  .chart-box{
    padding: 10px;
    width: 324px;
    height: 245px;
  }
  .video-box{
    width: 354px;
  }
  .video-box .video{
    height: 256px;
  }
  .video-box .video-title{
    padding: 5px 10px 0;
    font-weight: bold;
  }
  .video-content{
    /*padding: 5px 10px 15px;*/
    margin:6px 12px 14px 14px;
    text-indent: 2em;
    overflow-y:scroll;
    height: 200px;
  }
  .overflow-style{
    margin:6px 12px 14px 14px;
    text-indent: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .my-menu .secondary-menu-ul{
    display: none;
  }
  .my-menu li:hover .secondary-menu-ul{
    display: block;
  }
  .my-menu li:hover .el-icon-arrow-down{
    transform: rotate(180deg);
  }

 /* checkebox颜色重置 */
  >>>.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #3367e3;
    border-color: #3367e3;
  }
  >>>.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #3367e3;
  }
  >>>.el-checkbox__label{
    color: rgba(34, 34, 34, 0.85);
    font-size: 16px;
  }
  .liMous{
    color:#0c5ee5;
  }
</style>

//加载园区视频文件流
    @RequestMapping(value = "/getVideoFile",method = RequestMethod.GET)
    public String  getVideoFile(HttpServletRequest request , HttpServletResponse response) throws IOException {
        try {
            String token=request.getParameter("token");
            LoginUser user = tokenService.getLoginUserByToken(token);
            FileInputStream fis = null;
            OutputStream os = null ;
            Long tenantId = user.getTenantId();
            String tenantCode = tenantService.findBigTenantCode(tenantId);
            IntroductionPark introductionPark = introductionParkService.getIntroductionPark(tenantCode);
            //String filePath = KdgcConfig.getProfile()+"/video/anqing.mp4";
            String filePath = KdgcConfig.getProfile()+introductionPark.getVideoPath();
            fis = new FileInputStream(filePath);
            int size = fis.available(); // 得到文件大小
            byte data[] = new byte[size];
            fis.read(data); // 读数据
            fis.close();
            fis = null;
            response.setContentType("video/mp4"); // 设置返回的文件类型
            os = response.getOutputStream();
            os.write(data);
            os.flush();
            os.close();
            os = null;


        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }

标签：box,el,vue,fis,map,video,播放,os,加载
来源： https://www.cnblogs.com/double-s/p/15817059.html