标签：box el vue fis map video 播放 os 加载

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。