一、vue-video-player实现视频播放

• 安装vue-video-player插件vue-video-player和videojs-contrib-hls后者是播放播放m3u8格式视频流。
• 在main.js中引入注入到全局const hls = require("videojs-contrib-hls") ;Vue.use(hls)
• 将css文件引入import "video.js/dist/video-js.css";import "vue-video-player/src/custom-theme.css";
• 在使用的地方引入import { videoPlayer } from "vue-video-player";
• 使用代码

  <div class="video_1">
          <videoPlayer :playsinline="true" :options="playerOptions"></videoPlayer>
</div>
//配置
 this.playerOptions = {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        controls: true,
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - // // 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, //  //是否流体自适应容器宽高
        techOrder: ["html5"],
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            type: "application/x-mpegURL", // 播放视频格式（除了rtmp格式）
            src: "http://192.168.16.105:8081/flight/lxl.m3u8", // 视频的路径
          },
        ],
        poster: "", //封面地址
        height: "100%",
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: false, //全屏按钮
        },
      };

二、视频全屏信息框浮在视频之上

• 由于视频全屏后video标签层级是最高级，在pc端没有找到适合的方法使全屏的信息展示在视频之上。类似这种：
  
• 当时比较急，方案是：1、把视频全屏的按钮屏蔽掉，自己写一个全屏button。2、在一个盒子里吧全屏的视频和信息写好，隐藏掉（video不是全屏的时候可以像使用普通标签一样）。3、自己利用screenfull.js，在点击全屏button的时候让写好的盒子全屏。
• 这样可以达到全屏的效果，还可以把信息放到视频之上，但是这样页面上会有两个视频的存在，并不是真正意义上的让video全屏。暂时还没有找到更好的方法实现这个需求。
• 参考代码入下：

//这是需要全屏的video和信息
<div class="full-screen" v-show="dialogVisible" id="full" ref="full">
     <div class="my-video" id="myVideo">
       <videoPlayer :playsinline="true" :options="dialogPlayer"></videoPlayer>
     </div>

     <div :class="customClass">
       <div class="dialog-header">
         <span class="iconfont iconrightalign downward" v-show="!isShowInfo" @click="pickUp"></span>
         <span class="iconfont iconleftalign upward" v-show="isShowInfo" @click="pickUp"></span>
         <span class="retun-btn" @click="quitFull">
           <img :src="returnBtn" />
         </span>
       </div>
       <div class="dialog-info" v-show="isShowInfo">
         <div class="info">
           <p>
             <span class="icon-cricle"></span>
             <span>高度</span>
             <span class="value">{{screenAltitude}}m</span>
           </p>
           <!-- <p>
             <span class="icon-cricle"></span>
             <span>速度</span>
             <span class="value">37km/h</span>
           </p>
           <p>
             <span class="icon-cricle"></span>
             <span>机头朝向</span>
             <span class="value">西南</span>
           </p>-->
           <p>
             <span class="icon-cricle"></span>
             <span>经度</span>
             <span class="value">{{screenLongitude}}</span>
           </p>
           <p>
             <span class="icon-cricle"></span>
             <span>纬度</span>
             <span class="value">{{screenLatitude}}</span>
           </p>
         </div>
         <div class="dialog-map">
           <div class="map" ref="mapSrceen"></div>
         </div>
       </div>
     </div>
   </div>
   
// 全屏
   selfSrceen(code) {
     this.dialogVisible = true;
     this.customClass = "video-dialog_unfold";
     this.dialogPlayer = {
       playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
       autoplay: true, //如果true,浏览器准备好时开始回放。
       controls: true,
       muted: true, // 默认情况下将会消除任何音频。
       loop: false, // 导致视频一结束就重新开始。
       preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。
       language: "zh-CN",
       aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - // // 用冒号分隔的两个数字（例如"16:9"或"4:3"）
       fluid: true, //  //是否流体自适应容器宽高
       techOrder: ["html5"],
       html5: { hls: { withCredentials: false } },
       sources: [
         {
           type: "application/x-mpegURL", // 播放视频格式（除了rtmp格式）
           src: "http://182.151.199.4:8082/flight/lxl.m3u8", // 视频的路径
         },
       ],
       poster: "", //封面地址
       height: "100%",
       code: "dc",
       notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
       controlBar: {
         timeDivider: false,
         durationDisplay: false,
         remainingTimeDisplay: false,
         fullscreenToggle: false, //全屏按钮
       },
     };
     screenfull.request(this.$refs.full);//主要是这个函数，可以直接让某个元素全屏
   },

// 退出全屏
   quitFull() {
       this.dialogVisible = false;
       screenfull.exit();//自己写的退出全屏事件
   },
   
//---------esc退出全屏----------------------
//全屏判断状态 取消
   checkFull() {
     //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
     var isFull =
       document.mozFullScreen ||
       document.fullScreen ||
       //谷歌浏览器及Webkit内核浏览器
       document.webkitIsFullScreen ||
       document.webkitRequestFullScreen ||
       document.mozRequestFullScreen ||
       document.msFullscreenEnabled;
     if (isFull === undefined) {
       isFull = false;
     }
     return isFull;
   },
//在vue的create函数里监听全屏的变化。
   created() {
   	let that = this;
     // 监听全屏事件
  	 window.onresize = function () {
     	if (!that.checkFull()) {
      		 that.dialogVisible = false;
      		 that.isShowInfo = true;
    	 }
   	};
 },

三、问题总结

这样的全屏可以实现，但是当用户按下F11播放大屏的时候是没有办法通过window.onresize函数进行监听的，这个时候的浏览器窗口并没有发生变化，都是在大屏状态下，浏览器网页也没有办法监听esc事件，这样一来就会导致全屏后回去消息内容框还在，没有办法隐藏。